クリッカブルマップ画像上での座標を表示する


■動作ブラウザ　【 IE:4.0　 NN:-】
Internet Explorer Netscape Navigator DreamPassport iCab
3.0x 4.0x 4.5 5.0x 5.5 6.0 2.0x 3.0x 4.0x 4.x 6.0 2 3 2.x
Windows × ○ - ○ ○ ○ × × × × × - × -
Macintosh × ○ ○ ○ - - × × × × × - - ×
UNIX - - - - - - × × × × × - - -
Dreamcast - - - - - - - - - - × × -

ポイント <map name="myMap" onMousemove="check(event.offsetX,event.offsetY)">
説　　明 クリッカブルマップ上の座標を取得するにはmapタグにonMousemoveイベントでマウスが移動したら座標を取得するようにします。クリッカブルマップ上の座標はevent.offsetX、event.offsetYで取得することができます。
サンプル <html> <head> <title>クリッカブルマップ画像上での座標を表示する</title> <script language="JavaScript"><!-- function check(mx,my) { document.myFORM.Result.value = mx+","+my; } // --></script> </head> <body> <img src="1.gif" name="map1" usemap="#myMap"> <map name="myMap" onMousemove="check(event.offsetX,event.offsetY)"> <area shape="rect" coords="0,0,153,109"> </map> <form name="myFORM"> x,y:<input type="text" name="Result"> </form> </body> </html>
補足説明 iCab 2.xではクリッカブルマップ画像上の座標ではなくページ上の座標を返します。

■サンプルスクリプトを実行する　>>実行
 ■各ブラウザでの動作結果を見る　>>View!
写真素材 PIXTA