Foros del Web » Creando para Internet » CSS »

menu dinamico con imagen en link

Estas en el tema de menu dinamico con imagen en link en el foro de CSS en Foros del Web. Hola! tengo este Menú Dinámico que funciona perfectamente, ahora quisiera añadirle código javascript para que al pasar por los distintos link me muestre una imagen ...
  #1 (permalink)  
Antiguo 19/06/2010, 14:39
 
Fecha de Ingreso: julio-2009
Mensajes: 47
Antigüedad: 8 años, 5 meses
Puntos: 0
Pregunta menu dinamico con imagen en link

Hola! tengo este Menú Dinámico que funciona perfectamente, ahora quisiera añadirle código javascript para que al pasar por los distintos link me muestre una imagen distinta para cada link y si es posible en una zona determinada de la página o en una capa situada en el extremo superior derecho de mi página. Gracias

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Multiniveles</title>
<link rel="stylesheet" href="style.css" type="text/css" />

////////////// Código del archivo style.css/////////////////

body {margin:25px; font:11px Verdana,Arial; background:#eee}
ul.menu {list-style:none; margin:0; padding:0}
ul.menu * {margin:0; padding:0}
ul.menu a {display:block; color:#000; text-decoration:none}
ul.menu li {position:relative; float:left; margin-right:2px}
ul.menu ul {position:absolute; top:26px; left:0; background:#d1d1d1; display:none; opacity:0; list-style:none}
ul.menu ul li {position:relative; border:1px solid #aaa; border-top:none; width:148px; margin:0}
ul.menu ul li a {display:block; padding:3px 7px 5px; background-color:#d1d1d1}
ul.menu ul li a:hover {background-color:#c5c5c5}
ul.menu ul ul {left:148px; top:-1px}
ul.menu .menulink {border:1px solid #aaa; padding:5px 7px 7px; font-weight:bold; background:url(images/header.gif); width:134px}
ul.menu .menulink:hover, ul.menu .menuhover {background:url(images/header_over.gif)}
ul.menu .sub {background:#d1d1d1 url(images/arrow.gif) 136px 8px no-repeat}
ul.menu .topline {border-top:1px solid #aaa}

<script type="text/javascript" src="script.js"></script>

///////////////////// Código del archivo script.js ///////////

var menu=function(){
var t=15,z=50,s=6,a;
function dd(n){this.n=n; this.h=[]; this.c=[]}
dd.prototype.init=function(p,c){
a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
for(i;i<l;i++){
var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
h.onmouseover=new Function(this.n+'.st('+i+',true)');
h.onmouseout=new Function(this.n+'.st('+i+')');
}
}
dd.prototype.st=function(x,f){
var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
clearInterval(c.t); c.style.overflow='hidden';
if(f){
p.className+=' '+a;
if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
if(c.mh==c.offsetHeight){c.style.overflow='visible '}
else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
}else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
}
function sl(c,f){
var h=c.offsetHeight;
if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
clearInterval(c.t); return
}
var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
c.style.height=h+(d*f)+'px'
}
return{dd:dd}
}();
</head>

<body>
<ul class="menu" id="menu">
<li><a href="#" class="menulink">Título One</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#" class="sub">Link 2</a>
<ul>
<li class="topline"><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
<li><a href="#">link 5</a></li>
</ul>
</li>
<li>
<a href="#" class="sub">link 3</a>
<ul>
<li class="topline"><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li>
<a href="#" class="sub">link 3</a>
<ul>
<li class="topline"><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
<li><a href="#">link 5</a></li>
<li><a href="#">link 6</a></li>
</ul>
</li>
<li><a href="#">link 4</a></li>
</ul>
</li>
<li><a href="#">link 4</a></li>
<li><a href="#">link 5</a></li>
</ul>
</li>
</ul>
<div id="text" style="float:left; clear:left; width:650px; margin-top:10px">
/////////////////////////////////// Resto de página.............................. ///////////////
</div>
<script type="text/javascript">
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>
</body>
</html>
  #2 (permalink)  
Antiguo 20/06/2010, 11:46
 
Fecha de Ingreso: julio-2009
Mensajes: 47
Antigüedad: 8 años, 5 meses
Puntos: 0
Exclamación Respuesta: menu dinamico con imagen en link

Tema eliminado

Última edición por laszarzitas; 01/09/2010 a las 09:06

Etiquetas: dinamico, link
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:47.