人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Javascriptで画像とマップで指定したリンク先をアクセスされたたびに変更したいのですが、どうしたらいいのでしょうか??
マップの数値はこちらで設定する環境でいいです。
1.jpgにはこのマップ指定。
2.jpgにはこのマップ指定とか出来ればいいです。
お願いします。

●質問者: tech1
●カテゴリ:就職・転職 コンピュータ
✍キーワード:.jpg JavaScript アクセス マップ リンク
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● jouno
●25ポイント

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イベントと座標を使って指定するやりかたもあります。

◎質問者からの返答

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


2 ● jouno
●25ポイント

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を返すマップ関数を実装しないといけないわけですが、四角とか丸とかは、座標をもとに計算しないといけないので、余計面倒な気がします。なお、座標はウィンドウ全体での座標で画像の中の座標ではありません。

◎質問者からの返答

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ