ワードプレスでイメージマップを作る方法

画像を用意する

イメージマップ＝画像の中に複数のリンクを設定したもの

HTML Imagemap Generatorで画像のtagを作成

イメージマップを作るにはXY軸を指定する必要があるけど、めっちゃ大変なのでHTML Imagemap Generatorというサイトでタグを作ってもらう。

左上の長形、円、多角形の好きなのをえらんで、URLを設置したい場所を指定するだけ。

固定ページのテキストに作成したタグを貼り付け

<img src=“noimage.jpg” usemap=“#ImageMap” alt=“” />
<map name=“ImageMap”>
<area shape=“poly” coords=“358,389,360,393,366,264,464,265,480,278,485,302,469,326,455,338,478,397,432,393,408,323,398,396,360,395,360,389,379,355” href=“#” alt=“” />
</map>

上みたいな感じでタグを出力してくれるので固定ページを作成してテキストで貼り付ける。

jQuery RWD Image MapsをGitHubからダウンロード

jQuery RWD Image MapsからjQuery RWD Image Mapsをダウンロード

左上の緑のボタンからZIPファイルでダウンロード可能。

jQuery RWD Image MapsをサーバーのFTPからアップロード

私はさくらサーバーなので、さくらサーバーのファイルマネージャーに入ってmin.jsをアップロード。

アップロードしたのは自分のURL/wp1/wp-content/themes/jin/js/の中。
使ってるテーマがjinだったからここに入れたので人によって変わります。

固定ページにtagを貼り付け

スクリプトを呼び出すタグをイメージマップに設定した固定ページに貼り付けしておしまい。貼り付け場所はbodyの中でイメージマップの下で動いた。

<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=“jquery.rwdImageMaps.min.js”></script>
<script>
$(document).ready(function(e) {
$(‘img[usemap]’).rwdImageMaps();
$(‘area’).on(‘click’, function() {
alert($(this).attr(‘alt’) + ‘ clicked’);
});
});
</script>