Como yo sabría, sería mediante JavaScript.
Y sería muy fácil:
Código :
<script>
var imagenes=new Array('url_de_imagen_1','url_de_imagen_2','url_de_imagen_3');
function listen(event,elem,func)
{elem = document.getElementById(elem);
if(elem.addEventListener)
{elem.addEventListener(event,func,false);}
else
{if(elem.attachEvent)
{var r=elem.attachEvent("on"+event, func);
return r;
}
else
{throw 'No es posible añadir evento';}
}
}
window.onload=function()
{for(i=0;i<imagenes.length;i++)
{
listen('mouseover',(i+1)+'_LI',function(){this.parentNode.style.backgroundImage='url(\''+imagenes[parseFloat(this.id)-1]+'\')';});
}
}
</script>
<body>
<ul>
<li id="1_LI">imagen1</li>
<li id="2_LI">imagen2</li>
<li id="3_LI">imagen3</li>
</ul>
</body>
¿el problema?
El de siempre.
El maldito IE.
Al parecer... no soporta (correctamente) el "this" ("this.id", o "this.parentNode") cuando se le llama desde una función anónima:
Código :
listen('mouseover','id_de_elemento',function(){alert(this.id);});
Esto... que funciona a la perfección en FireFox y Ópera... no arranca en El Maligno (IExplorer).
Sólo se me ha ocurrido algo para que funcione en todos: "hacerlo a la antigua usanza"
Código :
<script>
function cambia_fondo(url_de_imagen)
{document.getElementById('UL').style.backgroundImage='url(\''+url_de_imagen+'\')';}
</script>
<body>
<ul id="UL">
<li id="1_LI" onmouseover="javascript:cambia_fondo('url_de_imagen_1');">imagen1</li>
<li id="2_LI" onmouseover="javascript:cambia_fondo('url_de_imagen_2');">imagen2</li>
<li id="3_LI" onmouseover="javascript:cambia_fondo('url_de_imagen_3');">imagen3</li>
</ul>
</body>
Si se quiere, se podrían usar "comentarios condicionales" (<!-- if[IE] //-->) para hacerlo completamente correctamente en ambos navegadores (aunque este último camino valdría a la perfección para ambos navegadores)