画像の一部をマウスオン/クリックして色を変えるとかするにはSVGじゃないと無理

スポンサーリンク
スポンサーリンク

気合でPNG→SVGにするのが一番早い

いわゆるクリッカブルマップとか言われるもの。
手元にpngしかないときはあきらめてSVGを作ること。

一部分だけホバーやクリックで色変えたりするのは無理。
多角形も書けるので画像を下敷きにしてIllustratorとか下記のvectr(無料で使えるしブラウザのみでも使える)でSVGにする方が恐らく早い。

Vectr - Free Online Vector Graphics Editor
Free vector graphics editor. A simple yet powerful web and desktop cross-platform tool for everyone.

結局はレイヤー情報を残したSVGが必要なのでpng→svgコンバータ的な奴だとダメ。

SVG完成後

できたSVGをテキストファイル等で開いてからHTMLにコピペ。
IDは指定できないのでブラウザの開発者モードで1つずつ特定していく。

残念ながら楽する方法はない……

もはやWeb屋さんの世界なので自前でやるとしたらこれくらいまでかと。
それ以上ならもうお金で他人にやってもらった方がいいかと。
うまく探せば10,000円程度で.ai形式での納品も頼めるはず。

参考

結局使わなかったが、pngやjpgを使ったクリッカブルマップや今回のSVGによるクリッカブルマップ風の実装で参考になる記事を紹介。

SVG画像:画像の一部をクリック可能にする | ぽんちゃ。
画像の一部をクリックやホバー出来るようにする、クリッカブルマップの作り方です。svg編とpng編の2パターン試してみました。今回はsvg編です。
画像上の任意の場所をクリックできる「クリッカブルマップ」の使い方 | HPcode(えいちぴーこーど)
Webサイト上に配置した画像内の任意の場所をクリックできるようにするコーディング方法の紹介です。 「クリッカブルマップ」あるいは「イメージマップ」と呼ばれたりしていて、特別な実装方法ではなくHTMLがあらかじめ用意されている仕組みで対応でき
CSSのfilterの使い方 - 画像フィルターで明度・彩度・ぼかしなどを調整
CSSのfilterプロパティを使うと、画像の彩度・明度・コントラストを変更したり、モノクロにしたり、写真にぼかしを加えたりできます。このページではfilterの使い方をサンプルCSS付きで詳しく解説します。
タイトルとURLをコピーしました