A Pen by Anonasaurus Rex on CodePen.
Created
November 20, 2013 12:49
-
-
Save anonymous/7562607 to your computer and use it in GitHub Desktop.
A Pen by A Non Ymous.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> | |
| <title>Link Fader</title> | |
| <style> | |
| <!-- | |
| A {font-size:20px;font-family:Arial;text-decoration:none} | |
| //--> | |
| </style> | |
| <!--- *** BEGIN CUT - Demo starts here *** ---> | |
| <!-- ********************************************************* | |
| * You may use this code for free on any web page provided that | |
| * these comment lines and the following credit remain in the code. | |
| * "Text Link Fader" © from www.javascript-fx.com | |
| ******************************************************** --> | |
| <SCRIPT TYPE="text/javascript" SRC="JSFX_LinkFader.js"></SCRIPT> | |
| <!--- *** END CUT - Demo ends here *** ---> | |
| </head> | |
| <body bgcolor="black" text="white" ALINK="#770000" VLINK="#770000" link="#770000"> | |
| <div align="center"><font face="Arial" size="5">Brought to you by... </font></div> | |
| <p align="center"><font face="Arial"><a href="http://www.javascript-fx.com" target="_blank">JavaScript-FX</a></font></p> | |
| <TABLE BORDER="2" width="80%" align="center"> | |
| <TR> | |
| <TD align="center"> | |
| Navigation<hr> | |
| <A HREF="#" | |
| onMouseOver="status='Over link 1'; return true;" | |
| onMouseOut ="status='' ; return true;">BIO-VISION</A><BR> | |
| <A HREF="#">Link 2</A><BR> | |
| <A HREF="#">Link 3</A><BR> | |
| <A HREF="#">Link 4</A><BR> | |
| <A HREF="#">Link 5</A><BR> | |
| <A HREF="#">Link 6</A><BR> | |
| </TD> | |
| <TD valign="top"> | |
| <p align="left"> | |
| are acivated.</p> | |
| <p align="left">This script is based on the fade script found at <a href="Anarchaotic">Anarchaotic</a> | |
| but I used the state transition diagram of <a href="../../ani_rollovers/index.html">Animted | |
| Rollovers</a> to ensure you could have multiple links active and to ensure | |
| the links always fade to the ON color before fading to the OFF color.</p> | |
| </TD> | |
| </TR> | |
| </TABLE> | |
| </body> | |
| </html> | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /******************************************************************* | |
| * File : JSFX_LinkFader.js © JavaScript-FX.com | |
| * Created : 2002/09/05 | |
| * Author : Roy Whittle (Roy@Whittle.com) www.Roy.Whittle.com | |
| * Purpose : To create a more dynamic a:hover using fading | |
| * History | |
| * Date Version Description | |
| * 2002-09-05 1.0 First version | |
| ***********************************************************************/ | |
| /*** Create some global variables ***/ | |
| if(!window.JSFX)JSFX=new Object(); | |
| var LinkFadeInStep=20; | |
| var LinkFadeOutStep=5; | |
| var LinkEndColor="00FF00" | |
| var LinkStartColor="FFFFFF"; | |
| var LinkFadeRunning=false; | |
| document.onmouseover = theOnOver; | |
| document.onmouseout = theOnOut; | |
| if(document.captureEvents) | |
| document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT); | |
| /*********************************************** | |
| * | |
| * Function : getColor | |
| * | |
| * Parameters : start - the start color (in the form "RRGGBB" e.g. "FF00AC") | |
| * end - the end color (in the form "RRGGBB" e.g. "FF00AC") | |
| * percent - the percent (0-100) of the fade between start & end | |
| * | |
| * returns : color in the form "#RRGGBB" e.g. "#FA13CE" | |
| * | |
| * Description : This is a utility function. Given a start and end color and | |
| * a percentage fade it returns a color in between the 2 colors | |
| * | |
| * Author : www.JavaScript-FX.com | |
| * | |
| *************************************************/ | |
| function hex2dec(hex){return(parseInt(hex,16));} | |
| function dec2hex(dec){return (dec < 16 ? "0" : "") + dec.toString(16);} | |
| function getColor(start, end, percent) | |
| { | |
| var r1=hex2dec(start.slice(0,2)); | |
| var g1=hex2dec(start.slice(2,4)); | |
| var b1=hex2dec(start.slice(4,6)); | |
| var r2=hex2dec(end.slice(0,2)); | |
| var g2=hex2dec(end.slice(2,4)); | |
| var b2=hex2dec(end.slice(4,6)); | |
| var pc=percent/100; | |
| var r=Math.floor(r1+(pc*(r2-r1)) + .5); | |
| var g=Math.floor(g1+(pc*(g2-g1)) + .5); | |
| var b=Math.floor(b1+(pc*(b2-b1)) + .5); | |
| return("#" + dec2hex(r) + dec2hex(g) + dec2hex(b)); | |
| } | |
| /************************************************/ | |
| JSFX.getCurrentElementColor = function(el) | |
| { | |
| var result = LinkStartColor; | |
| if (el.currentStyle) | |
| result = (el.currentStyle.color); | |
| else if (document.defaultView) | |
| result = (document.defaultView.getComputedStyle(el,'').getPropertyValue('color')); | |
| else if(el.style.color) //Opera | |
| result = el.style.color; | |
| if(result.charAt(0) == "#") //color is of type #rrggbb | |
| result = result.slice(1, 8); | |
| else if(result.charAt(0) == "r") //color is of type rgb(r, g, b) | |
| { | |
| var v1 = result.slice(result.indexOf("(")+1, result.indexOf(")") ); | |
| var v2 = v1.split(","); | |
| result = (dec2hex(parseInt(v2[0])) + dec2hex(parseInt(v2[1])) + dec2hex(parseInt(v2[2]))); | |
| } | |
| return result; | |
| } | |
| JSFX.findTagIE = function(el) | |
| { | |
| while (el && el.tagName != 'A') | |
| el = el.parentElement; | |
| return(el); | |
| } | |
| JSFX.findTagNS= function(el) | |
| { | |
| while (el && el.nodeName != 'A') | |
| el = el.parentNode; | |
| return(el); | |
| } | |
| function theOnOver(e) | |
| { | |
| var lnk; | |
| if(window.event) | |
| lnk=JSFX.findTagIE(event.srcElement); | |
| else | |
| lnk=JSFX.findTagNS(e.target); | |
| if(lnk) | |
| JSFX.linkFadeUp(lnk); | |
| } | |
| JSFX.linkFadeUp = function(lnk) | |
| { | |
| if(lnk.state == null) | |
| { | |
| lnk.state = "OFF"; | |
| lnk.index = 0; | |
| lnk.startColor = JSFX.getCurrentElementColor(lnk); | |
| lnk.endColor = LinkEndColor; | |
| } | |
| if(lnk.state == "OFF") | |
| { | |
| lnk.state = "FADE_UP"; | |
| JSFX.startLinkFader(); | |
| } | |
| else if( lnk.state == "FADE_UP_DOWN" | |
| || lnk.state == "FADE_DOWN") | |
| { | |
| lnk.state = "FADE_UP"; | |
| } | |
| } | |
| function theOnOut(e) | |
| { | |
| var lnk; | |
| if(window.event) | |
| lnk=JSFX.findTagIE(event.srcElement); | |
| else | |
| lnk=JSFX.findTagNS(e.target); | |
| if(lnk) | |
| JSFX.linkFadeDown(lnk); | |
| } | |
| JSFX.linkFadeDown = function(lnk) | |
| { | |
| if(lnk.state=="ON") | |
| { | |
| lnk.state="FADE_DOWN"; | |
| JSFX.startLinkFader(); | |
| } | |
| else if(lnk.state == "FADE_UP") | |
| { | |
| lnk.state="FADE_UP_DOWN"; | |
| } | |
| } | |
| JSFX.startLinkFader = function() | |
| { | |
| if(!LinkFadeRunning) | |
| JSFX.LinkFadeAnimation(); | |
| } | |
| /******************************************************************* | |
| * | |
| * Function : LinkFadeAnimation | |
| * | |
| * Description : This function is based on the Animate function | |
| * of animate.js (animated rollovers). | |
| * Each fade object has a state. This function | |
| * modifies each object and changes its state. | |
| *****************************************************************/ | |
| JSFX.LinkFadeAnimation = function() | |
| { | |
| LinkFadeRunning = false; | |
| for(i=0 ; i<document.links.length ; i++) | |
| { | |
| var lnk = document.links[i]; | |
| if(lnk.state) | |
| { | |
| if(lnk.state == "FADE_UP") | |
| { | |
| lnk.index+=LinkFadeInStep; | |
| if(lnk.index > 100) | |
| lnk.index = 100; | |
| lnk.style.color=getColor(lnk.startColor, lnk.endColor, lnk.index); | |
| if(lnk.index == 100) | |
| lnk.state="ON"; | |
| else | |
| LinkFadeRunning = true; | |
| } | |
| else if(lnk.state == "FADE_UP_DOWN") | |
| { | |
| lnk.index+=LinkFadeOutStep; | |
| if(lnk.index>100) | |
| lnk.index = 100; | |
| lnk.style.color=getColor(lnk.startColor, lnk.endColor, lnk.index); | |
| if(lnk.index == 100) | |
| lnk.state="FADE_DOWN"; | |
| LinkFadeRunning = true; | |
| } | |
| else if(lnk.state == "FADE_DOWN") | |
| { | |
| lnk.index-=LinkFadeOutStep; | |
| if(lnk.index<0) | |
| lnk.index = 0; | |
| lnk.style.color=getColor(lnk.startColor, lnk.endColor, lnk.index); | |
| if(lnk.index == 0) | |
| lnk.state="OFF"; | |
| else | |
| LinkFadeRunning = true; | |
| } | |
| } | |
| } | |
| /*** Check to see if we need to animate any more frames. ***/ | |
| if(LinkFadeRunning) | |
| setTimeout("JSFX.LinkFadeAnimation()", 40); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment