Ver Mensaje Individual
  #1 (permalink)  
Antiguo 19/06/2010, 13:39
laszarzitas
 
Fecha de Ingreso: julio-2009
Mensajes: 47
Antigüedad: 14 años, 9 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>