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

2011-03-31 JavaScript

TAGJavaScript jQuery プラグインリンク

最終更新日：2011-04-06

ボックス単位の大きなdiv要素をリンクにする便利なJavaScriptです。

1 プラグインのダウンロード
2 Javascript記述方法
3 HTML記述方法
4 CSS記述方法
5 参考サイト

プラグインのダウンロード

jquery.biggerlink.js
http://www.ollicle.com/projects/jquery/biggerlink/

jquery.js
http://jquery.com/

をダウンロードします。

Javascript記述方法

<script type="text/javascript"src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.biggerlink.js"></script>
<script type="text/javascript">
$(function(){
$('#id名(クラス名) div').biggerlink();
});
</script>

HTML記述方法

上記のID名またはクラス名をdivに書き込む。

<div id="id名">
    <div>
        <a href="リンク先URI">リンクテキスト</a>
        <p>コンテンツ</p>
     </div>
</div>

CSS記述方法

リンクは以下のようなCSSで指定します。

.hover {
	border-color: #333333;
	cursor: pointer;
	background-color: #ffffff;
	}
.hover a:link {
	color: #CC3333;
	}
.hover a:visited {
	color: #CC3333;
	}