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」でリンクを目立たせる

関連記事

• [jQuery]Pagination Plugin
• リンクなどに吹き出し説明を加えるjavascript「Tooltip Plugin」
• リンクチェックできるjavascript「Ajax Broken Link Checker」
• リンク先のサムネイルを表示するjavascript「jLinkLook」
• ファイルサイズをJavaScriptライブラリ「jQuery」で自動表示する「addSizes.js」

• ファイルサイズをJavaScriptライブラリ「jQuery」で自動表示する「addSizes.js」
• JavaScriptライブラリ「jQuery」を使用してフォームを華麗に彩る「jqTransform」
• Webカラーに関するサイト21
• 英字新聞ぽいコラムをJavaScriptライブラリ「jQuery」で作る「Columnizer」
• 心地よく要素を切り替えるJavaScript「jFlip」
• CoverFlowを実現するJavaScript「JS Coverflow」
• 画像を丸く輝かせるJavaScript「sphere.js」
• セクシーなLightBoxを実現するJavaScript「Sexy LightBox」
• JavaScriptライブラリ「jQuery」を使ってカレンダーを作る「jCal.js」
• カバーフローぽい画像ギャラリーJavaScript「ProtoFlow」