<map>と<area>を使ってhrefでリンクを張ったのですが機能しません。

Question

画像のあるエリアをクリックするとリンクに飛ぶようにしたくて<area>で、href="#risa"という風にハイパーレフを入力したのですが、リンクに飛びません。。。

ーーーーーーーーーーーーーーー

<div class="moji1"> <area shape="rect" name="tv" coords="290,190,445,304" href="#risa" /> <div> <h3>テレビ</h3> <p>ブラウン管・液晶</p> </div> </div> ーーーーーーーーーーーーーーー

原因と思われるのが、javascriptでオンマウスすると青い線でエリアを囲う仕様です。

ーーーーーーーーーーーーーーーー

<script type="text/javascript"> $(document).ready(function () { var image = $('img'); image.mapster( { fillOpacity: 0.4, fillColor: "ffffff", strokeColor: "3320FF", strokeOpacity: 0.8, strokeWidth: 2, stroke: true, }); }); </script>

ーーーーーーーーーーーーーーーー

命令が混雑してしまっているのでしょうか？
それとも入力の仕方が違うのでしょうか。。。？

オンマウスすると青い線で囲うjavascriptの仕様と、
クリックするとリンク先の#risaに飛ぶ<map>のhrefの仕様をどっちもやりたいのですが、どうすれば両方できるのでしょうか？

http://www.studio-swag.com/pricequestion/price.html

こちらが実際のページです。
今はテレビにしかリンク(href=#risa)を貼っていません。

スミマセンがアドバイスを宜しくお願いします。

Answer 1

公式ドキュメントを見たところ、clickNavigateをtrueにすればできるっぽいです。

image.mapster({
    clickNavigate: true,    // コレ
    fillOpacity: 0.4,
    fillColor: "ffffff",
    strokeColor: "3320FF",
    strokeOpacity: 0.8,
    strokeWidth: 2,
    stroke: true,
});

ただし、hrefをしっかり指定する必要があるようです。
例えば、テレビに指定してあるhref="#risa"は飛びましたが、href="#"だと無効(飛ばない)になるようでした。

Comments

[MikaelMinowa]

回答ありがとうございます！
出来ました！
JavaScriptの勉強不足ですね・・・。

ありがとうございます。