気合でPNG→SVGにするのが一番早い
いわゆるクリッカブルマップとか言われるもの。
手元にpngしかないときはあきらめてSVGを作ること。
一部分だけホバーやクリックで色変えたりするのは無理。
多角形も書けるので画像を下敷きにしてIllustratorとか下記のvectr(無料で使えるしブラウザのみでも使える)でSVGにする方が恐らく早い。
Vectr - AI-Powered Background Remover & Photo, Logo, and SVG Generators
Transform visuals with Vector AI tools - background remover, photo generator, logo creator, & SVG converter, AI generators & generative AI & bing AI image gener...
vectr.com
結局はレイヤー情報を残したSVGが必要なのでpng→svgコンバータ的な奴だとダメ。
SVG完成後
できたSVGをテキストファイル等で開いてからHTMLにコピペ。
IDは指定できないのでブラウザの開発者モードで1つずつ特定していく。
残念ながら楽する方法はない……
もはやWeb屋さんの世界なので自前でやるとしたらこれくらいまでかと。
それ以上ならもうお金で他人にやってもらった方がいいかと。
うまく探せば10,000円程度で.ai形式での納品も頼めるはず。
参考
結局使わなかったが、pngやjpgを使ったクリッカブルマップや今回のSVGによるクリッカブルマップ風の実装で参考になる記事を紹介。
https://pon-web.info/web/234
pon-web.info
画像上の任意の場所をクリックできる「クリッカブルマップ」の使い方 | HPcode（えいちぴーこーど）
Webサイト上に配置した画像内の任意の場所をクリックできるようにするコーディング方法の紹介です。 「クリッカブルマップ」あるいは「イメージマップ」と呼ばれたりしていて、特別な実装方法ではなくHTMLがあらかじめ用意されている仕組みで対応でき
haniwaman.com
CSSのfilterの使い方 - 画像フィルターで明度・彩度・ぼかしなどを調整
CSSのfilterプロパティを使うと、画像の彩度・明度・コントラストを変更したり、モノクロにしたり、写真にぼかしを加えたりできます。このページではfilterの使い方をサンプルCSS付きで詳しく解説します。
catnose.me
