[JS]画像内の特定箇所のみをハイライト表示にするスクリプト -ImageHighlighter

テキスト箇所へのマウスホバーに合わせて、画像内の特定箇所のみをハイライト表示にするスクリプトを紹介します。

デモのキャプチャ

ImageHighlighter
デモページ
キャプチャは「Menu Bar」をハイライトしたもの

デフォルト時は、下記のようになります。

デモのキャプチャ

デフォルトの画面

テキストをマウスホバーすると、それに合わせて特定箇所のみハイライトします。

デモのキャプチャ

特定箇所のみハイライト表示

スクリプトの実装

ハイライト用の画像は必要なく、デフォルト時の画像一枚で実装し、ハイライト処理はスクリプトで行います。ハイライトのデザインはボーダーのカラー、サイズ、タイプを設定することができます。

座標はa要素のrelを使用し、下記のような書式になります。

「sx1,sy1,ex2,ey2」は、順に起点(start)のx座標、y座標、終点(end)のx座標、y座標となっています。
座標はスクリプトの「Edit Mode」で簡単に測定できます。

デモのキャプチャ

「Edit Mode」のキャプチャ

sponsors

top of page

©2024 coliss