-PR-
解決済み

イメージマップでのマウスオーバー

  • すぐに回答を!
  • 質問No.1964407
  • 閲覧数2287
  • ありがとう数1
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 62% (35/56)

イメージマップでのマウスオーバーなのですが、
此方で見ても良く解らなかったので質問させて頂きます。
http://nearlyequal.fc2web.com/m.gifの画像を
http://nearlyequal.fc2web.com/m1.gif
の様にイメージマップでマウスオーバーを個々の菱形に設定したいのですが、どの様にすれば良いのでしょうか?
area shapeの中にonmouseoverで指定してみても上手くいきませんでした。。。
タグ初心者の為、詳しく教えていただければ幸いです。
通報する
  • 回答数2
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

質問者が選んだベストアンサー

  • 回答No.2
レベル10

ベストアンサー率 73% (58/79)

こんな感じで・・・


<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件)

  • 回答No.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です。
スタイルシートで色々と指定している部分以外を参考にして下さい。


このQ&Aで解決しましたか?
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-

特集


抽選で合計100名様にプレゼント!

ピックアップ

ページ先頭へ