Foros del Web » Creando para Internet » Diseño web »

Efecto hover un PNG sobre otra imagen

Estas en el tema de Efecto hover un PNG sobre otra imagen en el foro de Diseño web en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/07/2011, 03:01
Avatar de sunnyton  
Fecha de Ingreso: abril-2010
Mensajes: 153
Antigüedad: 6 años, 8 meses
Puntos: 6
Efecto hover un PNG sobre otra imagen

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

  #2 (permalink)  
Antiguo 05/07/2011, 19:15
 
Fecha de Ingreso: julio-2011
Ubicación: En México
Mensajes: 8
Antigüedad: 5 años, 6 meses
Puntos: 1
Respuesta: Efecto hover un PNG sobre otra imagen

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"
  #3 (permalink)  
Antiguo 05/07/2011, 21:56
 
Fecha de Ingreso: febrero-2011
Mensajes: 54
Antigüedad: 5 años, 10 meses
Puntos: 13
Respuesta: Efecto hover un PNG sobre otra imagen

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>

Etiquetas: efecto, hover, png
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:07.