javascript - 通用 Javascript 图像交换

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