Como fazer esse efeito em links????

[tiago.iju 0]

Salve moçada,

alguem manja do efeito em links que este site usa???

 

Ok, 100+

[sitenovo 0]

Seguinte, podemos ver que é em .css e script, veja:<LINK rel="stylesheet" href="noun.css"><script language="javascript">people_on = new Image();people_on.src = "Images/people_on.gif";people_off = new Image();people_off.src = "Images/people_off.gif";places_on = new Image();places_on.src = "Images/places_on.gif";places_off = new Image();places_off.src = "Images/places_off.gif";things_on = new Image();things_on.src = "Images/things_on.gif";things_off = new Image();things_off.src = "Images/things_off.gif";n_about = new Image();n_about.src = "Images/n_about.gif";about_off = new Image();about_off.src = "Images/about_off.gif";n_contact = new Image();n_contact.src = "Images/n_contact.gif";contact_off = new Image();contact_off.src = "Images/contact_off.gif";n_newsletter = new Image();n_newsletter.src = "Images/n_newsletter.gif";newsletter_off = new Image();newsletter_off.src = "Images/newsletter_off.gif";def = new Image();def.src = "Images/default.gif";</script>Tem a parte do link propriamente dito, peguei so um como exemplo! <td width="33" height="34" bgcolor="#CC0000"><a href="people.html" onMouseOver="document.images.people.src=people_on.src;" onMouseOut="document.images.people.src=people_off.src;" target="mainbody"><img src="Images/people_off.gif" name="people" border="0" alt="people"></a></td> </tr> <tr> <td height="10" bgcolor="#000000"><img src="Images/shim.gif" width="1" height="10"></td> </tr>Bem, achoque deup/ pegar como se faz, você ode tentar pegar o arquivo em .css, use o caminho do site p/ baixar... olhe no inicio...[]srodney

[ExPeRTiM 0]

A:visited { TEXT-DECORATION: underline;}A:active { TEXT-DECORATION: underline;}A:hover { TEXT-DECORATION: none; COLOR: #FFFFFF; background-color: #CC0000}A:link { TEXT-DECORATION: underline;}.date { FONT-SIZE: 10px; COLOR: #C7C7C7; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}.body { FONT-SIZE: 10px; FONT-HEIGHT: 16px; COLOR: #000000; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}.nav { FONT-SIZE: 10px; COLOR: #000000; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}.textfield { FONT-SIZE: 10px; COLOR: #000000; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #ECECEC; width: 160px}A.nav:visited { TEXT-DECORATION: none;}A.nav:active { TEXT-DECORATION: none;}A.nav:hover { TEXT-DECORATION: none; background-color: #E19500}A.nav:link { TEXT-DECORATION: none;}esse é o .css do site.que esta sendo chamado de "noun.css"

[tiago.iju 0]

Manjei!

Este é o script! Por enquanto não tentei mudá-lo, mas é só chama-lo no head desa forma:

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

 

E o arquivo fade.js é esse:

 

/*************

**** <config>

**/

 

fadeColor = "#FFFFFF "; // color to fade to

//fadeColor = "#0";

stepIn = 20; // delay when fading in

stepOut = 30; // delay when fading out

 

/* set to true or false; true will

** cause all links to fade automatically

** (you won't need to add class="fade")

***/

autoFade = true;

 

/* set to true or false; true will cause all CSS

** classes with "fade" in them to fade onmouseover

***/

sloppyClass = true;

 

/* set to true or false; true will make the script

** work for Macs (IE 5+), but you will have to give

** a name (name="blah") to each link that you want

** to fade.

***/

macCompat = false;

 

/**

**** </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;

hexa[10]="a"; hexa[11]="b"; hexa[12]="c";

hexa[13]="d"; hexa[14]="e"; hexa[15]="f";

 

document.onmouseover = domouseover;

document.onmouseout = domouseout;

 

fadeColor = dehexize(fadeColor.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 != "nofade") || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) {

if (!srcElement.startColor) {

srcElement.startColor = (srcElement.style.color)? srcElement.style.color: srcElement.currentStyle.color;

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

}

var link = (macCompat? srcElement.name: srcElement.uniqueID);

if (link) fade(srcElement.startColor,fadeColor,link,stepIn);

else if (macCompat) alert("Error: Mac Compatility mode enabled, but link has no name.");

}

}

}

 

function domouseout() {

if (document.all){

var srcElement = event.srcElement;

if ((srcElement.tagName == "A" && autoFade && srcElement.className != "nofade") || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) {

var link = (macCompat? srcElement.name: srcElement.uniqueID);

if (link) fade(fadeColor,srcElement.startColor,link,stepIn);

}

}

}

 

function makearray(n) {

this.length = n;

for(var i = 1; i <= n; i++)

this = 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®; var hg = hex(g); var hb = hex( :ph34r: ;

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 && eval(fadeId[0])) {

var orig = eval(fadeId[0]);

setColor(orig.startColor[0],orig.startColor[1],orig.startColor[2],orig);

var i = 1;

while(i < fadeId.length) {

clearTimeout(fadeId);

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;

}

 

Vlw

[Puff =P 0]

Você sabe como eu faço pra colocar o efeito fade somente em um link ?