最近あんま見なくなったクリッカブルマップをレスポンシブ対応させて欲しいとお願いされたので、備忘録として残します。
<map name="...">~</map>って書く、画像の上にクリック領域を作るものです。
地図なんかだと未だに使えると思う。CSSでわちゃわちゃやるよりも簡単です。
実装方法
まずは画像にクリッカブルマップが設定されていることが前提です。
Dreamweaverとかで簡単に作れます。
そしてjQuery RWD Image Mapsを読み込ませれば、クリッカブルマップがレスポンシブになります。
以下参考ソースです。適宜、HTML内にに記述して下さい。
1 2 3 4 5 6 7 | <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/jquery.rwdImageMaps.min.js"></script> <script> $(function(){ $('img[usemap]').rwdImageMaps(); }); </script> |