マウスをホバーすると色が変わる地図（クリッカブルマップ）の簡単な作り方

日本地図などでよく使われる特定のエリアにマウスカーソルを合わせると色が変わったり、リンクを設定できるクリッカブルマップ。

こんなやつです。（PC推奨）

頻繁に使うことはないと思いますが、複雑な形状のリンクを設置できるので、覚えるとサイト制作の幅が広がります。

画像を使用したクリッカブルマップの場合だと、area要素を指定したりhover時にJSで画像を切り替えたりと、実装に手間がかかります。

これがSVGを使用すると比較的簡単に実装できました。

流れとしては、

1. イラストレーターで使用するマップを作成
2. 作成したマップをSVGで書き出し
3. SVGをテキストエディタで開き、任意のHTMLファイルの使用したい箇所にコピペ
4. aタグやCSSでリンクの設定や装飾を整えれば完成。

です。

イラストレーターと簡単なHTML,CSSが分かれば実装できます。

以下の記事が、図解付きで分かりやすく説明されているので、ぜひ参考にしてみてください。

ってかこれ、クリッカブルマップって名前だったんですね。

全く知らない時「マウスホバーすると色が変わる地図」とかで調べてました。

未経験で入社して右も左もわからない時に最初に作ったのがコレで、どう作ればいいのか、誰にも聞けず納期に追われながら必死で作った覚えがあります。

参考サイト