divisionLink.js

2008/7/28 - すべてのボックスのリンク先が最後のブロックのリンク先になる不具合を修正しました。

Example

How about this?

「―ブロック全体にリンクを持たせたい。なおかつマウスオーバー効果をつけたい」

<a>タグをdisplay:blockにして、中身の要素を<span>で書いてposition:absolute;で配置するのもひとつの手段。
（※残念ながらアンカータグなどのインライン要素のなかに見出しなどのブロック要素は文法上置けないので<span>を使う）

だけど私はspanなんて使いたくない。絶対配置なんて使いたくない。論理上の構造は守りたい。
そんなあなたのために用意された divisionLink.js です。

How to use?

1. divisionLink.js をダウンロードします。
2. 該当のページにdivisionLink.jsを組み込みます。
   

   <script type="text/javascript" src="divisionLink.js"></script>

3. リンクを持たせたい該当のブロック要素に class "divisionlink" を付加します。
4. マウスオーバーで該当のブロック要素に class "hover" が追加されます。マウスアウトで class "hover" が解除されます。
   クリックするとブロック要素のなかの一番目のアンカータグを読み込みリンク先へ飛ばします。

動作確認ブラウザ: IE6, 7 / Fx 2 / Opera 9.5 / NN 7.1 / Safari 2, 3

enjoy :)

---

back to home