レスポンシブ、イメージマップの備忘録です。

スポンサードリンク

レスポンシブでのイメージマップの作製方法の備忘録です。

まずはイメージマップを表示させたい場所に記載

<img src=”画像” width=”640″ height=”640″ usemap=”#Map” class=”img-responsive center-block”>
<map name=”Map”>
<area shape=”rect” coords=”座標” href=”リンク”>
<area shape=”rect” coords=”350,334,481,369″ href=””>
<area shape=”rect” coords=”382,425,587,463″ href=””>
<area shape=”rect” coords=”159,484,303,545″ href=””>
</map>

最後に

<script src=”../js/jquery-1.11.3.min.js”></script>
<script type=”text/javascript” src=”../js/jquery.rwdImageMaps.min.js”></script>
<script>
$(document).ready(function(e) {
$(‘img[usemap]’).rwdImageMaps();
});
</script>

jqueryとjqueryのイメージマップのファイルは別途アップしてリンクします。
最後のはおそらくusemapを紐付けしているのかな?

以上、レスポンシブでのイメージマップの備忘録でした。

 

スポンサードリンク

カテゴリー: プログラミング, ホームページ作成 パーマリンク