イメージマップでのマウスオーバーなのですが、
此方で見ても良く解らなかったので質問させて頂きます。
http://nearlyequal.fc2web.com/m.gifの画像を
http://nearlyequal.fc2web.com/m1.gif
の様にイメージマップでマウスオーバーを個々の菱形に設定したいのですが、どの様にすれば良いのでしょうか？
area shapeの中にonmouseoverで指定してみても上手くいきませんでした。。。
タグ初心者の為、詳しく教えていただければ幸いです。
投稿日時 - 2006-02-14 00:04:25
こんな感じで・・・
<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)" の数字がひし形の画像のナンバーに対応します。
.
投稿日時 - 2006-02-15 09:53:50
0人が「このQ&Aが役に立った」と投票しています
ベストアンサー以外の回答（1件中 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です。
スタイルシートで色々と指定している部分以外を参考にして下さい。
投稿日時 - 2006-02-14 08:56:18
