- ベストアンサー
イメージマップでのマウスオーバー
イメージマップでのマウスオーバーなのですが、 此方で見ても良く解らなかったので質問させて頂きます。 http://nearlyequal.fc2web.com/m.gifの画像を http://nearlyequal.fc2web.com/m1.gif の様にイメージマップでマウスオーバーを個々の菱形に設定したいのですが、どの様にすれば良いのでしょうか？ area shapeの中にonmouseoverで指定してみても上手くいきませんでした。。。 タグ初心者の為、詳しく教えていただければ幸いです。
- xxx_869_xxx
- お礼率62% (35/56)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんな感じで・・・ <script> function over(num){ img1.src="http://nearlyequal.fc2web.com/m"+num+".gif" } function out(){ img1.src="http://nearlyequal.fc2web.com/m.gif" } </script> <body> <img id="img1" src="http://nearlyequal.fc2web.com/m.gif" usemap="#hisigata" border="0"> <map name ="hisigata"> <area shape="poly" coords="37,58,64,76,90,58,64,41" href="#" onmouseover="over(1)" onmouseout="out()"> </map> </body> 各ひし形が赤くなっている画像をひし形の数だけ作り、m1,m2,m3・・・と名前を付けます。 onmouseover="over(1)" の数字がひし形の画像のナンバーに対応します。 .
その他の回答 (1)
<?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml;charset=Shift_JIS"/> <title>Test</title> <link rel="stylesheet" type="text/css" href="../css/mystyle.css"/> <script type="text/javascript" src="../script/mylibrary.js"></script> </head> <body> <!------------> <!-- 見出し --> <!------------> <div id="page_header"> <img class="map" src="m.gif" usemap="#navi" hspace="0" width="150" height="134"> <map name ="navi" id="navi"> <area href="../xxxx.htm" alt="xxxxx" shape="poly" coords="98,21,123,4,148,21,123,38,98,21"> </map> </div> </body> </html> これで、一番右上が菱形にリンクします。 左角の座標=98,21 中上の座標=123,4 右端の座標=148,21 中下の座標=98,21 後は、それぞれの左角を求めれば、同じ要領でOKです。 スタイルシートで色々と指定している部分以外を参考にして下さい。
