- ベストアンサー
リンク付画像を所定の時間に切り替える方法
- JavaScriptを使用して、所定の時間にリンク付きの画像を切り替える方法を教えてください。
- 10：00～11：30はA.jpgを表示し、クリックするとA.dplというプレイリストを再生します。11：30～15：00はB.jpgを表示し、クリックするとB.dplというプレイリストを再生します。15：00～19：00はC.jpgを表示し、クリックするとC.dplというプレイリストを再生します。19：00～22：00はD.jpgを表示し、クリックするとD.dplというプレイリストを再生します。画像はA.jpgのみで、リンクのみを時間に応じて切り替えることは可能でしょうか？
- リンク付きの画像を特定の時間に切り替えるためには、JavaScriptを使用することができます。例えば、10：00～11：30の時間帯にはA.jpgを表示し、クリックするとA.dplというプレイリストを再生するように設定します。同様に、11：30～15：00、15：00～19：00、19：00～22：00の時間帯にはそれぞれB.jpg、C.jpg、D.jpgを表示し、対応するプレイリストを再生します。また、画像はA.jpgのみで、リンクのみを時間に応じて切り替えることも可能です。
- komusan
- お礼率100% (2/2)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
連休中なので、回答がないのかな… ＞リンク付の画像を所定の時間に切り替える方法を教えてください その時の時間は new Date() で取得できますので、その時間と指定した時間帯を比較して表示する内容を制御すればよろしいかと思います。 ただし、new Date()だとローカルＰＣの時間設定に依存することになるので、もっと正確に行ないたい場合は、サーバや外部のサービスなどから時間を取得することになります。（過去の質問にあったと思います） Date()関数に関しては、とりあえずこのあたりを http://www.tohoho-web.com/js/date.htm ＞リンクは後々変更したいので変更箇所が少なくすむ管理しやすいものにしたいです。 方法としてすぐに思いつくのは、データを配列で最初に定義しておく方法か、ＨＴＭＬに直接書いておく方法。 前者の場合は、時間帯に応じてその要素の属性（例えばＡ要素のhrefやimg要素のsrcなど）を書換えてあげればよろしいかと。 後者の場合は、必要な要素だけ表示して残りは非表示にするような制御でいけるかと思います。 どちらが、変更しやすいかは考え方にもよるので… ＤＯＭ操作に関しては、このあたりをきっかけに検索してみては http://javascriptist.net/docs/pract_dom.html http://www.yscjp.com/doc/dom1.html ＞画像はA.ｊpgのみでリンクだけを時間によって変えるということは可能でしょうか 可能です。 最初のご質問のものをそのまま利用して（全時間帯とも画像が同じ）もできますし、最初からそれでよいならスクリプトを少し簡単にすることもできます。 ご質問文では、時間帯指定の無い時間はどうするのか書いてありませんが、そのあたりの処理も必要になるでしょう。
お礼
ありがとうございます！ 調べてみたいと思います。