Si se puede, te explico: Antes que nada debes de tener las imagenas listas, es decir, si quieres que en una imagen de elefante slaga al pasar el raton una lupa, debes de tener la imagen del elefante sin la lupa y otra imagen que seria la del elefante con la lupa (no solo la lupa y el fondo gris, DEBES de tener la imagen con el elefante y la lupa como se veria al final)
En la parte de HEAD de tu página debes de poner el siguiente script:
<script type="text/javascript">
//
//
function jsPlay(soundobj) {
var thissound= eval("document."+soundobj);
try {
thissound.Play();
}
catch (e) {
thissound.DoPlay();
}
}
//-->
//
//
function MM_swapImgRestore() {
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() {
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) {
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() {
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];}
}
//-->
</script>
Lo siguiente es poner el siguiente codigo en BODY donde quieres que este la imagen:
<a href="
RUTA" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('rollimg
1','','
RUTA IMAGEN 2 CON EXTENSION',1)"><img id="rollimg1" onLoad="MM_preloadImages('
RUTA IMAGEN 2 CON EXTENSION')" src="
RUTA IMAGEN 1 CON EXTENSION" alt=""></a>
En donde solo dice RUTA en rojo debes de poner una URL si es que tu imagen se dirige a otra página, en donde dice RUTA IMAGEN 2 CON EXTENSION con rojo debe de ir la ruta de donde se ubique la imagen que estara cuando el ratón pase (en este caso la imagen del elefante con lupa), donde vuelve a decir RUTA IMAGEN 2 CON EXTENSION con rojo es lo mismo, en donde dice RUTA IMAGEN 1 CON EXTENSION en rojo debes de poner la ruta de donde se ubique la imagen que estara antes de que pase el raton (en este caso el elefante solo), ahora si tienes mas de una imagen de estas en esa misma pagina debes de cambiar el numero 1 que puse en rojo (solo el numero NO lo anterior), por ejemplo si tengo dos imagenes de estas a una le dejo el 1 y a otra le pongo 2 (pero dejando "rollimg"). Ok eso seria todo, y por si vuelves a ver de estas imagenes, se les llaman
"Imagenes Plegables"