Generic function to change images on mouseover

Question

Im trying to make a generic script to change images on mouseover and mouseout.

This is what im trying, but its not working.

<script language="javascript" type="text/javascript">
   function mouseOverImage()
   {
      document.getElementById(this.id).src = "/templates/articulistas/images/" + this.id + ".gif";
                        }
   function mouseOutImage()
   {
      document.getElementById(this.id).src = "/templates/articulistas/images/" + this.id + "-off.gif";
   }
</script> 

The HTML:

<a href="" title="Aumentar o Tamanho da Letra" class="increaseFont">
<img id="aumentar-letra" src="/templates/articulistas/images/aumentar-letra-off.gif" onmouseover="mouseOverImage(this)" onmouseout="mouseOutImage(this)" /></a>
<a href="" title="Diminuir o Tamanho da Letra" class="decreaseFont">
<img id="diminuir-letra" src="/templates/articulistas/images/diminuir-letra-off.gif" onmouseover="mouseOverImage(this)" onmouseout="mouseOutImage(this)" /></a>

Answer 1

That code should update the image source, but only if you hook it up to the appropriate img elements (and in the appropriate way, since you are relying upon this). Given the document.getElementById(this.id) is null error you mention above, you are not doing this correctly.

Check the example here for one way to link the img element(s) with the handler functions:

http://jsfiddle.net/NdJJZ/2

Answer 2

You might want to check to make sure the paths are correct:

"/templates/articulistas/images/" + this.id + ".gif";

This looks like it might be a relative path, so you'll need to change it to ../templates/articulistas/images/" + this.id + ".gif"; assuming that's the correct relative path.

Also, you need to map out the parameter in the function correctly:

function mouseOverImage(object) // Accepting an object as argument.
   {
      document.getElementById(object.id).src = "/templates/articulistas/images/" + object.id + ".gif";
                        }
   function mouseOutImage(object)
   {
      document.getElementById(object.id).src = "/templates/articulistas/images/" + object.id + "-off.gif";
   }