Foros del Web » Creando para Internet » HTML »

mostrando una imagen en capa flotante, al pasar mouse sobre otra imagen

Estas en el tema de mostrando una imagen en capa flotante, al pasar mouse sobre otra imagen en el foro de HTML en Foros del Web. Saludos, este es mi primer post, no se si sera en esta parte del foro donde deba ponerlo, pero como es algo que busque mucho ...
  #1 (permalink)  
Antiguo 29/11/2007, 20:33
 
Fecha de Ingreso: noviembre-2007
Mensajes: 1
Antigüedad: 10 años
Puntos: 0
mostrando una imagen en capa flotante, al pasar mouse sobre otra imagen

Saludos, este es mi primer post, no se si sera en esta parte del foro donde deba ponerlo, pero como es algo que busque mucho y encontre poco y al final investigando por mi cuenta con el Dreamweaver, consegui hacerlo, con mis cortos conocimientos. Y decidi ponerlo por si a alguien le sirve como a mi me sirvio.
No se ponerlo como ustedes en una ventana de codigo, lo siento, lo pondre aqui he intentare ponerlo lo mas claro posible.

Codigo que ira entre las tags HEAD:

<head>
<!--- ESTO ES EL FORMATO DE ESTILO DE LA CAPA FLOTANTE -->
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 26px;
top: 75px;
}
#Layer2 {
position:absolute;
width:196px;
height:183px;
z-index:2;
left: 164px;
top: 7px;
}
#Layer3 {
position:absolute;
width:200px;
height:274px;
z-index:3;
left: 314px;
top: -27px;
}
#Layer4 {
position:absolute;
width:200px;
height:115px;
z-index:4;
left: 26px;
top: 108px;
}
#Layer5 {
position:absolute;
width:200px;
height:115px;
z-index:5;
left: 189px;
top: 100px;
}
-->
</style>

<!--- ESTO ES YA EL SCRIPT -->

<script type="text/javascript">

function imagen(ver) {
document.getElementById('im').style.visibility = ver;
}

function imagen1(ver) {
document.getElementById('im1').style.visibility = ver;
}

function imagen2(ver) {
document.getElementById('im2').style.visibility = ver;
}

function imagen3(ver) {
document.getElementById('im3').style.visibility = ver;
}

function imagen4(ver) {
document.getElementById('im4').style.visibility = ver;
}

function imagen5(ver) {
document.getElementById('im5').style.visibility = ver;
}

</script>

</head>

Codigo que ira en el lugar donde quieras ver las imagenes en el BODY:

<body>


<table>
<tr>
<td align="center"><img src="xxxxxx1.xxx" onmouseover="imagen('visible')" onmouseout="imagen('hidden')"/>
<div id="Layer1"><img src="xxxxxx2.xxx" id="im" style="visibility:hidden" /></div></td>
</tr>
<tr>
<td align="center"><img src="xxxxxx1.xxx" onmouseover="imagen1('visible')" onmouseout="imagen1('hidden')"/>
<div id="Layer2"><img src="xxxxxx2.xxx" id="im1" style="visibility:hidden" /></div></td>
</tr>
<tr>
<td align="center"><img src="xxxxxx1.xxx" onmouseover="imagen2('visible')" onmouseout="imagen2('hidden')"/>
<div id="Layer3"><img src="xxxxxx2.xxx" id="im2" style="visibility:hidden" />/></div></td>
</tr>
<tr>
<td align="center"><img src="xxxxxx1.xxx" onmouseover="imagen3('visible')" onmouseout="imagen3('hidden')"/>
<div id="Layer4"><img src="xxxxxx2.xxx" id="im3" style="visibility:hidden" /></div></td>
</tr>
<tr>
<td align="center"><img src="xxxxxx1.xxx" onmouseover="imagen4('visible')" onmouseout="imagen4('hidden')"/>
<div id="Layer5"><img src="xxxxxx2.xxx" id="im4" style="visibility:hidden" /></div></td>
</tr>
<tr>
<td align="center"><img src="xxxxxx1.xxx" onmouseover="imagen5('visible')" onmouseout="imagen5('hidden')"/>
<div id="Layer6"><img src="xxxxxx2.xxx" id="im5" style="visibility:hidden" /></div></td>
</tr>
</table>

Esto es todo el codigo, xxxxxx1.xxx corresponderia a la imagen que se carga con la pagina y xxxxxx2.xxx es la que aparecera en la capa al pasar el mouse sobre la otra. Se puede poner la cantidad de imagenes que quieras, mas cantidad o menos, solo aumentando o disminuyendo id="im(numero)" y tambien imagen(numero) donde aparezca, y en el head, quitar o poner mas funciones modificando el im(numero) e imagen(numero) como se necesite.

Yo lo probe con IE y con firefox, y funciona perfectamente, no lo probe en otros navegadores.

A los moderadores, disculpas si no va aqui este post, ya lo moveran ustedes a su lugar si lo estiman oportuno.

Saludos y espero les sirva.
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 15:10.