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

menús-dinámicos

Estas en el tema de menús-dinámicos en el foro de Diseño web en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 31/05/2010, 17:03
 
Fecha de Ingreso: julio-2009
Mensajes: 47
Antigüedad: 8 años, 5 meses
Puntos: 0
Pregunta menús-dinámicos

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>
  #2 (permalink)  
Antiguo 31/05/2010, 22:11
 
Fecha de Ingreso: octubre-2006
Mensajes: 562
Antigüedad: 11 años, 1 mes
Puntos: 12
Respuesta: menús-dinámicos

mejor usa jQuery
  #3 (permalink)  
Antiguo 01/06/2010, 02:58
 
Fecha de Ingreso: julio-2009
Mensajes: 47
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: menús-dinámicos

Hola jalex16
Qué es eso de jquery, mándame algun ejemplo, dónde añadir etc.
Gracias.
  #4 (permalink)  
Antiguo 01/06/2010, 20:05
 
Fecha de Ingreso: octubre-2006
Mensajes: 562
Antigüedad: 11 años, 1 mes
Puntos: 12
Respuesta: menús-dinámicos

jQuery es una librería javascript que facilita bastaaante las cosas. puedes averiguar más en http://jquery.com/
  #5 (permalink)  
Antiguo 02/06/2010, 04:15
 
Fecha de Ingreso: julio-2009
Mensajes: 47
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: menús-dinámicos

Gracias jalex16 aprenderé jQuery o lo que sea
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 14:26.