Search code examples
javascriptmouseovermouseout

Generic function to change images on mouseover

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

  • 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