[JS]画像内の特定箇所のみをハイライト表示にするスクリプト -ImageHighlighter
Post on:2010年7月5日
sponsors
テキスト箇所へのマウスホバーに合わせて、画像内の特定箇所のみをハイライト表示にするスクリプトを紹介します。
ImageHighlighter
デモページ
キャプチャは「Menu Bar」をハイライトしたもの
デフォルト時は、下記のようになります。
デフォルトの画面
テキストをマウスホバーすると、それに合わせて特定箇所のみハイライトします。
特定箇所のみハイライト表示
スクリプトの実装
ハイライト用の画像は必要なく、デフォルト時の画像一枚で実装し、ハイライト処理はスクリプトで行います。ハイライトのデザインはボーダーのカラー、サイズ、タイプを設定することができます。
座標はa要素のrelを使用し、下記のような書式になります。
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> <a rel="sx1,sy1,ex2,ey2">Item #1</a> </textarea> |
「sx1,sy1,ex2,ey2」は、順に起点（start）のx座標、y座標、終点（end）のx座標、y座標となっています。
座標はスクリプトの「Edit Mode」で簡単に測定できます。
「Edit Mode」のキャプチャ
sponsors
