Cambio de Imágenes sin Javascript

En mis inicios de creación/desarrollo y mantenimiento de páginas web llegué a "aprender" algo de javascript y me di cuenta que se podían mejorar muchísimos elementos en cualquier página si hacía uso de ciertas funciones de javascript, en ese momento parecía una buena idea.

Conforme pasó el tiempo aprendí a desarrollar páginas con PHP, JSP y MySQL; con estas nuevas herramientas y mi nuevo conocimiento de Javascript logré hacer ciertas cosas interesantes como menús contextuales e imágenes que cambiaban de acuerdo al tipo de página que se estuviese mostrando o al tipo de consulta que se hiciera a la base de datos.

El problema con todo esto es que el bloque de código de javascript de cada página HTML/PHP era gigantesco, ilegible e inmantenible lo que no ayudaba para nada si en algún momento cualquier otra persona deseaba realizar cambios a la página.

Un ejemplo clásico de código de javascript es el usado para cambiar una imagen mostrada. Uno puede pensar que es bastante sencillo, pero si haces uso de herramientas como Dreamweaver, el código generado de forma automática puede representar una pesadilla. El siguiente código es el que genera Dreamweaver para cambiar una imagen:

function MM_swapImage() { //v3.0
   var i,j=0,x,a=MM_swapImage.arguments;
   document.MM_sr=new Array;
   for(i=0;i<(a.length-2);i+=3){
      if ((x=MM_findObj(a[i]))!=null){
         document.MM_sr[j++]=x; 
         if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];
      } 
   }
}

Yo quisiera entender ese bloque de código y hasta ahora no lo entiendo, créanme lo he intentado pero al final desistí.

Menos mal que eventualmente aprendí las ventajas de CSS y entendí que no siempre hacer todo con javascript es bueno.

Supongamos que queremos cambiar esta imagen:

por esta otra:

en el menú de cualquier página. Generalmente el código HTML del menú sería algo así:

<a href="#">Item 1</a>
<a href="#">Item 1</a>
<a href="#">Item 1</a>
<a href="#">Item 1</a>

Para lograr el cambio de imagen hay que definir ciertos elementos en la hoja de estilo y añadir una "clase" a los link.

La hoja de estilo sería algo como esto:

a.menu_item{
display: block;
width: 75px;  <-- coincide con el ancho de la imagen
height: 40px; <-- coincide con el alto de la imagen
background: url(imagen0.jpg) no-repeat top left;
line-height: 40px;
padding-left: 10px;
color: white;
text-decoration: none;
}

a.menu_item:hover{
background: url(imagen1.jpg) no-repeat top left;
}

Después de definir la hoja de estilo sólo hay que cambiar el código HTML de los link:

<a href="#" class="menu_item">Item 1</a>
<a href="#" class="menu_item">Item 1</a>
<a href="#" class="menu_item">Item 1</a>
<a href="#" class="menu_item">Item 1</a>

Y Listo, se puede ver este ejemplo funcionando aquí