人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

JavaScriptに関して

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

●質問者: ageharock
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:1月1日 2007年 JavaScript ポイント 文言
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● bankband
●35ポイント

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

<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等を変えて実験してみましたが、どうもうまく動作しませんでした。

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

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


2 ● bankband
●35ポイント ベストアンサー

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

◎質問者からの返答

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

でも、ほぼ完璧です。

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ