« 入力した値をチェックするJavaScript | トップページ | スクリプトで制御するタイポグラフィックス »

2008.05.31

マウスオーバー画像を簡単に作るJavaScript

知っていると結構便利です|imagelink.js

バタバタしている内に結構間が空いてしまいました。
またコツコツと更新していきますので、よろしくお願いします。
さて、今回はweb creators 2008年4月号の「WEBデザイン TIPS&TRICKS」に載っていたJavaScriptですが、知っていると結構便利に使えると思うので紹介してみます。

ライブラリは、「Style Your Image Links」というページからダウンロードでき、このライブラリを使うと、簡単にマウスオーバー時の画像を作ることができます。
仕組みは、マウスオーバーされた画像に「.imageOver」というクラス名を付けられたspan要素を重ねるようです。
なので、今回紹介する方法以外にも応用が利くと思います。

では、サンプルです。

↑このサンプルはこちらからダウンロードできます。

ライブラリはJavaScriptのソースだけでできているので非常にシンプルです。
オリジナルのファイル(サンプルのimagelink_bk.js)では、リンクが張られた画像のすべてに反映されてしまい、逆に実用的ではないと感じたので、僕のサンプルでは、imagelink.jsの16行目ように、
var imageClass = "imglink";
と設定し、htmlの方で反映させたいimgだけにclass="imglink"と記述しています。

|

« 入力した値をチェックするJavaScript | トップページ | スクリプトで制御するタイポグラフィックス »

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35737/41382047

この記事へのトラックバック一覧です: マウスオーバー画像を簡単に作るJavaScript:

« 入力した値をチェックするJavaScript | トップページ | スクリプトで制御するタイポグラフィックス »