【javascript、jQuery】1枚の画像に複数のリンクを設定したい!イメージマップの使い方!~レスポンシブ対応~

エンジニア

前回は一枚の画像に複数のリンクを設定する作業までしました。

ですが、現状のままだと画像のサイズをデザインに合わせて変える、画面のサイズが変わって画像のサイズも変わった時に指定した座標がズレて意図していない所にリンクの範囲が指定されている状態です。

なので、今回は画像のサイズが変わってもしっかりと座標も変化するようにしていきます!

前回の内容はこちらから!

はい、ここまでで画像の挿入とリンク位置の設定はできていますね!

次に、レスポンシブ対応させるために使うのが「image-map-resizer」です。

image-map-resizer

image-map-resizerはGithub、npm、CDNそれぞれ利用することができます。

image-map-resizerの読み込み・実行

image-map-resizerのjsを読み込んでいきます。
ここではGitHubからダウンロードしたものを使用しています。
</boby>の直前に書くといいでしょう。

<script type="text/javascript" src="Js/imageMapResizer.min.js"></script>
<script type="text/javascript">
 imageMapResize();
</script>

jQueryで書くときはこんな感じ。

<script type="text/javascript">
 $('map').imageMapResize();
</script>

画面サイズを変更すると、coordsの数値も変化していることがわかりますね。

あれ、終わりましたけど。とっても簡単でしたね!

複雑なリンク設置の際は、使ってみてください!

それではまた。

関連記事

特集記事

コメント

    • 匿名
    • 2021.09.22

    すいません、pcに詳しくないので基本的なことで申し訳ないのですが、教えて頂けないでしょうか。

    imageMapResizer.min.jsをGitHubからダウンロードしました。
    テーマのhtmlのbodyに書くことも出来ました。

    ただ、ダウンロードしたjsファイルはどこに置けばよいのでしょうか?
    wordpressのドメインフォルダの中にpublic_htmlというフォルダがあるのでそこに入れてみたのですが、動作しませんでした。

      • Masanari Noto
      • 2021.09.22

      ご質問ありがとうございます!
      「imageMapResizer.min.js」のファイルは、他のjsファイルがまとめてあるフォルダ、おそらくjsというフォルダがあるかと思うので、同じところに格納して頂ければ大丈夫です。
      また、ワードプレスでのjsファイルの読み込み方は異なるかと思いますので、参考では記事内のように記していますが必要に応じて変更してください。

CAPTCHA


TOP