1. TOPページに戻る
  2. Javascript
  3. jQueryで画像をロールオーバーする方法

jQueryで画像をロールオーバーする方法

jQueryを使って画像をロールオーバーする方法は、いろいろあると思いますが今回はclassを指定して使用する方法をご紹介します。

探し回って見つけたのがこちらのサイト

使用方法

使用方法も配布サイトに詳しく書いてあります。設置をしたらロールオーバーしたいimgタグにclass="Over"をつけて、 画像名でロールオーバーする前の画像名の拡張子の前に「_o」をつけるだけです。

/**
* rollOver on jQuery
* rollOver tag:img,input
* rollOver class:Over
* rollOver FileName:*_o.*
* Last modify:20081210
* Licensed:MIT License
* @author AkiraNISHIJIMA(http://nishiaki.probo.jp/)
*/
function rollOver(){
var preLoad = new Object();
$('img.Over,input.Over').not("[@src*='_o.']").each(function(){
var imgSrc = this.src;
var fType = imgSrc.substring(imgSrc.lastIndexOf('.'));
var imgName = imgSrc.substr(0, imgSrc.lastIndexOf('.'));
var imgOver = imgName + '_o' + fType;
preLoad[this.src] = new Image();
preLoad[this.src].src = imgOver;
$(this).hover(
function (){
this.src = imgOver;
},
function (){
this.src = imgSrc;
}
);
});
}
$(document).ready(rollOver);