Javascriptで画像とマップで指定したリンク先をアクセスされたたびに変更したいのですが、どうしたらいいのでしょうか??

マップの数値はこちらで設定する環境でいいです。
1.jpgにはこのマップ指定。
2.jpgにはこのマップ指定とか出来ればいいです。
お願いします。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2005/11/14 17:34:50
  • 終了:--

回答(2件)

id:jouno No.1

jouno回答回数280ベストアンサー獲得回数02005/11/14 19:35:16

ポイント25pt

http://www.tohoho-web.com/js/dom.htm

ドキュメントオブジェクトモデル(DOM)

<img id=”img_id” usemap=”default_map” src=”default.jpg” />


<script type=”text/javascript”>

//ここはアクセスごとのmapと画像を決めているところ。

//この場合はランダムで適当に

var xx = Math.floor(Math.random() * 16);

var imagefile = xx + ”.jpg”;

var mapname = xx + ”_map”;

//

var img = document.getElementById(”img_id”);//idから画像タグのオブジェクトを取得。

img.setAttribute(”src”,imagefile); //画像指定

img.setAttribute(”usemap”,mapname); //マップ指定

</script>


注意点としては、記述は、imgタグの後に読まれるのでなければいけません。画像タグのidがscriptにわからないからです。header内に記述する場合は、関数にしてonloadで起動するなどしてください。


なお、mapタグを使わず、onclickイベントと座標を使って指定するやりかたもあります。

id:tech1

すいません。出来れば、、onclickイベントと座標を使って指定するやりかたもありますを教えてくれませんか??

2005/11/14 23:13:14
id:jouno No.2

jouno回答回数280ベストアンサー獲得回数02005/11/15 03:12:07

ポイント25pt

http://www.hatena.ne.jp/1131957290#

人力検索はてな - Javascriptで画像とマップで指定したリンク先をアクセスされたたびに変更したいのですが、どうしたらいいのでしょうか?? マップの数値はこちらで設定する環境でいいです..

function mapA(xx,yy){

var url = ”http://www.google.com/”;

//座標からurlを場合わけするルーチンを書く if(xx<100){url=”http://www.yahoo.co.jp/”;}

return url;

}

function mapB(xx,yy){

//上に同じ。

var url = ”http://www.hatena.ne.jp/”;

if(yy <20){url=”http://www.yahoo.com/”;}

return url;

}

function golink(event){

if(document.all){var event = window.event;} //ie対策

var url;

var xx = event.clientX; //座標を求めている

var yy = event.clientY; //座標を求めている

var i = Math.floor(Math.random() * 16);//ランダムな数字


if(i<10){

url = mapA(xx,yy); // mapAを適用

} else {

url= mapB(xx,yy);

}

location.href=url;

}


----------------

これで関数golink(e)を画像のonclikに関連付けます。しかしこのやりかたはmapAなど、xとyを渡してurlを返すマップ関数を実装しないといけないわけですが、四角とか丸とかは、座標をもとに計算しないといけないので、余計面倒な気がします。なお、座標はウィンドウ全体での座標で画像の中の座標ではありません。

id:tech1

はい。ありがとうございます。

2005/11/15 14:32:22

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません