Question

我正在构建一个导航栏，鼠标悬停时应将图像换出;通常我会使用CSS，但这次我想弄清楚javascript。这就是我现在所拥有的：

HTML：

<li class="bio"><a href="bio.html" onMouseOver="over_bio(this); return true" onMouseOut="up_bio()"><img src="images/nav/bio.jpg" name="bio" /></a></li>

使用Javascript：

if (document.images) {
  var bio_up = new Image();
  bio_up.src = "images/nav/bio.jpg";
  var bio_over = new Image();
  bio_over.src = "images/nav/bio-ov.jpg";
}

function over_bio() {
  if (document.images) {
    document["bio"].src = bio_over.src
  }
}

function up_bio() {
  if (document.images) {
    document["bio"].src = bio_up.src
  }
}

但是，所有图像都有“xyz.jpg”和“xyz-ov.jpg”形式的名称，所以我更喜欢只有一个适用于导航栏中每个图像的通用函数，而不是每个图像的单独功能。

Answer 1

快速解决方案应该足够强大，只要您的所有图像都属于同一类型：

$("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";
});

Answer 2

这应该适用于所有图像格式，只要扩展名在IE和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');
    }
}

Answer 3

这是一个简单的javascript（没有jQuery）的想法：

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
}

通用Javascript图像交换

3 个答案: