JavaScriptに関して


ページ中、画像が表示されている箇所(今年もありがとう)に、指定日以降(例:2007年1月1日以降)、別な文言(今年もよろしく)を表示したいのですが、どういった記述が良いのでしょうか?
ポイントとしては、
●後に文言を表示したい箇所が、現在は画像であるということ
●切り替え日が2007年1月1日
なあたりでしょうか。
お願いします。

回答の条件
  • URL必須
  • 1人3回まで
  • 登録:2006/12/19 14:53:32
  • 終了:2006/12/19 18:02:37

ベストアンサー

id:bankband No.2

bankband回答回数23ベストアンサー獲得回数42006/12/19 16:47:09

ポイント35pt

失礼しました。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>

http://q.hatena.ne.jp/1166507610

id:ageharock

ううう、今度はIEで表示しないです・・・

でも、ほぼ完璧です。

わたし自身も、ちょっと色々触ってみます。

ありがとうございました。

2006/12/19 17:21:46

その他の回答(1件)

id:bankband No.1

bankband回答回数23ベストアンサー獲得回数42006/12/19 15:42:33

ポイント35pt

現在あるページの画像を切り替える簡単なサンプルを書いてみました。

<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>

http://www.tohoho-web.com/js/index.htm

id:ageharock

ありがとうございます。

こちらの仕様にあわせて、ID等を変えて実験してみましたが、どうもうまく動作しませんでした。

MozillaでもIEでも動作する方法でお願いします。

また、例として「今年もよろしく」にしましたが、中にテーブルを配置したい場合なども、わかるようでしたら、お願いします。

2006/12/19 16:07:55
id:bankband No.2

bankband回答回数23ベストアンサー獲得回数42006/12/19 16:47:09ここでベストアンサー

ポイント35pt

失礼しました。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>

http://q.hatena.ne.jp/1166507610

id:ageharock

ううう、今度はIEで表示しないです・・・

でも、ほぼ完璧です。

わたし自身も、ちょっと色々触ってみます。

ありがとうございました。

2006/12/19 17:21:46
  • id:bankband
    //SPAN:Kotoshiを非表示に
    var objKotoshi = document.getElementById("Kotoshi");
    objKotoshi.style.display = "none"

    //SPAN:Rainenを表示
    var objRainen = document.getElementById("Rainen");
    objRainen.style.display = ""

    これではどうですか?
    何度もすみません・・・
  • id:ageharock
    本当にありがとうございます。
    助かりました。
    大満足です!

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません