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

このエントリーを含むはてなブックマーク はてなブックマークを見るこの記事をクリップ! コメントを見るYahoo!ブックマークに登録 このエントリーをdel.icio.usに追加する deliciousブックマーク数このページを行き先登録 このページをniftyクリップに登録このページをBuzzurlに登録

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

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

関連記事

コメント投稿











div要素もリンクにするjavascript「jquery.biggerlink」に関するコメントはまだありません。
ご遠慮なくコメントしてください。

この記事へのトラックバック:

過去の記事

rss

ページトップに戻る