プロが教えるわが家の防犯対策術！

Javaスクリプトに関して分からないことがあるため、この場を借りて質問

解決済

  • 質問者：-matatabi-
  • 質問日時：
  • 回答数：3件

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">

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.2ベストアンサー

  • 回答者： pnck
  • 回答日時：

そうすると、日付、画像に加えて、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要素も使えます。
データの形式は、["年/月/日", "画像名（画像の場所）", "クリックしたら飛びたい場所"]です。
データを追加する場合は、[]の後ろにカンマをつけて加えてください。
最後のデータの後ろにはつけないで下さい。
    • good
    • 0
    • 件
通報する
この回答へのお礼

pnckさんの記述してくださった方法で上手くいきました。
暑い中、貴重な時間を割いて回答していただき感謝します。本当にありがとうございます。

>>あと画像は100*100の固定でいいのか？とか、
>>その他属性についても細かい疑問が色々湧いてきますが、

とりあえず画像にリンクを指定することを優先質問とさせていただいた為、それ以外の属性については無視する方向性にしてしまいました。またも説明不足ですみません。あとは自身で画像サイズなどを決めていこうと思います。

通報する
お礼日時：2010/09/05 13:19

No.3

  • 回答者： zeff#1
  • 回答日時：

横からになってしまいますが失礼。


データは一括にまとめたほうが、
扱いも追加も楽だと思います。

<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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

zeffさんの記述したスクリプトでも正常に動作が確認できました。
これはこれで管理がしやすい分、日付が多くなる設定ですと助かってきます。

お二方の回答したスクリプトを参考にさせていただいて、
あとは自身で他の属性にも手をつけていきたいと思います。
この度はありがとうございました！

通報する
お礼日時：2010/09/05 13:26

No.1

  • 回答者： pnck
  • 回答日時：

> どうすればリンクをつけた画像でも正常に動作できるようになりますか。



一番最後の行の、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さんが教えてくださった記述ですと、リンクは指定できましたが、複数の画像に１つのリンクが固定されてしまうので、なんとか１画像に１リンクとして設定できれば完璧なのですが…何か方法はないものでしょうか。

補足日時：2010/09/05 04:45
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報