Question

I’m building a navigation bar where the images should be swapped out on mouseover; normally I use CSS for this but this time I’m trying to figure out javascript. This is what I have right now:

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
  }
}

However, all of the images have names of the form “xyz.jpg” and “xyz-ov.jpg”, so I would prefer to just have a generic function that works for every image in the navbar, rather than a separate function for each image.

Answer 1

This should work will all image formats as long as the extension is between 2 and 4 characters long IE. png, jpeg, jpg, gif etc.

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