通用Javascript图像交换

我正在建立一个导航栏，在这里，图像应该在鼠标上方交换；通常我会使用CSS来实现这一点，但这次我想弄清楚javascript。这就是我现在拥有的：

HTML:

---

但是，所有图像的名称都是“xyz.jpg”和“xyz ov.jpg”的形式，因此我更倾向于使用一个通用函数来处理导航栏中的每个图像，而不是为每个图像使用一个单独的函数

如果您的所有图像均为同一类型，则快速射击解决方案应足够坚固：

$("li.bio a").hover(function() {
    var $img = $(this).find("img");
    $img[0].src = $img[0].src.replace(".jpg", "") + "-ov.jpg";
}, function() {
    var $img = $(this).find("img");
    $img[0].src = $img[0].src.replace("-ov.jpg", "") + ".jpg";
});

---

这将适用于所有图像格式，只要扩展名长度在2到4个字符之间，即png、jpeg、jpg、gif等

var images = document.getElementById('navbar').getElementsByTagName('img'), i;

for(i = 0; i < images.length; i++){
    images[i].onmouseover = function(){
        this.src = this.src.replace(/^(.*)(\.\w{2,4})$/, '$1'+'-ov'+'$2');
    }

    images[i].onmouseout = function(){
        this.src = this.src.replace(/^(.*)-ov(\.\w{2,4})$/, '$1'+'$2');
    }
}

var images=document.getElementById（'navbar'）.getElementsByTagName（'img'），i；
对于（i=0；i

这里有一个简单javascript（无jQuery）的想法：

---

onmouseout函数假定在URL的其他地方没有出现-ov。也许是一个安全的假设，也许不是。例如，每当img src发生变化时，恼人的警报框都会告诉你：@jfriend00我更新了它，使其不受该假设的影响，尽管我认为这是一个相当安全的假设：）我喜欢看到有多少不同的方法来解决这样一个相当简单的问题。@jfriend00除此之外，karims假设图像不在

www.jpgs.domain.com

FYI上，这与此没有太大区别。您应该避免在悬停时交换图像，因为加载新图像时几乎总是会有延迟。理想情况下，您希望使用一个具有所有“状态”（正常、悬停、活动）的背景精灵，然后可以使用JQuery相应地定位背景以显示适当的状态。这允许浏览器一次下载所有状态。

$("li.bio a").hover(function() {
    var $img = $(this).find("img");
    $img[0].src = $img[0].src.replace(".jpg", "") + "-ov.jpg";
}, function() {
    var $img = $(this).find("img");
    $img[0].src = $img[0].src.replace("-ov.jpg", "") + ".jpg";
});

var images = document.getElementById('navbar').getElementsByTagName('img'), i;

for(i = 0; i < images.length; i++){
    images[i].onmouseover = function(){
        this.src = this.src.replace(/^(.*)(\.\w{2,4})$/, '$1'+'-ov'+'$2');
    }

    images[i].onmouseout = function(){
        this.src = this.src.replace(/^(.*)-ov(\.\w{2,4})$/, '$1'+'$2');
    }
}

function onMouseOverSwap(e) {
   e.src = e.src.replace(/\.jpg$/", "-ov.jpg");    // add -ov onto end
}

function onMouseOutSwap(e) {
    e.src = e.src.replace(/(-ov)+\.jpg$/, ".jpg");  // remove -ov
}