リンクホバーはユーザーがリンクにカーソルを当てたときに色を変えたりして、このリンクを選択していますよと教えるためのものです。普通のWEBサイトでは必要ないかも知れませんが、多くのリンクを一ページに掲載しているサイトなんかではリンクホバーをちゃんと設定すれば、とても使い勝手が良くなります。


DesignWorks


今日はそんなリンクホバーに遊び心を加えてくれるJavaScriptライブラリ「Scrollovers」を紹介します。

詳しくは以下

こちらのライブラリは簡単にリンクホバーに上記のリンクの様にクルリと回転するようなアクションを加えてくれます。

使用方法は簡単で、まず「Scrollovers - A New Way of Linking」から「scrollovers.js」をダウンロードして、適当な場所にアップロードします。後はHTML上でこのスクリプトを指定して、スクロールリンクホバーに設定したい場所を以下のように指定します。

<a href="http://designwork-s.com/" class="scrollover" type="scrollover">DesignWorks</a>

またCSSを指定すれば、リンクホバーの色も変える事ができます。サンプルソースを下記に示しておきますので参考にしてください。

<style>
a.scrollover {
/* Default Colour/Styles here */
color: #557AFF;
}
a.scrollover em:first-line {
/* Rollover Colour/Styles here */
color: #FF5B3C;
}
</style>

こういった少しの遊び心で随分と印象が変わってくるものです。なんとなく今のリンクホバーに納得がいかない、またはもっと面白くしたいと思っている方は試してみてください。

Scrollovers - A New Way of Linking

関連記事

---

300種類以上の辞書サイトを横断検索できる「Weblio」
人力検索系を横断検索できる「横断検索ドットコム」
世界のコカコーラ製品を一同にそろえた「The Coca-Cola Virtual Vender」
あなたのブログをサウンドノベルに変換してくれる「ノベログコンバーター」
アクセスログを共有してネットの人気ランキングがわかる「Pathtraq」
あの製品の、あの映画のフォントがダウンロードできるフォント配布サイト