いくつかの画像とロールオーバー画像があります。jQuery を使用して、onmousemove/onmouseout イベントが発生したときにロールオーバー画像を表示/非表示にしたいと考えています。すべての画像名は、次のように同じパターンに従います。
オリジナル画像:
Image.gifロールオーバー画像:
Imageover.gif
onmouseover イベントと onmouseout イベントで、それぞれ画像ソースの「over」部分を挿入および削除したいと考えています。
jQuery を使用してこれを実行するにはどうすればよいですか?
ベストアンサー1
準備完了時にセットアップするには:
$(function() {
$("img")
.mouseover(function() {
var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";
$(this).attr("src", src);
})
.mouseout(function() {
var src = $(this).attr("src").replace("over.gif", ".gif");
$(this).attr("src", src);
});
});
URL 画像ソースを使用する場合:
$(function() {
$("img")
.mouseover(function() {
var src = $(this).attr("src");
var regex = /_normal.svg/gi;
src = this.src.replace(regex,'_rollover.svg');
$(this).attr("src", src);
})
.mouseout(function() {
var src = $(this).attr("src");
var regex = /_rollover.svg/gi;
src = this.src.replace(regex,'_normal.svg');
$(this).attr("src", src);
});
});