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>

サンプル

skuare.net

skuare.netではJavaScriptやMovable TypeなどWebサイト構築に関する技術の導入の仕方を紹介しています。他の紹介サイトのように「○○があります！」な形ではなく、どのように自サイトに組み込めるかを解説しています。

続き

Javascriptサンプルページ一覧
skuare.net