0

私は約100枚の画像があるサイトで作業しています。画像はすべて明るいバージョンと暗いバージョンがあります。ライトの文字列は_ltで、ダークの文字列は_dkです。画像を手動で変更するために機能するコードがあります。

$('img#devbprnt').mouseover(function() {
$('img#devbprnt').attr('src', 'Images/btn_devbprnt_dk.png');    
});
$('img#devbprnt').mouseout(function() {
$('img#devbprnt').attr('src', 'Images/btn_devbprnt_lt.png');    
});

理想的には、$（'img'）をセレクターとして使用し、マウスオーバーで_ltから_dkのインスタンスを使用し、マウスアウトで予約を行うことです。これは正規表現で可能かもしれないと思いますが、私はそれらを十分に理解していません。これは可能ですか？もしそうなら、あなたは私を正しい方向に向けるのを手伝ってくれますか？

ありがとう、ジェイソン。

4

2 に答える 2

1

他の人が指摘しているように、これはCSSを介して行う必要があります。

何らかの理由でそれができない場合は、JavaScriptでそれを行う方法を次に示します。

$('img[src$="_lt.png"]').hover(function() {
    this.src = this.src.replace(/lt\.png$/, 'dk.png');
}, function() {
    this.src = this.src.replace(/dk\.png$/, 'lt.png');
});
于 2012-08-01T16:55:30.770 に答える
1

jQueryは、hover()これを行うための関数も提供します。

var dark = new RegExp('_dk$'),
    light = new RegExp('_lt$');
$('img').hover(function(){
   var image = $(this);
   image.attr('src', image.attr('src').replace(dark, '_lt'));
},
function(){
   var image = $(this);
   image.attr('src', image.attr('src').replace(light, '_dk'));
});

http://jsfiddle.net/qj5rw/

于 2012-08-01T16:58:38.123 に答える