skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

要素をハイライト表示にして目立たせるJavaScript「jQuery Highlighter」

｜ ｜ ｜ ｜ ｜ ｜ ｜

本当は見てもらいたいのにヒートマップなど解析ツールで分析すると見られていない、クリックされていないことはありませんか。
jQueryプラグインのjQuery Highlighterを使用すると要素をハイライト表示させられるので、有効な解決策となりそうです。

使用方法
jQuery Highlighterからファイルをダウンロードします。
<link type="text/css" rel="stylesheet" href="jquery.highlighter.css" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.highlighter.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".class名").jhighlight();
});
</script>

次にハイライト表示させたいものを記述します。
<div id="id名">なんか書きます。</div>

あとはコントロール部分を書けば完成です。
<div id="control">
<a href="javascript:void(0);" title="id名" class="class名" rel="<h1>ハイライト時に出るhtmlです</h1>">デモ1</a>
<a href="#" id='close'>close</a>
</div>

また、オプションには以下のようにものがあります。
$(".class名").jhighlight( {
screencolor : 'black', //スクリーンカラー
screenopacity : '0.8', //透明度
overlaycolor: "white", //ハイライトのカラー
boxshadow : '0px 0px 30px white', //ハイライトの影
autoload: true, //デフォルトで出すかどうか
autoloadobject : "id名", //デフォルトで出すid名
animationspeed : 500, //ハイライトスピード
description: true, //ハイライト時にテキストを出すか
});

フォームのヒントなどに使用するとコンバージョン向上につながるかもしれません。

要素をハイライト表示にして目立たせるJavaScript「jQuery Highlighter」サンプル

記事作成：2009年10月14日

前の記事：jQueryでフォームにヒントを表示させておくJavaScript「jQuery Form Notifier」
次の記事：jQueryで複数ユーザーのtwitterタイムラインを表示する「A jQuery Twitter Ticker」