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">
No.2ベストアンサー
- 回答日時:
そうすると、日付、画像に加えて、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要素も使えます。
データの形式は、["年/月/日", "画像名(画像の場所)", "クリックしたら飛びたい場所"]です。
データを追加する場合は、[]の後ろにカンマをつけて加えてください。
最後のデータの後ろにはつけないで下さい。
pnckさんの記述してくださった方法で上手くいきました。
暑い中、貴重な時間を割いて回答していただき感謝します。本当にありがとうございます。
>>あと画像は100*100の固定でいいのか?とか、
>>その他属性についても細かい疑問が色々湧いてきますが、
とりあえず画像にリンクを指定することを優先質問とさせていただいた為、それ以外の属性については無視する方向性にしてしまいました。またも説明不足ですみません。あとは自身で画像サイズなどを決めていこうと思います。
No.3
- 回答日時:
横からになってしまいますが失礼。
データは一括にまとめたほうが、
扱いも追加も楽だと思います。
<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さんの記述したスクリプトでも正常に動作が確認できました。
これはこれで管理がしやすい分、日付が多くなる設定ですと助かってきます。
お二方の回答したスクリプトを参考にさせていただいて、
あとは自身で他の属性にも手をつけていきたいと思います。
この度はありがとうございました!
No.1
- 回答日時:
> どうすればリンクをつけた画像でも正常に動作できるようになりますか。
一番最後の行の、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さん、回答ありがとうございます。
少し言葉が足りなかったため、補足させていただきます。
>>変更した画像によってリンク先も変えたいということでしょうか?
仰るとおりです。画像が変更するたびに設定したリンク先も変えていきたいのです。
たとえば、9月5日なら『画像Aに1のリンク先へジャンプ』9月6日は『画像Bに2のリンク先へジャンプ』9月7日には『画像Cに3のリンク先へジャンプ』・・・といった具合です。
pnckさんが教えてくださった記述ですと、リンクは指定できましたが、複数の画像に1つのリンクが固定されてしまうので、なんとか1画像に1リンクとして設定できれば完璧なのですが…何か方法はないものでしょうか。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Javaスクリプトに関して分から...
-
Jquery の slide.toggle で要素...
-
画像転送(ワールド変換行列)...
-
jQueryのアコーディオンメニュ...
-
jqueryのsortableで一部ソート...
-
ドロップダウンリストの高さを...
-
フッター上部に謎の隙間
-
jQueryのeqで最後からn番目以降...
-
現在のウィンドウのままリンク...
-
ツリー型メニューについて
-
c++std::string型をTCHARに変換...
-
画像をクリックすると音が鳴り...
-
removeEventListenerについて
-
createElementで作成した要素を...
-
1つ1つの画像にイベントを発生...
-
Notice:Undefined index が。
-
CSS <div>の入れ子が反映さ...
-
MAX関数を使ってからLEFT JOIN...
-
画像ランダム表示、しかしダブ...
-
javascript imageオブジェクト...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
window.openで値の渡し方を教え...
-
jQueryでサーバー上のファイル...
-
画像と文字を同時に切り替えたい
-
複数のボールの落下、バウンド...
-
連番画像「次へ」「前へ」で、...
-
複数の画像の中から複数の画像...
-
javascript 時計24時間表示
-
imgのaltとtitleの要素を抜き出...
-
HPB_SCRIPT_ROV_50
-
クリックとダブルクリック
-
画像の座標位置取得
-
JavaScriptで画面サイズによっ...
-
JavaScriptでシンプルなスライ...
-
HPに複数の画像をクリックで切...
-
連続したURLへのwindow.openの...
-
【javascript】ロールオーバー...
-
一定時間ごとにgif画像の切...
-
リンク切の場合リンクしない
-
オブジェクトの番号
-
一定時に画像を変え、その画像...
おすすめ情報