Javaスクリプトで日によって画像を変更する方法について
- Javaスクリプトで日によって画像を変更する方法について教えてください。
- 現在、Javaスクリプトを使用して日付に応じて画像を変更するスクリプトを作成していますが、リンクをつけた画像にエラーが出てしまいます。
- Javaスクリプトのスクリプトタグに何か追加することで、リンクをつけた画像でも正常に動作するようにする方法はありますか？
- ベストアンサー
Javaスクリプトに関して分からないことがあるため、この場を借りて質問
Javaスクリプトに関して分からないことがあるため、この場を借りて質問させていただきます。 日によって画像を変更するためのスクリプトを作成したく、検索でそれらしきものは発見できたのですが、その形式だと画像は表示されても画像にリンクをつけたものにはエラーが出てしまうのです。 どうすればリンクをつけた画像でも正常に動作できるようになりますか。 以下の記述がそのスクリプトタグです。このタグに何かを追加すればいいのでしょうか…？ もし解決策の分かる方がおりましたら回答のほど宜しくお願い致します。 <script language="JavaScript"> <!--//Copyright (C) WEST MiRa http://www.west-mira.jp MyMon=new Array(); MyDay=new Array(); MyData=new Array(); //表示したい月を指定する MyMon[0]=9; //表示したい日を指定する MyDay[0]=4; //表示したい画像を指定する MyData[0]='01.gif'; function DayPic() { hiduke=new Date(); tuki=hiduke.getMonth()+1; kyou=hiduke.getDate(); for(i=0; i < MyMon.length; i++) if(MyMon[i] == tuki && MyDay[i] == kyou) { document.images['mypic'].src=MyData[i]; break; } } //--> </script> <body onLoad="DayPic();"> <img src="1.gif" name="mypic" width="100" height="100" border="0">
- -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さんが教えてくださった記述ですと、リンクは指定できましたが、複数の画像に１つのリンクが固定されてしまうので、なんとか１画像に１リンクとして設定できれば完璧なのですが…何か方法はないものでしょうか。
関連するQ&A
- Javaの画像切り替え、同一ページに複数設置する
同一ページ内の複数の場所に、外部のファイルで数秒毎に画像が切り替わる動作を指定したスクリプトを読み込ませたいのですが上手くいきません。 Java初心者で、いろいろ検索して回ったのですが、見当たらなく、ご検討よろしくお願いします。 以下、実装したい内容 <body> <img src="img/1.jpg" name="img1"> // 画像(1)（2秒毎に、(2)、(3)に画像が切り替わる） <img src="img/4.jpg" name="img4"> // 画像(4)（2秒毎に、(5)、(6)に画像が切り替わる） 以下、上記の動作をする画像を複数設置。 </body> 外部Javaソース chgCount = 0; mypic = new Array ( "img/1.jpg", "img/2.jpg", "img/3.jpg"); function imgChanger() { chgCount++; chgCount %= 3; document.img1.src = mypic[chgCount]; } setInterval("imgChanger()",2000);
- ベストアンサー
- JavaScript
- アクションスクリプトについて質問です。
アクションスクリプトについて質問です。 ◆やりたいこと◆ 曜日を取得して、その曜日のフレーム内容を表示させたいです。 ◆試したこと◆ アクションスクリプトをいろいろなサイトを見ながら作ってみました。 myDate = new Date(); myDay = myDate.getDay(); if (myDay == 0) { gotoAndStop("sun"); } else if (myDay == 1) { gotoAndStop("mon"); } else if (myDay == 2) { gotoAndStop("tue"); } else if (myDay == 3) { gotoAndStop("wed"); } else if (myDay == 4) { gotoAndStop("thu"); } else if (myDay == 5) { gotoAndStop("fri"); } else if (myDay == 6) { gotoAndStop("sat"); } ◆不具合内容◆ データは表示されるのですが、myday のsun がまず表示されてしまいます。 ブラウザの更新をかけないと、その曜日のフレームの内容が表示されません。 3台のPCで試しましたが、同様な状態になります。 アクションスクリプトに不具合があるかと思うのですが 無知なため、これ以上のアイデアがでません。 どこを修正すれば良いのかお教えいただけませんでしょうか？ こちらの作成ソフトはfrimo 3 で ActionScript2.0、Flash Player8で吐き出ししております。
- ベストアンサー
- ホームページ作成ソフト
- 画像を変えるスクリプト
<HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- img=new Array(); for(i=1;i<=4;i++){ img[i]=new Image(); img[i].src="img"+i+".gif"; } function changeImage(i,j){ document.images[i].src=img[j].src; } // --> </SCRIPT> </HEAD> <BODY> <CENTER> <A href="#" onMouseOver="changeImage(0,2)" onMouseOut="changeImage(0,1)"><IMG src="img1.gif" border=0></A><BR> <BR> <A href="#" onMouseOver="changeImage(1,4)" onMouseOut="changeImage(1,3)"><IMG src="img3.gif" border=0></A> </CENTER> </BODY> </HTML> マウスオーバーしたら画像が変わるスクリプトです。 質問ですがこのスクリプトでどうしてオブジェクトを作っているのでしょうか？ 普通にsrcプロパティを変更するだけではだめなのでしょうか？例えばdocument.images[i].src="img"＋j＋".gif"のようにしてiとjを変えるような 感じです。
- ベストアンサー
- JavaScript
- これだけ外部スクリプトで動かない
<script type="text/javascript"> <!-- kikan=4; function new4W(writeday){ if((new Date()-new Date(writeday))/(24*60*60*1000)<=kikan) document.write("<img src='/img/ic/new036.gif'>"); } // --> </script> <script>new4W("2008/03/16")</script> 指定した日付（この場合 2008/03/16）から４日間、 画像を表示させるものです。<body>~</body>でちゃんと動きます。 <SCRIPT LANGUAGE="JavaScript" SRC="http://~/js/newmark.js"></SCRIPT> <script>new4W("2008/03/16")</script> 外部スクリプトにしました。そのまま内容を移行しましたが動きません。 呼び出しの部分を <head>~</head>に挿入しても、それでも動きません。 指定を絶対パス・相対パスいづれでも動きません。 これとは別に「３月１８日は○○さんの誕生日です」なる JavaScript を 外部から引いてますが、こちらは問題なくできています。 指定ＵＲＬも直接移動で内容が表示されるのを確認しました。 どうかご指導いただければと思います。よろしくお願いします。
- ベストアンサー
- JavaScript
- JAVAスクリプトについて質問です
画像を自動で切り換えたくて 色々なサイトからコピペして作ろうとするのですが どのパターンでも最初の画像しかでないか 画像すらでないかのエラーになってしまいます。 以下のソースでどこか誤りがあるのでしょうか？ それとも 設定などの問題なのでしょうか？ お分かりになる方ご回答宜しくお願いします。 --------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script language="JavaScript"> <!-- var imageList=new Array; imageList[0]=new Image; imageList[0].src="anime1"; imageList[1]=new Image; imageList[1].src="anime2"; imageList[2]=new Image; imageList[2].src="anime3"; imageList[3]=new Image; imageList[3].src="anime4"; imageList[4]=new Image; imageList[4].src="anime5"; imageList[5]=new Image; imageList[5].src="画像ファイル６"; function slideShow(imageNumber){ document.slideShow.src=imageList[imageNumber].src; imageNumber += 1; if(imageNumber < imageList.length){ window.setTimeout("slideShow(" + imageNumber + ")",2000); } } //--> </script> </head> <BODY onLoad="slideShow(0)"> <TABLE style="width: 230px; height: 180px; border: 2px outset; text-align: center;" cellpadding="0" cellspacing="10"> <TBODY> <TR><TD> <img src="http://blog-imgs-48.fc2.com/c/h/i/chikusinonekosupport/anime1.jpg" width="200" name="slideShow"> </TD></TR> </TBODY> </TABLE> </body> </html>
- 締切済み
- JavaScript
- 画像を切り替えながら、説明文をその下に表示したい
画像を切り替えるのにJava Scriptで <body> <div align="center"> <img id="mypic" src="./jpg/1.jpeg" height="600px"><br> <input type="button" value="戻る" onclick="go_back()"> <input type="button" value="進む" onclick="go_forward()"> </div> <script> var pics_src = new Array("jpg/1.jpeg","jpg/2.jpeg","jpg/3.jpeg"); var num = 0; function go_forward(){ if (num == 2) { num = 0; } else { num ++; } document.getElementById("mypic").src=pics_src[num]; } function go_back(){ if (num == 0) { num = 2; } else { num --; } document.getElementById("mypic").src=pics_src[num]; } </script> </body> としようと思っています。 同時に、この画像の説明文（全角で20文字くらい）を画像の下、または中に表示させたいと思っています。 画像にPaintで描きこむことを考えましたが、画像数が数百あり、現実的でありません。 頭の中では1.text,2.twext,3.textというファイルを作り、その中に説明文20字程度を記入、それをhtmlで表示できればと思っていますが、どうにも進みません。 教えてください。
- ベストアンサー
- その他（Webサービス・アプリ）
- こちらの質問を参考に同じ様に画像をランダムするものを作りました。
こちらの質問を参考に同じ様に画像をランダムするものを作りました。 http://okwave.jp/qa/q716071.html No.3の回答を参考に一緒のものを作り、正常に動作しております。 ここからさらに、画像に合わせたリンク先へ飛ばしたいのですが （0.jpg→0.html 1.jpg→1.html 2.jpg→2.html の様に） どう手を加えればいいでしょうか？アドバイスよろしくお願いします。 【以下javascriptの部分】 <script type="text/javascript"><!-- NoMem = new Array(); function RndmNo(n){ x=Math.floor(Math.random()*100);//「Math.random()*100」の"100"は、用意している画像ファイルの枚数を指定 if (NoMem.length){ for (j=0; j<NoMem.length; j++){ if (NoMem[j]==x){ RndmNo();} } } NoMem[n]=x; } for (k=0; k<3; k++){ RndmNo(k); } //以上、乱数を生成して配列に格納。 RndImg= new Array(); for (i=0; i<3; i++){ RndImg[i]= new Image(); RndImg[i].src="images/image"+NoMem[i]+".jpg"; //「"images/image"」には画像ファイルへのパスの共通部分を、「".jpg"」には画像ファイルに共通の拡張子を入れます } //イメージオブジェクトとして表示する画像を取得 function ImgDisp(){ document.images["imgs0"].src=RndImg[0].src; document.images["imgs1"].src=RndImg[1].src; document.images["imgs2"].src=RndImg[2].src; } window.onload=ImgDisp; //--></script>
- 締切済み
- JavaScript
- javaスクリプトが表示されない。
javaスクリプトが表示されない。 初めまして。 現在ホームページビルダー１０でホームページを作っています。 写真をランダムに表示させるjavaスクリプトを作ったのですが、プレビューではちゃんと表示されるのですが、 ウェブでのプレビューや、サーバーにアップロード（さくらインターネットです）すると、 まったく表示されません。 初心者なのでどうしていいかわからず困っています。 どなたかわかる方がいらっしゃいましたら、ぜひ教えてください。 よろしくお願いします。 ちなみに、このソースを書き込んでいます。 ↓ <script language="JavaScript"><!-- myImageCnt = 12; myImage = new Array(); myRnd = Math.floor(Math.random()*myImageCnt); document.write("<img src='",myImage[myRnd],"' border='0' >"); // --></script></DIV>
- 締切済み
- その他（インターネット・Webサービス）
- java 曜日毎に画像切り替え _blank
曜日ごとに画像を切り替えするスクリプトに、リンク先を指定しています。 そのリンクを別窓(target="_blank")にしたいのですが、反映してくれません。 －－－－－－－－－－－－－－－－－－－－－－－－－－ var jmp = new Array(); var myimg = new Array(); jmp[0] = "URL1"; jmp[1] = "URL2"; jmp[2] = "URL3"; jmp[3] = "URL4"; myimg[0] = '<img src="画像1" alt="">'; myimg[1] = '<img src="画像2" alt="">'; myimg[2] = '<img src="画像3" alt="">'; var mynow = new Date(); var myweek = mynow.getDay(); document.write("<a href='"+jmp[myweek]+"'>" + myimg[myweek] + "</a>"); －－－－－－－－－－－－－－－－－－－－－－－－－－ javaの知識がまったくない初心者です。 document.writeの中に入れるのかなと思うのですが、別窓になりません。 誰か分かる方がいましたら教えていただけないでしょうか？
- 締切済み
- JavaScript
- 縮小画像をマウスオーバーで画像を切り替えるjavaスクリプトで
テーブルを４分割し左下に小さい画像、右上に大きい画像。でその小さい画像をマウスでロールオーバーした際に右上の大きい画像が変わるjavaスクリプトについてなんですが, ４分割（上記）のテーブルを一つ作成した所すんなり画像はかわり、思い通りで来たのですがもう一つすぐ下に同じようにしたら両方ともが変わらなくなりました。 ヘッド内のスクリプトは Images[1] = new Image(); Images[1].src = "画像url"; Images[2] = new Image(); Images[2].src = "画像url"; 画像に onMouseOver="change_image(1)" onMouseOut="change_image(2)" です。 ２個目のテーブルは Images[1] = new Image(); Images[1].src = "画像url"; Images[2] = new Image(); Images[2].src = "画像url"; この下に Images[3] = new Image(); Images[3].src = "画像url"; Images[4] = new Image(); Images[4].src = "画像url"; とし 画像には onMouseOver="change_image(3)" onMouseOut="change_image(4)" としました。 当方javaがほとんど分からない度素人なのです。 どなたか、よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
pnckさんの記述してくださった方法で上手くいきました。 暑い中、貴重な時間を割いて回答していただき感謝します。本当にありがとうございます。 >>あと画像は100*100の固定でいいのか？とか、 >>その他属性についても細かい疑問が色々湧いてきますが、 とりあえず画像にリンクを指定することを優先質問とさせていただいた為、それ以外の属性については無視する方向性にしてしまいました。またも説明不足ですみません。あとは自身で画像サイズなどを決めていこうと思います。