リンク付画像を所定の時間に切り替える方法

質問

はじめて質問します。よろしくお願いします。

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.ｊpgのみでリンクだけを時間によって変えるということは可能でしょうか？

すみませんが、ご教授お願いします。

回答No.1

fujillin · ベストアンサー

連休中なので、回答がないのかな…

＞リンク付の画像を所定の時間に切り替える方法を教えてください
その時の時間は 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のみでリンクだけを時間によって変えるということは可能でしょうか
可能です。
最初のご質問のものをそのまま利用して（全時間帯とも画像が同じ）もできますし、最初からそれでよいならスクリプトを少し簡単にすることもできます。

ご質問文では、時間帯指定の無い時間はどうするのか書いてありませんが、そのあたりの処理も必要になるでしょう。

お礼

ありがとうございます！
調べてみたいと思います。