Efecto hover un PNG sobre otra imagen

[sunnyton]

Hola quisiera que me guiaran para obtener este efecto, lo puse en seccion de web general por que no se exactamente si es con Javascript o CSS, es un efecto de por ejemplo tengo una imagen y al pasar el mouse sobre esa imagen, aparece otra (como por ejemplo una lupa) pero no se deja de ver la imagen que tengo, solo quisas se oscurezca o solamente aparezca la lupa algo asi miren

[Giovanni720]

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('rollimg1','','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"

[conexion]

Guauuu! Giovanni720, cómo te complicas la vida...

Es un simple hover (no es necesario javascript para algo tan simple):

El css:

Código HTML:

#imagen {
	width: 100px;
	height: 100px;
	background-image: url(foto.jpg);
}
#imagen a:hover {
	width: 100px;
	height: 100px;	
	background-image: url(lupa.png); /* le pones un valor de transparencia a tu gusto */
}
.lupa {
	width: 100px;
	height: 100px;	
	display: block;
}

y el html:
<div id="imagen"><a class="lupa" href="#"></a></div>