ページ中、画像が表示されている箇所(今年もありがとう)に、指定日以降(例:2007年1月1日以降)、別な文言(今年もよろしく)を表示したいのですが、どういった記述が良いのでしょうか?
ポイントとしては、
●後に文言を表示したい箇所が、現在は画像であるということ
●切り替え日が2007年1月1日
なあたりでしょうか。
お願いします。
失礼しました。IE6とfirefoxで動作を確認したソースで回答します。
SPANタグの中に表示を切り替える内容を記述して,
切り替える方法にしてみました。どうでしょうか?
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type = "text/javascript">
<!--
function changeHTML(){
//画面表示を切り替える日時を指定
var dNewYear = new Date("2007/01/01 00:00:00");
//現在の日時を取得
var dNow = new Date();
//テストする場合は以下のように指定
//var dNow = new Date("2007/01/01 00:00:01");
//現在の日時と画面表示を切り替える日時を比較
if( dNewYear.getTime() <= dNow.getTime() ){
//SPAN:Kotoshiを非表示に
document.getElementById("Kotoshi").style.display = "none;"
//SPAN:Rainenを表示
document.getElementById("Rainen").style.display = ""
}
}
//-->
</script>
</head>
<body>
<span id="Kotoshi">
<img src="hogehoge.jpg" alt="今年もありがとう">
</span>
<span id="Rainen" style="display:none;">
<table>
<tr>
<td>今年も</td>
</tr>
<tr><td>よろしく</td></tr>
<table>
</span>
<script type="text/javascript">
<!--
//画像表示切替処理よびだし
changeHTML();
//-->
</script>
</body>
</html>
現在あるページの画像を切り替える簡単なサンプルを書いてみました。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script langurage="javascript">
function changeHTML(){
//画面表示を切り替える日時を指定
var dNewYear = new Date("2007/01/01 00:00:00");
//現在の日時を取得
var dNow = new Date();
//テストする場合は以下のように指定
//var dNow = new Date("2007/01/01 00:00:01");
//現在の日時と画面表示を切り替える日時を比較
if( dNewYear.getTime() <= dNow.getTime() ){
/*あけましておめでとうの処理を記述*/
//切替て表示する内容のHTMLを作成
var strHtml = "<b style='color:red;'>今年もよろしく</b>";
//画像と上記記述HTMLの内容を置き換え
document.getElementById("imgKotoshi").outerHTML = strHtml;
}
}
</script>
</head>
<body>
<img src="hogehoge" alt="今年もありがとう" id="imgKotoshi">
<script langurage="javascript">
//画像表示切替処理よびだし
changeHTML()
</script>
</body>
</html>
ありがとうございます。
こちらの仕様にあわせて、ID等を変えて実験してみましたが、どうもうまく動作しませんでした。
MozillaでもIEでも動作する方法でお願いします。
また、例として「今年もよろしく」にしましたが、中にテーブルを配置したい場合なども、わかるようでしたら、お願いします。
失礼しました。IE6とfirefoxで動作を確認したソースで回答します。
SPANタグの中に表示を切り替える内容を記述して,
切り替える方法にしてみました。どうでしょうか?
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type = "text/javascript">
<!--
function changeHTML(){
//画面表示を切り替える日時を指定
var dNewYear = new Date("2007/01/01 00:00:00");
//現在の日時を取得
var dNow = new Date();
//テストする場合は以下のように指定
//var dNow = new Date("2007/01/01 00:00:01");
//現在の日時と画面表示を切り替える日時を比較
if( dNewYear.getTime() <= dNow.getTime() ){
//SPAN:Kotoshiを非表示に
document.getElementById("Kotoshi").style.display = "none;"
//SPAN:Rainenを表示
document.getElementById("Rainen").style.display = ""
}
}
//-->
</script>
</head>
<body>
<span id="Kotoshi">
<img src="hogehoge.jpg" alt="今年もありがとう">
</span>
<span id="Rainen" style="display:none;">
<table>
<tr>
<td>今年も</td>
</tr>
<tr><td>よろしく</td></tr>
<table>
</span>
<script type="text/javascript">
<!--
//画像表示切替処理よびだし
changeHTML();
//-->
</script>
</body>
</html>
ううう、今度はIEで表示しないです・・・
でも、ほぼ完璧です。
わたし自身も、ちょっと色々触ってみます。
ありがとうございました。
ううう、今度はIEで表示しないです・・・
でも、ほぼ完璧です。
わたし自身も、ちょっと色々触ってみます。
ありがとうございました。