2007年から2013年までの期間、およそ10,000件のデザインの記事をアップしたブログのアーカイブ。現在はhttp://designwork-s.netで更新中。
2007年08月12日

すぐに使える!リンクホバーに遊び心加える「Scrollovers」

リンクホバーはユーザーがリンクにカーソルを当てたときに色を変えたりして、このリンクを選択していますよと教えるためのものです。普通の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」
あの製品の、あの映画のフォントがダウンロードできるフォント配布サイト
posted by admin at 09:57 | Comment(0) | TrackBack(0) | Web
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック