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

div要素もリンクにするjavascript「jquery.biggerlink」

｜ ｜ ｜ ｜ ｜ ｜ ｜

リンクと言えばaタグですが、ボックス単位の大きなdiv要素もリンクにしたくなります。
jquery.biggerlinkはそんな我が儘を叶えてくれるjavasrciptです。

使用方法
jquery.biggerlinkからjquery.biggerlink.jsを、jQueryからjquery.js（v1.2.1）をダウンロードします。
<script src="http://yourdomain/jquery.js" type="text/javascript"></script>
<script src="http://yourdomain/jquery.biggerlink.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#id名 div').biggerlink();
});
</script>
あとはid名でくくった要素の中にdivを書き込めば完成です。
<div id="id名">
<div>
<a href="リンク先URI">リンクテキスト</a>
<p>コンテンツ</p>
</div>
</div>
なおリンクは以下のようなCSSで指定します。
.hover {
border-color: #aaf;
cursor: pointer;
background-color: #cdF;
}
.hover a:link {
color: #CC3333;
}
.hover a:visited {
color: #CC3333;
}
div要素もリンクにするjavascript「jquery.biggerlink」サンプル

記事作成：2008年02月03日

前の記事：フォームの入力補助javascript「Autosuggest / Autocomplete with Ajax」
次の記事：javascriptライブラリ「mootools」でリンクを目立たせる