【css】イメージマップをレスポンシブル化する!【js】


スクリーンショット 2014-11-16 20.15.56

先日しこしこ書いていたバンドのホームページです!
そこでメンバー紹介ページを作った際にメンバーの顔をクリックするとjavascriptのinnerHTMLでメンバーの紹介がページ上部に表示されるっていうコードを書いてみたのですが盲点がありました。

そうなんです。
メンバーの顔の位置をイメージマップを使ってareaで指定したので画像が小さくなるとリンクの位置が変わってしまうのです。僕の顔をクリックしたら可愛い2女のプロフィールが。

これはまずいですよね!
ってことでイメージマップをレスポンシブルにしてみました!



ビバ☆GitHub!便利な物が落ちていた!
参考:http://www.onside.com/ | レスポンシブ Web デザインとイメージマップ(クリッカブル・マップ)

こちらのサイトさんを参考にさせていただきました!
なんとstowball/jQuery-rwdImageMapsにそんな悩みを解決してくれるコードが落ちていたのです。こちらのコードをダウンロードし、wordpressのthemeディレクトリ内のjsディレクトリにぶち込めば終わりです。

後は固定ページ内に

<script type="text/javascript" src="jquery.rwdImageMaps.min.jsのパス"></script>
<script type="text/javascript" src="jquery.rwdImageMaps.jsのパス"></script>
<script>
$(document).ready(function(e) {
	$('img[usemap]').rwdImageMaps();
});
</script>

を書けばイメージマップがレスポンシブルになります!
画像が小さくなったときリンクを埋め込んだ座標がそれに対応して動いてくれます!

スクリーンショット 2014-11-16 20.16.15


まとめ
今やタブレットやスマホ等いろんなメディアでホームページを見る事ができるようになりました。

また11inchサイズのネットブックから15inchサイズのノートPCまで画面もいろんなサイズのものが出回っております。

是非これを期にホームページをレスポンシブルにしてみてはいかがでしょうか?


最後まで読んでいただきありがとうございます。もしこの記事を気に入って頂けたようであればシェアをお願い致します。非常に励みになります。


コメントを残す