div要素もまとめてリンクにするjavascript「Link Boxes」

aタグを付与すると色が変わりアンダーラインが表示され、リンクさます。
しかし、もっと大きなdivなど全体をリンクにしたい時もあるでしょう。
Link Boxesではjavascriptでの解決策を示しています。

使用方法
Link Boxesで使用しているjavascriptをちょっと変更したLinkBox.jsをダウンロードしてください。
＊li要素をdiv要素に変更しただけです。
<script src="http://yourdomain/LinkBox.js" type="text/javascript"></script>
<style type="text/css">
.linkbox {border:1px solid #888;background:#f9f9f9;padding:10px;width:500px;margin-bottom:1em;}
.hovering {background:#ccc;border-color: #ccc;cursor:pointer;} //マウスオーバー時のCSS
</style>
上記を記述したら、リンクにしたいdiv要素にclassとしてlinkboxを付与してください。
またリンク先は以下のように書きます。
＊javascriptがoffの時にもリンク先は表示されます。
<div class="linkbox">
　コンテンツ
　<p class="fullstory"><a href="リンク先URI">続き</a></p>
</div>
div要素もまとめてリンクにするjavascript「Link Boxes」サンプル

2008年01月07日

前の記事：javascriptライブラリ「mootools」でtextareaの文字数を制限する
次の記事：MacのDockライクなメニューを手軽に作成するjavascript「Fisheye Menu」

関連記事

• [jQuery]Pagination Plugin
• cookieで閲覧経路を特定するjavascript「CookieCrumbs」
• javascriptライブラリ「mootools」でリンクを目立たせる
• リンクにサムネイルを表示できるjavascript「Link Thumbnail」
• リンクなどに吹き出し説明を加えるjavascript「Tooltip Plugin」

• jQueryでLightBoxを実現するjavascript「jQuery Lightbox Plugin (balupton edition)」
• ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
• BOMBERMAN JAVASCRIPT GAME by mootools.js
• 3ステップで表をソート＆値を検索できるjavascript「dataTables」
• Movable Type 4.2にバージョンアップ
• ページの目次を自動で作成するjavascript「jqTOC」
• JavaScriptライブラリ「raphael」で図を描く
• ニューデザイン
• Widgetboxで手軽にRSS型ウィジェット（ガジェット）を作る
• 奥から手前にズームするJavaScript「Spacegallery.js」