Hi all....This code will let u make colour fade in rollover links in html file.
insert this code in the html file first
| CODE | <script language=JavaScript type=text/javascript>
<!--
function NoBlur() { for (a in document.links) document.links[a].onfocus = document.links[a].blur;
} if (document.all) { document.onmousedown = NoBlur; }
-->
</SCRIPT>
<META http-equiv=Page-Enter content=blendTrans(Duration=1.0)>
<META http-equiv=Page-Exit content=blendTrans(Duration=1.0)>
<STYLE type=text/css>
A:visited {
COLOR: #9C9A9C; TEXT-DECORATION: none
}
A:link {
COLOR: #999999; TEXT-DECORATION: none
}
A:hover {
COLOR: #8da9e9; TEXT-DECORATION: underline
}
BODY {
SCROLLBAR-FACE-COLOR: #0c0c5e;
SCROLLBAR-HIGHLIGHT-COLOR: #888888;
SCROLLBAR-SHADOW-COLOR: #5f9g4w;
SCROLLBAR-3DLIGHT-COLOR: #1561fd;
SCROLLBAR-ARROW-COLOR: #4vf1rq;
SCROLLBAR-TRACK-COLOR: #024gv2;
SCROLLBAR-DARKSHADOW-COLOR: #000000;
background-color: #FFFFFF;
background-image: url(file:///C|/Documents%20and%20Settings/Jaguar/Desktop/Profiles/churi.JPG);
}
.style4 {font-family: porsche}
.style5 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style6 {
color: #666666;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.style7 {font-size: 9px}
</STYLE> |
You must use this style for the fade in effect...
now the JAVA script part....
Open a new txt document and name it to fade.js...then open the file again with notepad or wordpad and enter the following codes:-
| CODE | fadeColor = "#FFFECF"; // color to fade to
//fadeColor = "#0";
stepIn = 25; // delay when fading in
stepOut = 35; // delay when fading out
autoFade = true;
sloppyClass = true;
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>
-n0wfel-
**
**** </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;
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[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 && 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]);
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;
}
|
You can edit the fade in colours....  Still if u face problems then e-mail me....
|
