要素をハイライト表示にして目立たせる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, //ハイライト時にテキストを出すか
});

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

サンプル

右上をクリックしてください。

デモ1 デモ2 close

1をクリックすると、ここがハイライトする

2をクリックすると、ここがハイライトする

Javascriptサンプルページ一覧

skuare.net