Menú con links Fade como en http://pluginlab.com

Gooppy · #1 (**permalink**) 14/09/2005, 22:56

Hola!

He estado investigando y pues creo que el efecto que tiene el menú (menú izquierdo vertical) de la página http://pluginlab.com es Fade, solo que los códigos que he encontrado no son como en ese menú. Vi el código css y javascript del menú, pero no se como modificarlo ni nada pues no se de javascript

y el fondo donde quiero un menú como ese es negro.

Se le pueden cambiar los colores? O.o

Me gustaría mucho si pudieran ayudarme con esto.

Gracias adelantadas! n_n

caricatos · #2 (**permalink**) 15/09/2005, 02:35

Hola:

Hace tiempo hicimos por estos foros un script que hace el efecto con el fondo de cualquier cosa que tuviera definido un id... supongo que sería fácil retocarlo:

http://www.forosdelweb.com/f13/fadeout-talbla-159137/

Tienes en las FAQs un par de temas que pueden ayudarte: http://www.forosdelweb.com/showpost....&postcount=129 y http://www.forosdelweb.com/showpost....&postcount=203

Espero que te sirva...

Saludos

Gooppy · #3 (**permalink**) 15/09/2005, 06:02

Gracias por responder, chekare los códigos de los fondos en Fade =). Seguro me sirven para algunas cosas en mi web :D (vi algunos, mañana veo todos=D, pero entre los ke vi como 2 no me funcionaron x.x).

No les posteo el código del menú que les digo en mi primer mensaje por que les pondría todo el código javascript de la página, ya que no se hasta donde llega solo el del menú @_@... aquí les dejo el link al archivo javascript donde viene http://pluginlab.com/shared/common.js

y el menú como se vería en fondo negro:

Código:

<html>
<head>
<title>PluginLab Product</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script src="http://pluginlab.com/shared/common.js" language=JavaScript></script>



</head>

<body bgcolor="#000000">




<table cellspacing=0 cellpadding=0>
<tr>
<td>

</td>
</tr>
<tr>
<td height=200 valign=top>
<script language='javascript'>function ltbiOver(id,over) {var 

bul=over?'http://pluginlab.com/shared/img/bluenav_bulleton.gif':'http://pluginlab.com/shared/img/blue

nav_bulletoff.gif';var o=document.getElementById(id);if(!o.highlighted)o.src=bul;}preLoad

('http://pluginlab.com/shared/img/bluenav_bulleton.gif')</script><span style='font-

size:10pt'>&nbsp;</span><img width=5px height=5px id=ltb_0 

src='http://pluginlab.com/shared/img/bluenav_bulletoff.gif'><span class=ltLink onmouseover='ltbiOver

("ltb_0",true)' onmouseout='ltbiOver("ltb_0",false)' id=ltLink0 

onclick='window.location=this.href'>About PluginLab</span><script language='javascript'>var 

th=document.getElementById("ltLink0");th.altClassName='lt_Link';th.href="menu.php"</script>



<br><span style='font-size:10pt'>&nbsp;</span><img width=5px height=5px id=ltb_1 

src='http://pluginlab.com/shared/img/bluenav_bulletoff.gif'><span class=ltLink onmouseover='ltbiOver

("ltb_1",true)' onmouseout='ltbiOver("ltb_1",false)' id=ltLink1 

onclick='window.location=this.href'>Products</span><script language='javascript'>var 

th=document.getElementById("ltLink1");th.altClassName='lt_Link';th.href="/products.asp"</script>

<br><span style='font-size:10pt'>&nbsp;</span><img width=5px height=5px id=ltb_2 

src='http://pluginlab.com/shared/img/bluenav_bulletoff.gif'><span class=ltLink onmouseover='ltbiOver

("ltb_2",true)' onmouseout='ltbiOver("ltb_2",false)' id=ltLink2 

onclick='window.location=this.href'>Products Updates</span><script language='javascript'>var 

th=document.getElementById("ltLink2");th.altClassName='lt_Link';th.href="/produpd.asp"</script>

<br><span style='font-size:10pt'>&nbsp;</span><img width=5px height=5px id=ltb_3 

src='http://pluginlab.com/shared/img/bluenav_bulletoff.gif'><span class=ltLink onmouseover='ltbiOver

("ltb_3",true)' onmouseout='ltbiOver("ltb_3",false)' id=ltLink3 

onclick='window.location=this.href'>Download Center</span><script language='javascript'>var 

th=document.getElementById

("ltLink3");th.altClassName='lt_Link';th.href="/downloadcenter.asp"</script>

<br><span style='font-size:10pt'>&nbsp;</span><img width=5px height=5px id=ltb_4 

src='http://pluginlab.com/shared/img/bluenav_bulletoff.gif'><span class=ltLink onmouseover='ltbiOver

("ltb_4",true)' onmouseout='ltbiOver("ltb_4",false)' id=ltLink4 

onclick='window.location=this.href'>PluginLab Exchange</span><script language='javascript'>var 

th=document.getElementById("ltLink4");th.altClassName='lt_Link';th.href="/exchange.asp"</script>

<br><span style='font-size:10pt'>&nbsp;</span><img width=5px height=5px id=ltb_5 

src='http://pluginlab.com/shared/img/bluenav_bulletoff.gif'><span class=ltLink onmouseover='ltbiOver

("ltb_5",true)' onmouseout='ltbiOver("ltb_5",false)' id=ltLink5 

onclick='window.location=this.href'>Membership Center</span><script language='javascript'>var 

th=document.getElementById("ltLink5");th.altClassName='lt_Link';th.href="/membership.asp?

tab=0"</script>

<br><span style='font-size:10pt'>&nbsp;</span><img width=5px height=5px id=ltb_6 

src='http://pluginlab.com/shared/img/bluenav_bulletoff.gif'><span class=ltLink onmouseover='ltbiOver

("ltb_6",true)' onmouseout='ltbiOver("ltb_6",false)' id=ltLink6 

onclick='window.location=this.href'>Contact Support</span><script language='javascript'>var 

th=document.getElementById("ltLink6");th.altClassName='lt_Link';th.href="/support.asp"</script>

<br><span style='font-size:10pt'>&nbsp;</span><img width=5px height=5px id=ltb_7 

src='http://pluginlab.com/shared/img/bluenav_bulletoff.gif'><span class=ltLink onmouseover='ltbiOver

("ltb_7",true)' onmouseout='ltbiOver("ltb_7",false)' id=ltLink7 

onclick='window.location=this.href'>Products Tutorials</span><script language='javascript'>var 

th=document.getElementById("ltLink7");th.altClassName='lt_Link';th.href="/tutorials.asp"</script>




<br><span style='font-size:10pt'>&nbsp;</span><img width=5px height=5px id=ltb_8 

src='http://pluginlab.com/shared/img/bluenav_bulletoff.gif'><span class=ltLink onmouseover='ltbiOver

("ltb_8",true)' onmouseout='ltbiOver("ltb_8",false)' id=ltLink8 

onclick='window.location=this.href'>Latest News</span><script language='javascript'>var 

th=document.getElementById("ltLink8");th.altClassName='lt_Link';th.href="/news.asp"</script>

<br><span style='font-size:10pt'>&nbsp;</span><img width=5px height=5px id=ltb_9 

src='http://pluginlab.com/shared/img/bluenav_bulletoff.gif'><span class=ltLink onmouseover='ltbiOver

("ltb_9",true)' onmouseout='ltbiOver("ltb_9",false)' id=ltLink9 onclick='window.location=this.href'>Press 

Release</span><script language='javascript'>var th=document.getElementById

("ltLink9");th.altClassName='lt_Link';th.href="/pressrelease.asp"</script>


<br><span style='font-size:10pt'>&nbsp;</span><img width=5px height=5px id=ltb_10 

src='http://pluginlab.com/shared/img/bluenav_bulletoff.gif'><span class=ltLink onmouseover='ltbiOver

("ltb_10",true)' onmouseout='ltbiOver("ltb_10",false)' id=ltLink10 

onclick='window.location=this.href'>Contact Us</span><script language='javascript'>var 

th=document.getElementById("ltLink10");th.altClassName='lt_Link';th.href="/contacts.asp"</script>


<br><span style='font-size:10pt'>&nbsp;</span><img width=5px height=5px id=ltb_11 

src='http://pluginlab.com/shared/img/bluenav_bulletoff.gif'><span class=ltLink onmouseover='ltbiOver

("ltb_11",true)' onmouseout='ltbiOver("ltb_11",false)' id=ltLink11 

onclick='window.location=this.href'>PluginLab Store</span><script language='javascript'>var 

th=document.getElementById

("ltLink11");th.altClassName='lt_Link';th.href="/order.asp"</script><br></td></tr></table></div>




</body>
</html>

Lo que me llama la atención de ese fade es que al pasar el mouse rapido por todos los links pareciera que deja una especie de estela, es decir que el link no regresa a su color inmediatamente como otros scripts que he probado, lo malo es ke ahí se ve bien el menú por que tiene un fondo de color claro, y yo quisiera ponerlo en un fondo negro, pero por lo tanto no se verían los links por confundirse con el fondo :S.

Se podrían cambiar los colores?

Muchas gracias a la gente que lea y sobre todo a los ke me pudieran ayudar =).

seoista · #4 (**permalink**) 15/09/2005, 14:12

Hola Gooppy
Tengo este código (fade) que me proporcionaron aquí (no me acuerdo quien), que resulta muy agradable.

Código:

<script language="JavaScript">
<!--
/*************
**** <config>
**/

startColor = "#00008b";	// initial link color
endColor = "FF0000";	// final link color

stepIn = 17;		// delay when fading in
stepOut = 14;		// delay when fading out

/*
** set to true or false; true will
** cause all links to fade automatically
***/
autoFade = false;  

/*
** set to true or false; true will cause all CSS
** classes with "fade" in them to fade onmouseover
***/
sloppyClass = true; 

/** 
**** </config>
**************/

/*************
**** <install>
**

Now, once you have customized your fading colors,
you need to include your customized .js file on
every page that you want to use it in. You can
include javascript files using this syntax (in
the head of a document):

<script src="fade.js" language="Javascript"></script>

Now that you have the file included, you need to
setup your links a small bit.  Each link that you
want to fade needs to use the fade class.

Example:

<a href="blah.html" class="fade">click here</a>

Also, the link must be plain text.  This means
that you can't have <b>'s, <i>'s, <font>'s, etc.
inside of the link.

Example of what not to do:

<a href="blah.html" class="fade"><b>click</b> here</a>

Have fun!
-Anarchos-

** 
**** </install>
**************/

hexa = new makearray(16);
for(var i = 0; i < 10; i++)
    hexa[i] = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";

document.onmouseover = domouseover;
document.onmouseout = domouseout;

startColor = dehexize(startColor.toLowerCase());
endColor = dehexize(endColor.toLowerCase());

var fadeId = new Array();

function dehexize(Color){
	var colorArr = new makearray(3);
	for (i=1; i<7; i++){
		for (j=0; j<16; j++){
			if (Color.charAt(i) == hexa[j]){
				if (i%2 !=0)
					colorArr[Math.floor((i-1)/2)]=eval(j)*16;
				else
					colorArr[Math.floor((i-1)/2)]+=eval(j);
			}
		}
	}
	return colorArr;
}

function domouseover() {
  if(document.all){
  	var srcElement = event.srcElement;
  	if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))
        fade(startColor,endColor,srcElement.uniqueID,stepIn);      
   }
}

function domouseout() {
  if (document.all){
  	var srcElement = event.srcElement;
    if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))
        fade(endColor,startColor,srcElement.uniqueID,stepOut);
    }
}

function makearray(n) {
    this.length = n;
    for(var i = 1; i <= n; i++)
        this[i] = 0;
    return this;
}

function hex(i) {
    if (i < 0)
        return "00";
    else if (i > 255)
        return "ff";
    else
       return "" + hexa[Math.floor(i/16)] + hexa[i%16];}

function setColor(r, g, b, element) {
      var hr = hex(r); var hg = hex(g); var hb = hex(b);
      element.style.color = "#"+hr+hg+hb;
}

function fade(s,e, element,step){
	var sr = s[0]; var sg = s[1]; var sb = s[2];
	var er = e[0]; var eg = e[1]; var eb = e[2];
	
	if (fadeId[0] != null && fade[0] != element){
		setColor(sr,sg,sb,eval(fadeId[0]));
		var i = 1;
		while(i < fadeId.length){
			clearTimeout(fadeId[i]);
			i++;
			}
		}
		
    for(var i = 0; i <= step; i++) {
    	fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" +
			step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+
			")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step);
		}
	fadeId[0] = element;
}
-->
</script>

Es un poco largo.

Yo lo tengo metido en un *.js:

Código:

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

Espero que te sirva.

Saludos

Gooppy · #5 (**permalink**) 16/09/2005, 00:52

Gracias Seoista! =). Probe el código y queda muy bonito también

.

Lo bueno es que se le pueden cambiar los colores, si no encuentro como modificar el código que deje seguro lo uso para mi web

.

Creo que en los enlaces que dejo caricatos había uno parecido.

Saludos y gracias a los dos =).

seoista · #6 (**permalink**) 16/09/2005, 02:22

¡Anda!, ahora me doy cuenta que el código que te he puesto más arriba, es el mismo que puso epplestun (Hola

) en este post.

Lo copiaría de él (¡no recuerdo!), pero me vino muy bien (gracias).

Saludos

caricatos · #7 (**permalink**) 16/09/2005, 03:49

Hola:

Según me parece, en mozilla no debe funcionar ese código (no lo he probado, pero por mi experiencia estoy casi seguro...)

Para obtener el array de colores intermedios a partir de 2 de ellos es uno de los mensajes de las FAQs que puse, y para la transición se puede usar el otro... y sin duda funciona en los navegadores más importantes.

Saludos