JavaScript

areaタグをレスポンシブ対応させる方法

スポンサードリンク
スポンサードリンク

画像内にイメージマップをつくってリンクをつけることができるareaタグですが、
アクションを起こせる範囲を指定するため、レスポンシブ対応させるとなると手間がかかります。

areaタグをレスポンシブ対応させる方法

結論

・javascriptライブラリ「jQuery-rwdImageMaps」で対応可能

CDNから読み込み、もしくはダウンロードしてきてライブラリを読み込ませます。

ジェネレーターでイメージマップを作成後、タグに使うimgに usemap="#image-map"を書いてrwdImageMaps(); を実行させます。

イメージマップジェネレーター

Free Online Image Map Generator

GitHub URL

GitHub - stowball/jQuery-rwdImageMaps: Responsive Image Maps jQuery Plugin

CDN

jQuery-rwdImageMaps - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers



//ライブラリ読み込み
<script type="text/javascript" src="js/jquery.rwdImageMaps.min.js"></script>
      

//areaタグのレスポンシブ用
$('img[usemap]').rwdImageMaps();

WordPress運営が楽になるおすすめのサーバーをご紹介

WordPressおすすめのサーバー

スポンサードリンク

-JavaScript
-

© 2021 さくらいらぼWEB版 /個人ブログ