手法はいくつ？

• ・画像自体を切り替える
• ・画像自体の透明度を変える

画像自体を切り替える

別物の画像に切り替える場合はこの手法です。
で、JSを組む前に重要なのが画像の命名規則
例えば、XXX.jpgがあるとすればXXX_o.jpg とか XXX_on.jpgとか
大事なのはとある場所のとある文字を差し替えれば画像が変わるようにする事です。

と言うわけで実装してみます。

$('.imgover').hover(function()
{
 var srcData = $(this).attr('src');
 srcData = srcData.replace(/(\.gif|\.jpg|\.png)/g,'_o$1');
 $(this).attr('src',srcData);
},
function()
{
 var srcData = $(this).attr('src');
 srcData = srcData.replace('_o','');
 $(this).attr('src',srcData);
});

上記のようにホバーを使っていますね。
んで、srcを抜き取って、置換しているわけです。
正規表現で３パターン用意しているので、どの拡張子の画像でもうまいことやってくれます。

マウスアウトした段階で、付与した【_o】を消して元の画像に戻しているんですね！

大事な事その１

これは汎用的に使うものです。なので、クラス指定をしてあげましょう。
また、余分な処理を付け加えたくないので、img要素に対してクラスを付与してあげます。

大事な事その２

この手法だと、別の画像が２つ必要になる事になります。
ホバーしてもその画像が読み込まれていない等、重いサイトの場合は特に要注意です。
その場合は大人しくプリロード(画像先読み)をしてあげておくとOKです。

画像の透明度を切り替える

続いて行うのは、画像の透明度を切り替える手法です。
こちらは目立った変化という視点では劣りますが、使用する画像は１枚のみとなります。

早速実装してみる

$('.imgover2').hover(function()
{
 $(this).css('opacity','0.7');
},
function()
{
 $(this).css('opacity','1');
});

超シンプル。CSSで透明度を変化させているダケですね。
特に他言うことはありません。