dポイントプレゼントキャンペーン実施中！

イメージマップのhoverについて

解決済

  • 質問者：hhiroki_77
  • 質問日時：
  • 回答数：4件

イメージマップのhoverで困っています。

以下のようなJavaとHTMLで実装しているのですが、メニューhoge2　は問題なくhoverできるのですが、
イメージマップを使ったメニューhoge1がうまくいきません。

IEだとhoverするのですが、chromeではhoverしません。


【Javaスクリプト】
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>


【HTML】
<ul>
<!-- メニュー hoge1 -->
<li><img src="hoge.jpg" border="0" alt="hoge1" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menu1','','hoge_hover.jpg',1)" name="menu1" usemap="#prdlink" />
<map name="prdlink">
<area shape="rect" coords="20,40,75,80" href="./product/hoge1.html" alt="hoge1" />
<area shape="rect" coords="80,40,134,80" href="./product/hoge2.html" alt="hoge2" />
</map>
</li>

<!-- メニュー hoge2 -->
<li><a href="top.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menu2','','top_hover.jpg',1)">
<img src="top_off.jpg" alt="top" name="menu2" /></a> </li>

</ul>


なにぶん、前任者のソースを見よう見まねで修正しており、知識もないためご教示いただければと思っております。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

No.3で示した方法は


スプライトといわれる手法です。
　○　使用する画像を最初にすべて読み込んでしまうため、アクションのたびに画像を取得する必要がないため、動作が速い
　×　画像の座標をいちいち指定しなければならないので作業が煩雑
という特徴があります。

アクションのたびに背景画像を変える方法は
　○　アクションの都度画像を読み込むためタイムラグがあります。
　×　スタイルシートがとても簡単になります。

　そのため、その中間的手法として、リンク画像のみスプライトにして背景と切り離す手法を使うほうが現実的でしょう。スプライトの一種です。リンクの位置を位置を自在に設定できます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"＿"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css" media="screen">
<!--
/* 基本 */
html,body{margin:0;padding:0;background-color:silver;}
h1,h2,h3,p{margin:0 15px;line-height:1.8em;}
div.header,div.section,div.footer{
＿width:80%;min-width:640px;max-width:800px;
＿margin:0 auto;
＿background-color:white;
}
div.section{position:relative;min-height:400px;}
div.section div.aside{position:absolute;top:0;right:0;width:200px;height:100%;background-color:aqua;}
div.section h2,div.section p{margin-right:210px;}
div.section div.aside p{margin:0 1em;}
/* ここから:hover,activeの指定 */
ul#navi,ul#navi2{
＿background-image:url(./images/hogehoge2.jpg);
＿width:270px;height:160px;/* サイズの指定 */
＿margin:5px auto;/* センター配置 */
＿padding:0;
＿display:block;list-style:none;/* ブロックに変更 */
＿position:relative;/* 以下の位置基準とするため */
}
ul#navi li a,ul#navi2 li a{
＿display:block;/* ブロックに変更 */
＿width:70px;height:30px;/* 幅と高さの初期設定 */
＿overflow:hidden;text-indent:-10em; /* 字を消す */
＿position:absolute; /* 絶対配置 */
＿top:20px;/* 上からの初期位置 */
}
ul#navi li a[href="./top.html"]{background-image:url(./images/goTop.gif);}
ul#navi li a[href="./product/hoge1.html"]{background-image:url(./images/goProduct1.gif);}
ul#navi li a[href="./product/hoge2.html"]{background-image:url(./images/goProduct2.gif);}
ul#navi li a[href="./product/hoge3.html"]{background-image:url(./images/goProduct3.gif);}
ul#navi li a[href="./product/hoge4.html"]{background-image:url(./images/goProduct4.gif);}

ul#navi li a[href="./top.html"]{top:110px;left:110px;width:57px;}
ul#navi li a[href="./product/hoge1.html"]{left:10px;}
ul#navi li a[href="./product/hoge2.html"]{left:70px;top:60px}
ul#navi li a[href="./product/hoge3.html"]{left:130px;}
ul#navi li a[href="./product/hoge4.html"]{left:190px;top:60px}

ul#navi li a:hover{background-position:0px -40px;}
ul#navi li a:active{background-position:0px -80px;}
/* 後方互換 */
ul#navi2 li.goTop a{background-image:url(./images/goTop.gif);}
ul#navi2 li.goProduct1 a{background-image:url(./images/goProduct1.gif);}
ul#navi2 li.goProduct2 a{background-image:url(./images/goProduct2.gif);}
ul#navi2 li.goProduct3 a{background-image:url(./images/goProduct3.gif);}
ul#navi2 li.goProduct4 a{background-image:url(./images/goProduct4.gif);}

ul#navi2 li.goTop a{top:110px;left:110px;width:57px;}
ul#navi2 li.goProduct1 a{left:10px;}
ul#navi2 li.goProduct2 a{left:70px;top:60px}
ul#navi2 li.goProduct3 a{left:130px;}
ul#navi2 li.goProduct4 a{left:190px;top:60px}

ul#navi2 li a:hover{background-position:0px -40px;}
ul#navi2 li a:active{background-position:0px -80px;}

-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<ul id="navi">
＿＿＿<li><a href="./top.html">トップ</a></li>
＿＿＿<li><a href="./product/hoge1.html">製品1</a></li>
＿＿＿<li><a href="./product/hoge2.html">製品2</a></li>
＿＿＿<li><a href="./product/hoge3.html">製品3</a></li>
＿＿＿<li><a href="./product/hoge4.html">製品4</a></li>
＿＿</ul>
＿＿<ul id="navi2">
＿＿＿<li class="goTop"><a href="./top.html">トップ</a></li>
＿＿＿<li class="goProduct1"><a href="./product/hoge1.html">製品1</a></li>
＿＿＿<li class="goProduct2"><a href="./product/hoge2.html">製品2</a></li>
＿＿＿<li class="goProduct3"><a href="./product/hoge3.html">製品3</a></li>
＿＿＿<li class="goProduct4"><a href="./product/hoge4.html">製品4</a></li>
＿＿</ul>

＿</div>
＿<div class="section">
＿＿以下同文
＿</div>
</body>
</html>
「イメージマップのhoverについて」の回答画像4
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： ORUKA1951
  • 回答日時：

　簡単なサンプル上げておきます。

:visitedで画像を変更することは最近のブラウザはセキュリティの問題でできなくなっていますので指定していません。
★手持ちの640px～800pxまでのリキッドデザインのテンプレートに追加しました。
★/* ここから:hover,activeの指定 */以降が:hover,:activeの指定です。
★画像は、添付のものを利用しました。実際には
　■■　　　■
　■よりは ■
　　　　　　　■に縦に並べるほうが計算は楽です。
　添付図をキャプチャーして、540px幅に拡大してテストすること
★背景画像とA要素の画像を分けると、遥かに簡単になります。ここではあえてオリジナルの画像の使い方(imagemap)を生かす形にしてあります。
★印刷用のスタイルシートは用意してありませんから、印刷時には素の状態です。

★HTML4.01strictです。
　⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# )
　のDATA入力でチェック済み
★タブは＿に置換してあるので戻すこと。
★参考にしたページ(別記)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"＿"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css" media="screen">
<!--
/* 基本 */
html,body{margin:0;padding:0;background-color:silver;}
h1,h2,h3,p{margin:0 15px;line-height:1.8em;}
div.header,div.section,div.footer{
＿width:80%;min-width:640px;max-width:800px;
＿margin:0 auto;
＿background-color:white;
}
div.section{position:relative;min-height:400px;}
div.section div.aside{position:absolute;top:0;right:0;width:200px;height:100%;background-color:aqua;}
div.section h2,div.section p{margin-right:210px;}
div.section div.aside p{margin:0 1em;}
/* ここから:hover,activeの指定 */
ul#navi{
＿background-image:url(./images/hogehoge.jpg);
＿width:270px;height:160px;/* サイズの指定 */
＿margin:auto;/* センター配置 */
＿padding:0;
＿display:block;list-style:none;/* ブロックに変更 */
＿position:relative;/* 以下の位置基準とするため */
}
ul#navi li a{
＿display:block;/* ブロックに変更 */
＿width:55px;height:40px;/* 幅と高さの初期設定 */
＿overflow:hidden;text-indent:-10em; /* 字を消す */
＿position:absolute; /* 絶対配置 */
＿top:40px;/* 上からの初期位置 */
＿background-image:url(./images/hogehoge.jpg);
}
ul#navi li a[href="./top.html"]{top:110px;left:110px;width:57px;background-position:-110px -110px;}
ul#navi li a[href="./product/hoge1.html"]{ left:20px; background-position: -20px -40px;}
ul#navi li a[href="./product/hoge2.html"]{left:80px; background-position: -80px -40px;}
ul#navi li a[href="./product/hoge3.html"]{left:135px; background-position:-135px -40px;}
ul#navi li a[href="./product/hoge4.html"]{left:195px; background-position:-195px -40px;}

ul#navi li a[href="./top.html"]:hover {background-position:-110px -291px;}
ul#navi li a[href="./product/hoge1.html"]:hover {background-position: -20px -220px;}
ul#navi li a[href="./product/hoge2.html"]:hover {background-position: -80px -220px;}
ul#navi li a[href="./product/hoge3.html"]:hover {background-position:-135px -220px;}
ul#navi li a[href="./product/hoge4.html"]:hover {background-position:-195px -220px;}

ul#navi li a[href="./top.html"]:active {background-position:-378px -291px;}
ul#navi li a[href="./product/hoge1.html"]:active {background-position:-289px -220px;}
ul#navi li a[href="./product/hoge2.html"]:active {background-position:-349px -220px;}
ul#navi li a[href="./product/hoge3.html"]:active {background-position:-404px -220px;}
ul#navi li a[href="./product/hoge4.html"]:active {background-position:-464px -220px;}
-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<ul id="navi">
＿＿＿<li><a href="./top.html">トップ</a></li>
＿＿＿<li><a href="./product/hoge1.html">製品1</a></li>
＿＿＿<li><a href="./product/hoge2.html">製品2</a></li>
＿＿＿<li><a href="./product/hoge3.html">製品3</a></li>
＿＿＿<li><a href="./product/hoge4.html">製品4</a></li>
＿＿</ul>
＿</div>
＿<div class="section">
＿＿<h2>本文見出し</h2>
＿＿<p>ここから本文です。</p>
＿＿<div class="aside">
＿＿＿<h3>補足記事</h3>
＿＿＿<p>記事</p>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2012-08-10</dd>
＿＿</dl>
＿＿<address>&copy; ORUKA1951＿2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>

参考URL：http://www.ichiya.com/WebService/Howto/sample/HT …
「イメージマップのhoverについて」の回答画像3
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
なんとなくできそうな感じです。
頑張ります。

通報する
お礼日時：2013/04/14 14:03

No.2

  • 回答者： ORUKA1951
  • 回答日時：

top_off.jpgとtop_hover.jpgは？


これはどこに表示すのですか？

この回答への補足

説明が少なく申し訳ありません。

幅が同じの四角い画像が上下に二つ並んでいて、

上の画像：hoge.jpg(hover時：hoge_hover.jpg)
　　　　　サイズは幅270px・高さ90px　　
　　　　　　→イメージマップで実装しようとしてました。
下の画像：top_off.jpg(hover時：top_hover.jpg)
　　　　　サイズは幅270px・高さ48px　　
　　　　　　→リンク

です。

お手数おかけします。

補足日時：2013/04/11 13:15
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： ORUKA1951
  • 回答日時：

イメージマップでrectしかないのでしたら、シンプルにCSSだけで行うほうが良いですが？？


遥かに簡単です。
HTMLは
<ul id="navi">
　　<li><a href="./product/hoge1.html"></a></li>
　　<li><a href="./product/hoge2.html"></a></li>
　　<li><a href="top.html"></a> </li>
</ul>
だとして・・・、
それぞれの画像のサイズを教えてください。

この回答への補足

早速の回答ありがとうございます。

画像(hoge.jpg)のサイズは幅270px・高さ90pxです。
その画像の中でエリアを４箇所指定しております。

<area shape="rect" coords="20,40,75,80" href="./product/hoge1.html" />
<area shape="rect" coords="80,40,134,80" href="./product/hoge2.html" />
<area shape="rect" coords="135,40,194,80" href="./product/hoge3.html" />
<area shape="rect" coords="195,40,250,80" href="./product/hoge4.html" />

お手数ですが、よろしくお願いします。

補足日時：2013/04/11 12:06
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報