Pequeña referencia rápida:
<img name="
imagen_uno" src="images/
bar1.jpg">
<a href="javascript:void (0);" onmouseover="document['
imagen_uno'].src='images/
bar1.jpg';">Una imagen</a>
<a href="javascript:void (0);" onmouseover="document['
imagen_uno'].src='images/
bar2.jpg';">Otra imagen</a>
Lo primero es darle un nombre a la imagen. Debe ser único en el documento. Esto se hace en el parámetro name de <img>. En el parámetro src ponemos la imagen que debe salir por defecto, en este caso bar1.jpg. A continuación un par de enlaces (creo que no tienen por qué ser enlaces, pero siendo enlaces el usuario sabe que en ese texto "pasa algo") con el pequeño código javascript para cambiar el parámetro src según sea apropiado.
--
Otra opción es hacer que la imagen cambie no al poner el cursor sobre un texto, sino al ponerlo sobre la propia imagen. Esto sólo permite comparar dos imágenes, mientras que el método anterior permite más.
<a href="javascript:void (0);" onmouseover="document['imagen_dos'].src='qux2.jpg';" onmouseout="document['imagen_dos'].src='qux1.jpg';">
<img src="qux1.jpg" name="imagen_dos" id="imagen_dos">
</a>
Realmente no sé si hace falta el parámetro id en <img>, pero como estoy copypasteando de un tutorial :twisted: (de Vicent Peris), pues así se queda
.
