画像ロールオーバーのjavascript
- 2008年03月12日
- category:javascript
- Comment(9)
- Trackback(0)
画像のロールオーバーには主にjqueryのプラグインを使ってたんですが、jqueryを使えない案件があってjqueryを使わないでロールオーバーを実現するライブラリを探したけど自分好みの仕様のものが見つからなかったんで自分で書いてみました。せっかくなんで公開しておきます。
使い方
- ダウンロードしたjavascriptを読み込む
- ロールオーバーしたい画像のimg要素にclass="hoverImg"を指定（スペース区切りの複数指定も可）
- 通常時の画像「xxx.gif」とロールオーバー後の画像「xxx_ov.gif」を準備（同じ場所におく）
指定するclass名(hoverImg)とロールオーバー後の画像の接尾語（_ov)はjsの以下の箇所を書き換えれば変更できます。
var targetClassName = "hoverImg";
var suffix = "_ov";ライセンスとか
MITライセンスです。ご自由にお使いください。ただし使用に関しては自己責任でお願いします。
余談
To-Rで紹介されていたライブラリが、僕が欲しかったライブラリにかなり近かったんですが、これclass名の複数指定に対応してないんですよね。To-Rのエントリー内では半角スペース区切りで指定することにより複数のclass名を指定する事が可能です。
とあるんですが、実際使ってみたところ複数指定では動きませんでした。
- Prev Entry
- IE8 Beta1を早速使ってみた
- Next Entry
- SWFObject.jsってvalidじゃなかったんだね
トラックバックURL
http://webtech-walker.com/archive/2008/03/12232403.html/trackback
※トラックバックを受け付けてから表示するまでにしばらく時間がかかる場合があります。
コメント一覧
デッドリー 2008年3月13日 23時49分
この記事に触発されて、CSSのみで画像ロールオーバーを組もうとしているんですけど、なかなかうまくいきませんねえｗ。
ナルヒート 2008年3月14日 09時30分
うん。コレ使わさせていただきまーす。
ただ、Mac版IE5にも対応する案件があるので、後半の拡張部分を改造して使いますね。
hoka（管理人） 2008年3月14日 11時18分
＞デッドリーさん
僕も昔はCSSのみでやってたんですけど最近あまりやらなくなりました。どうしても画像OFFにしたときに表示される問題がでてくるんですよね。
＞ナルヒートさん
最近はMacIEばっさり切ってるんで対応してないんですよ。すいません。自由に改造しちゃってください。
デッドリー 2008年3月14日 21時30分
http://www.deadpro.com/web/css/rollover.html
物凄くやっつけですが、作ってみましたｗ。
いまのところFirefox 2.0でしか動作確認を行っていないので、他のブラウザではうまく表示されない可能性が高いです。
hoka（管理人） 2008年3月17日 11時29分
＞デッドリーさん
おぉ、なるほど。画像を二つ用意するパターンは初めて知りました。でもやっぱりCSSのみでやろうとすると、どうしても無理しないといけないところがでてきますよね。
高橋 2008年7月14日 17時24分
高橋と申します、
検索でたどり着きました。
スマートなロールオーバー技を探していたのですが
こちらのJavaScript、使わせていただきました。
非常に使いやすいスクリプトですね、
classの複数対応もうれしいです。
素敵なスクリプトをありがとうございます(^^)
１つ質問なのですがこちらのスクリプトは
プリロードもするようになってますでしょうか？
hoka（管理人） 2008年7月15日 16時59分
＞高橋さん
はじめまして。コメントありがとうございます。
＞１つ質問なのですがこちらのスクリプトは
＞プリロードもするようになってますでしょうか？
プリロードするようにしています。ソースでいうと下記のところになります。
//preload
preload[i] = new Image();
preload[i].src = images[i].getAttribute("src").replace(overReg, "$1" + suffix + "$2");
kurihhi 2009年2月12日 23時31分
はじめまして、こんにちわ。
とっても素晴らしいスクリプトですね！
使わせていただきますね！
私も、MacIEで使えるように少し拡張してアップさせていただきます。
その他、クラス名を扱いやすいようにちょこちょこ弄ったものをアップ（某サイトで使う）のですが、問題ないでしょうか？
また、拡張方法をブログ等で公開するのはNGでしょうか。
MITライセンスとのことでしたが、念のため…。
お手数おかけしますがご回答いただけるとありがたいです。
hokaccha 2009年2月13日 08時09分
＞kurihhiさん
MITライセンスなので、ライセンスの表示だけ残ってれば基本的には何してもいいですよー。
ご自由に葬ってください。そして拡張したらぜひブログで公開して教えてください！