クリッカブルマップ(イメージマップ)をレスポンシブ対応にする

※ アフィリエイト広告を利用しています

あまり必要な場面はないかもしれませんが、今回必要になったので覚書として。

まずはDreamweaverなどでも座標を簡単に作成することが出来ますが、サイトでも簡単に作成できます。

私が利用しているのはこちらのサイト

他にも同じようなサイトはあるので、ググって使いやすいサイトを利用するのも良いかもしれません。

ではレスポンシブに対応させるには以下のjQueryを利用します。

jQuery RWD Image Maps

使い方はいたって簡単。

まずはjQueryを呼び込んで、上記GitHubよりダウンロードしたjQueryを追加する。

そして以下を追加すればOK!

$(function() {
 $('img[usemap]').rwdImageMaps();
});

レスポンシブ設定はcss等で設定すればOKです。

web制作レスポンシブ
noteをフォローする
note

コメント

タイトルとURLをコピーしました