- ベストアンサー
Javaスクリプトで日によって画像を変更する方法について
- Javaスクリプトで日によって画像を変更する方法について教えてください。
- 現在、Javaスクリプトを使用して日付に応じて画像を変更するスクリプトを作成していますが、リンクをつけた画像にエラーが出てしまいます。
- Javaスクリプトのスクリプトタグに何か追加することで、リンクをつけた画像でも正常に動作するようにする方法はありますか？
- -matatabi-
- お礼率66% (14/21)
- JavaScript
- 回答数3
- ありがとう数11
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
そうすると、日付、画像に加えて、URL情報が必要になりますね。 あと画像は100*100の固定でいいのか？とか、 その他属性についても細かい疑問が色々湧いてきますが、 とりあえずURLを加えただけのものに改造します。 そのスクリプトには日付と画像の情報しかないので、 URL情報を追加します。 MyURL = new Array(); MyURL[0] = "http://www.example.com/"; って感じですね。 次にクリックしたら指定URLに飛ばすという処理がないのでそれを追加します。 function DayPic()の最後のほうの2行を、 > if(MyMon[i] == tuki && MyDay[i] == kyou) > { document.images['mypic'].src=MyData[i]; break; } if(MyMon[i] == tuki && MyDay[i] == kyou) { var mypic = document.images['mypic']; mypic.style.cursor = "pointer"; mypic.src = MyData[i]; mypic.onclick = function() { location.href = MyURL[i]; }; break; } といった感じにします。 > <img src="1.gif" name="mypic" width="100" height="100" border="0"> これはデフォルト画像で、 ここの部分の前後にa要素が入り、デフォルトリンクがあると想定します。 その場合上のスクリプトだと、こっちのリンクが優先されてしまいます。 もしデフォルトリンクがある場合、a要素は使わずに、 <img src="1.gif" name="mypic" width="100" height="100" style="cursor:pointer" onclick="javascript:location.href='http://default.example.com/'"> のようにして下さい。 一応違うパターンも作ってみました。 <script type="text/javascript"> (function(){ var data = [ //データここから ["2010/9/5", "google.png", "http://www.google.com/"], ["2010/9/6", "bing.png", "http://www.bing.com/"] //ここまで ]; var utNow = new Date()/1e3|0; for (var i = 0; i < data.length; i++) { var date = data[i][0].split("/"); var ut = new Date(date[0],date[1]-1,date[2])/1e3|0; var utNextDay = ut+3600*24; if (ut <= utNow && utNextDay > utNow) { window.onload = function() { var mypic = document.getElementById("mypic"); mypic.innerHTML = '<a href="'+data[i][2]+'" title><img src="'+data[i][1]+'" width="100" height="100"></a>'; }; break; } } })(); </script> <style type="text/css"> #mypic img { border-style: none } </style> </head> <body> <div id="mypic"> <a href="http://www.yahoo.co.jp/"><img src="yahoo.png" width="100" height="100"></a> </div> こちらは、<div id="mypic">の中身を書き換えてしまうやり方なので、a要素も使えます。 データの形式は、["年/月/日", "画像名（画像の場所）", "クリックしたら飛びたい場所"]です。 データを追加する場合は、[]の後ろにカンマをつけて加えてください。 最後のデータの後ろにはつけないで下さい。
その他の回答 (2)
- zeff
- ベストアンサー率69% (137/198)
横からになってしまいますが失礼。 データは一括にまとめたほうが、 扱いも追加も楽だと思います。 <script type="text/javascript"> <!-- function DayPic(){ var MyData = new Array(); var n = 0;//データ数 //月、日、画像、リンク先をカンマで区切る MyData[n++] = "9,4,01.gif,hoge1.html"; MyData[n++] = "9,5,02.gif,hoge2.html"; MyData[n++] = "9,6,03.gif,hoge3.html"; //MyData[n++] = "9,7,04.gif,hoge4.html";と追加していく var hiduke = new Date(); var tuki = hiduke.getMonth()+1; var kyou = hiduke.getDate(); var mypic = document.images['mypic']; for( var i = 0; i < n; i++ ){ MyData[i] = MyData[i].split(",");//カンマで区切られたデータを配列化 if( MyData[i][0] == tuki && MyData[i][1] == kyou ){ mypic.src = MyData[i][2]; mypic.alt = tuki+"月"+kyou+"日の画像"; mypic.parentNode.href = MyData[i][3];//親ノードのリンク先書き替え break; } } } //window.onload //@cc_on window./*@if(@_jscript_version<=5.8) attachEvent('on'+ @else @*/ addEventListener(/*@end @*/ 'load',function(){ DayPic(); }, false ); //--> </script> </head> <body> <p><a href="fuga.html"><img src="1.gif" name="mypic" width="100" height="100" border="0"></a></p> </body> </html>
お礼
zeffさんの記述したスクリプトでも正常に動作が確認できました。 これはこれで管理がしやすい分、日付が多くなる設定ですと助かってきます。 お二方の回答したスクリプトを参考にさせていただいて、 あとは自身で他の属性にも手をつけていきたいと思います。 この度はありがとうございました！
- pnck
- ベストアンサー率90% (9/10)
> どうすればリンクをつけた画像でも正常に動作できるようになりますか。 一番最後の行の、img要素の前後をa要素で囲んで、 <div><a href="http://google.com/"><img src="1.gif" name="mypic" width="100" height="100" border="0"></a></div> （imgはインライン要素なのでdivを加えときました。） こういうことではないのですか？ 変更した画像によってリンク先も変えたいということでしょうか？
補足
pnckさん、回答ありがとうございます。 少し言葉が足りなかったため、補足させていただきます。 >>変更した画像によってリンク先も変えたいということでしょうか？ 仰るとおりです。画像が変更するたびに設定したリンク先も変えていきたいのです。 たとえば、９月５日なら『画像Ａに１のリンク先へジャンプ』９月６日は『画像Ｂに２のリンク先へジャンプ』９月７日には『画像Ｃに３のリンク先へジャンプ』・・・といった具合です。 pnckさんが教えてくださった記述ですと、リンクは指定できましたが、複数の画像に１つのリンクが固定されてしまうので、なんとか１画像に１リンクとして設定できれば完璧なのですが…何か方法はないものでしょうか。
お礼
pnckさんの記述してくださった方法で上手くいきました。 暑い中、貴重な時間を割いて回答していただき感謝します。本当にありがとうございます。 >>あと画像は100*100の固定でいいのか？とか、 >>その他属性についても細かい疑問が色々湧いてきますが、 とりあえず画像にリンクを指定することを優先質問とさせていただいた為、それ以外の属性については無視する方向性にしてしまいました。またも説明不足ですみません。あとは自身で画像サイズなどを決めていこうと思います。