日本地図などでよく使われる特定のエリアにマウスカーソルを合わせると色が変わったり、リンクを設定できるクリッカブルマップ。
こんなやつです。(PC推奨)
頻繁に使うことはないと思いますが、複雑な形状のリンクを設置できるので、覚えるとサイト制作の幅が広がります。
画像を使用したクリッカブルマップの場合だと、area要素を指定したりhover時にJSで画像を切り替えたりと、実装に手間がかかります。
あわせて読みたい
HTML Imagemap Generator
Imagemap の HTML コードを作成するジェネレーターです。
これがSVGを使用すると比較的簡単に実装できました。
流れとしては、
- イラストレーターで使用するマップを作成
- 作成したマップをSVGで書き出し
- SVGをテキストエディタで開き、任意のHTMLファイルの使用したい箇所にコピペ
- aタグやCSSでリンクの設定や装飾を整えれば完成。
です。
イラストレーターと簡単なHTML,CSSが分かれば実装できます。
以下の記事が、図解付きで分かりやすく説明されているので、ぜひ参考にしてみてください。
めも352


レスポンシブ対応を考えて、クリッカブルマップではなく、イラストレーターの地図をSVGで書きだして、ホバ…
「地図をクリックしたら~」というものを制作したい場合以前はクリッカブルマップを使っていました。それだとスマホ対応が難しいのでイラストレーターからSVGで書きだすの…
sezaki design


脱クリッカブルマップ!hoverやレスポンシブにも対応できるクリッカブルなSVG – Blog – sezaki design
地図や店内図のようなイラスト内に複雑な形状のリンクを貼りたい時ってありますよね。以前はそういった場合は、
ってかこれ、クリッカブルマップって名前だったんですね。
全く知らない時「マウスホバーすると色が変わる地図」とかで調べてました。
未経験で入社して右も左もわからない時に最初に作ったのがコレで、どう作ればいいのか、誰にも聞けず納期に追われながら必死で作った覚えがあります。

同じ経験をしてほしくないので、「クリッカブルマップ」という言葉だけでも覚えて帰ってください。
目次
参考サイト
めも352




レスポンシブ対応を考えて、クリッカブルマップではなく、イラストレーターの地図をSVGで書きだして、ホバ…
「地図をクリックしたら~」というものを制作したい場合以前はクリッカブルマップを使っていました。それだとスマホ対応が難しいのでイラストレーターからSVGで書きだすの…
sezaki design




脱クリッカブルマップ!hoverやレスポンシブにも対応できるクリッカブルなSVG – Blog – sezaki design
地図や店内図のようなイラスト内に複雑な形状のリンクを貼りたい時ってありますよね。以前はそういった場合は、