Hola Foreros, tengo estos códigos en mi página que muestran una imagen al pasar el ratón.
Qué código necesito para que la imagen a mostrar lo haga dentro de la capa 2, o en una celda de tabla por ejemplo?
Cómo puedo mostra una página que está en otra carpeta dentro de la capa 3 por ejemplo?
Se puede reducir el código de los liks modificando el css?
Código Java
onload = function() {
var e, i = 0;
while (e = document.getElementById('gallery').getElementsByTa gName ('DIV') [i++]) {
if (e.className == 'on' || e.className == 'off') {
e.onclick = function () {
var getEls = document.getElementsByTagName('DIV');
for (var z=0; z<getEls.length; z++) {
getEls[z].className=getEls[z].className.replace('show', 'hide');
getEls[z].className=getEls[z].className.replace('on', 'off');
}
this.className = 'on';
var max = this.getAttribute('title');
document.getElementById(max).className = "show";
}
}
}
}
Código css
#gallery { font:11px verdana,arial,sans-serif; width:750px; padding:0; line-height:15px; height:33px; }
#gallery div.off { color:#000; height:33px; margin-right:2px; line-height:33px; padding:0 20px; float:right; background:url(tabs_0.gif) repeat-x left bottom; border:1px solid #ddd; cursor:pointer; position:relative; z-index:20; }
#gallery div.on { color:#c00; padding:0 20px; margin-right:2px; float:right; background:url(tabs_2.gif) repeat-x left bottom; cursor:pointer; height:33px; line-height:32px; border:1px solid #ddd; position:relative; z-index:100; }
div.hide { display:none; width:0; overflow:hidden; }
div.show { clear:left; background:#fff; width:127px; margin-top:39px; position:relative; z-index:50; font:11px verdana, arial, sans-serif; line-height:18px; }
div.show ul { margin:0; padding:0; list-style:none; width:127px; position:relative; }
div.show ul li { width:127px; height:30px; background:url(side_1.gif); margin:1px 0 0 0; }
div.show ul li a, div.show ul li a:visited { display:block; width:127px; height:30px; line-height:27px; background:url(side_0.gif); color:#000; text-align:center; text-decoration:none; }
div.show ul li a:hover { background:transparent; color:#c00; white-space:nowrap; line-height:29px; }
div.show ul li a span { display:none; }
div.show ul li a:hover span { display:block; position:absolute; left:150px; top:10; } /* posicion y manera de ver las img.gif */
div.show ul li a:hover span img { border:1px solid #000; }
.clear { clear:both; }
#capa1 { position:absolute; left:1px; top:1px; z-index:2; background:#2887B3; width:1250px; height:100px; }
#capa2 { position:absolute; left:760px; top:1px; z-index:2; background:url(fondo_cabecera.gif) no-repeat; width:567px; height:100px; }
#capa3 { position:absolute; left:138px; top:101px; z-index:3; background:#E2E2E2; width:1113px; height:145px; }
#capa-n { position:absolute; left:150px; top:400px; z-index:4; background:#2887B3; width:400px; height:100px; border:solid 5px #f0f; }
Código Html
<!--
span.bold {}
.content { FONT-SIZE: 12px; FONT-FAMILY: Verdana, Helvetica, sans-serif }
.postbody { FONT-SIZE: 12px; LINE-HEIGHT: 18px }
span.postbody {}
-->
</style>
<body>
<div id="gallery">
<div class="on" title="Otros"><span>Otros</span></div>
<div class="off" title="Favoritos"><span>Favoritos</span></div>
</div>
<div id="Favoritos" class="hide">
<ul>
<li><a href="#">link-1<span><img src="ruta.gif" alt="txt" width="400" height="300" /></span></a></li>
<li><a href="#">link-2<span><img src="ruta.gif" alt="txt" width="400" height="300" /></span></a></li>
</ul>
</div>
<div id="Otros" class="hide">
<ul>
<li><a href="#">link-3<span><img src="ruta.gif" alt="txt" width="400" height="300" /></span></a></li>
<li><a href="#">link-4<span><img src="ruta.gif" alt="txt" width="400" height="300" /></span></a></li>
</ul>
</div>