クリッカブルマップ
１ 画像を下記の様に必要な数だけ準備します。
●通常時の画像
●マウスを載せた時に色を変えたいエリアの部分だけ色を変えた画像を必要数
※上記の例の場合、四角形・円形・多角形の３種類
２ １で準備した画像を右のメニューから
【スタイル】→【独自レイアウト】→【ファイル】
の画面からアップロードします。
アップロード後、アップロードされたファイルをクリックし、画像のURLをメモ帳などにコピー＆ペーストして
メモしておきます。
３ コンテンツ追加で
を追加し、下記のサンプルコードをコピー＆ペーストします
■サンプルコード 青文字がマウス処理を書いた部分です。
<img src="https://u.jimcdn.com/e/o/s11e59cfb3fcdc42c/userlayout/img/sample-map.png" alt="map" usemap="#ImageMap" border="0" id="mapimg" name="mapimg" />
<map id="ImageMap" name="ImageMap">
<area alt="四角形(rect)" coords="20,20,133,133" shape="rect" href="#" onmouseover="changeMapImage1('sample-map-r.png')" onmouseout="changeMapImage1('sample-map.png')" />
<area alt="円形(circle)" coords="225,74,56" shape="circle" href="#" onmouseover="changeMapImage1('sample-map-c.png')" onmouseout="changeMapImage1('sample-map.png')" />
<area alt="多角形(poly)" coords="322,20,322,65,347,133,418,133,437,65" shape="poly" href="#" onmouseover="changeMapImage1('sample-map-p.png')" onmouseout="changeMapImage1('sample-map.png')" />
</map>
| <img src=""> | 通常時の画像ファイルのURL |
■shapeとcoordsの設定
| エリアの形 | shapeに設定する値 | coordsに設定する値 |
| 四角形 | rect | 四角形の左上の座標（x,y）、右下の座標（x,y） |
| 円形 | circle | 円形の中心の座標（x,y）、半径の長さ(r) |
| 多角形 | poly | 多角形の全ての角の座標（x,y） |
４ マウスオン時とマウスが離れた時の画像のファイル名を各エリアに指定していきます
onmouseover="changeMapImage1('sample-map-p.png')" onmouseout="changeMapImage1('sample-map.png')"
を各エリアにコピー＆ペーストして
青文字の部分……マウスが乗った時のファイル名
緑文字の部分……マウスが離れた時のファイル名(通常時のファイル名)
を書きます。
５ 右側の「基本設定」→「ヘッダー編集」で「Webサイト全体」の『<head> の変更』の入力欄に下記を追記
<script type="text/javascript">
//<![CDATA[
<!--
function changeMapImage1(imgurl) {
document.getElementById('mapimg').src = 'https://u.jimcdn.com/e/o/s11e59cfb3fcdc42c/userlayout/img/' +
imgurl;
}
//-->
//]]>
</script>
赤字の部分はアカウント毎に異なりますので、
「スタイル」→「独自レイアウト」→「ファイル」でアップしたファイルのURLから↓の様なURLから
青文字の部分をコピー＆ペーストしなおします
■URLの例
https://u.jimcdn.com/e/o/s11e59cfb3fcdc42c/userlayout/img/sample-map.png
修正が終わったら「保存」をクリックして保存して完成です
〒669-5264 兵庫県朝来市和田山町加都
https://www.nakaji-webatelier.com/