画像の一部だけにリンクを貼る

自分用のメモ

20年前くらい前によく使っていたIllustratorの機能。
最近はずっーーと使っていなかったので完っ全に忘れていて
調べ直してようやく解決。今後のために記しておく。

【イメージマップを作る】

①イラレで画像制作
ファイル名は英語にしておく。

②「ウインドウ」▶︎「属性」を開く。

③リンクを貼りたいシェイプを選択して「属性」でリンクを設定。
「イメージマップ」▶︎多角形
「URL」▶︎リンク先URL

④「ファイル」▶︎「書き出し」▶︎「web用に保存」
PNG-24の形式を選択。
左下の「プレビュー」をクリック。
＜img〜＞から＜/map＞までコピー。
PNG-24形式で保存。

⑤画像の配置。
コピーしたコードを貼り付ける。
＜img〜＞の指定先をアップロードリンクに変更。

【追記】

リンクと画像がずれる場合
①「jquery.rwdImageMaps.min.js　」ファイルを「public_html」内にアップロード。

②bodyタグの後ろ(/bodyの前)に下記コードを入力。

1. <script src=”jquery.rwdImageMaps.min.js”></script>
2. <script>
3. jQuery(document).ready(function(){
4.   jQuery(‘img[usemap]’).rwdImageMaps();
5. });
6. </script>

※bodyタグは「header.php」内にある。