Evento Roll-over

Con este evento confirmas al usuario que el puntero del mouse esta sobre un objeto o área particular en tu pagina, ya que inmediatamente cambia la imagen.

Primero debes añadir el código JavaScript en la cabecera del documento, haciendo referencia a las dos imagenes que quieres mostrar, una es la que se muestra normalmente y la otra es para el botón seleccionado.

Código en la cabecera:

<Script>
   a1 = new Image();
   a1.src = "off.gif";
   a2 = new Image();
   a2.src = "on.gif"
   function Cambia(refer,nueva) {
      document[refer].src=eval(nueva+".src")
   };
</Script>

Luego donde quieres mostrar el efecto añades el siguiente código:

<A HREF=http://www.uap.edu.pe/
onMouseOver="Cambia('abc','a2')"
onMouseOut="Cambia('abc','a1')">
<IMG SRC=off.gif NAME=abc></A>


Para este ejemplo yo use la imagen OFF.GIF que se mostrara normalmente, pero cuando pongas el puntero del mouse sobre esta imagen se mostrara la imagen ON.GIF.