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.