SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot get_dave's Avatar
    Join Date
    Nov 2006
    Location
    England, UK
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Easy question: Fading different colours on mouseover

    Many thanks for any help.

    I have created a simple navigation system, in which a 3px coloured bottom border appears when the mouse hovers over the link (CSS based).

    I then took this a step futher and added a javascript I found (and altered) which cause the bottom-border color to fade in gradually from grey to orange onmouseover.

    What I help with is changing my scripts and html to allow me to specify each link to have a different border-bottom color onmouseover.

    How can i do this? Code is below:

    HTML Code:
    <!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" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>Navigation Experiment</title>
    
    <meta name="copyright" content="David Smith" />
    <meta name="author" content="David Smith" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    
    
    <link rel="stylesheet" type="text/css" href="css/screen.css" />
    
    <!--[if lte ie 6]>
    
    <style type="text/css" media="screen">
    @import "css/ie.css";
    </style>
    
    <![endif]-->
    
    <!-- Fade Script Version 4.0 (c) Anarchos July 2001 http://anarchos.xs.mw/fade.phtml -->
    <!-- Courtesy of SimplytheBest.net - http://simplythebest.net/scripts/ -->
    <script src="javascripts/fade.js" language="Javascript"></script>
    
    
    </head>
    
    <body>
    
    <!-- BEGIN PAGE WRAPPER -->
    <div id="wrapper">
    	
    	<div id="main_navigation">
    		<h2>Main Site Navigation</h2>
    		<ul id="nav_main">
    			<li><a href="#" class="fade">Home</a></li>
    			<li><a href="#" class="fade" id="link1">Link #1</a></li>
    			<li><a href="#" class="fade">Link #2</a></li>
    			<li><a href="#" class="fade">Link #3</a></li>
    			<li><a href="#" class="fade">Link #4</a></li>
    			<li><a href="#" class="fade">Link #5</a></li>
    			<li><a href="#" class="fade">Link #6</a></li>
    		</ul>
    	</div>
    
    </div>
    <!-- END WRAPPER -->
    
    
    </body>
    
    </html>

    HTML Code:
    /* NORMALISE EVERYTHING
    
    -----------------------------------------*/
    
    
    /* Normalises margin and padding */
    
    
    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {
    
    	margin: 0;
    
    	padding: 0;
    
    }
    /* Normalises font-size for headers */
    
    
    h1, h2, h3, h4, h5, h6 {
    	
    	font-size: 100%;
    
    }
    
    
    
    /* Removes list-style from lists */
    
    
    ol, ul {
    		list-style: none;
    
    }
    
    
    
    /* Normalises font-style and font-weight to normal */
    
    
    address, caption, cite, code, dfn, em, strong, th, var {
    
    font-style: normal;
    	font-weight: normal;
    }
    
    /* Removes list-style from lists */
    
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    
    /* Removes border from fieldset and img */
    
    fieldset, img {
    	border: 0;
    }
    
    /* Left aligns text in caption and th */
    
    caption, th {
    	text-align: left;
    }
    
    /* Removes quotation marks from q */
    
    q:before, q:after {
    	content : '';
    }
    
    
    /* LAYOUT STYLES
    -----------------------------------------*/
    
    html { margin: 0px; }
    
    
    
    
    body {
    	text-align: center;                          
    	margin: 2% 0 2% 0;
    	padding: 0;
    	background-color: #333;
    }
    
    #wrapper {
    	position: relative;		/* Establishes this a position context for other elements */	
    	width: 710px;
    	height: 500px;					
    	margin: 0px auto;		/* to fix centering in Mozilla */
    	padding: 0;
    	border: 7px solid #fff;	
    	text-align: left;
    	background-color: #000;
    	
    }
    
    /* NAVIGATION
    -----------------------------------------*/
    
    /* Navigation Header - for non-visual browsers */ 
    #main_navigation h2 {
    	text-indent: -9999px;
    	position: absolute;
    }
    
    
    ul#nav_main {
    	height: 3em;		/* Determines nav link box height - must be same as line-height */
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	color: #fff;
    	
    	font: 0.7em/3 "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;		
    	letter-spacing: 2px;
    	
    	width: 100%;
    
    }
    
    
    
    ul#nav_main li {
    
    	display: inline;
    
    	white-space: nowrap;
    
    	margin: 0;
    
    	padding: 0;
    
    
    
    }
    
    
    ul#nav_main li a {
    	
    	float: left;		/* ensures each box displays right up against previous box */
    	
    	text-decoration: none;		/* removes underline rules for hyperlinks */
    	
    	color: #fff;
    	
    	padding: 0 1em 0 1em;		/* Determines WIDTH of boxes */
    	
    	border-bottom-style: solid;
    	border-bottom-width: 3px;		
    	border-left: 1px solid #ccc;			
    	background-color: #333;		
    }
    
    
    
    ul#nav_main li a#link1 {
    	border-bottom-color: #FF6600;
    }

    Code:
    /*****************************************\
    ||       Fade Script Version 4.0         ||
    ||   http://anarchos.xs.mw/fade.phtml    ||
    ||            (c) July 2001              ||
    || _____________________________________ ||
    || Created by:                           ||
    || Anarchos    > anarchos.xs.mw          ||
    || _____________________________________ ||
    || auto-startColor by Mike West          ||
    || mike@westman.org                      ||
    || _____________________________________ ||
    || uniqueID upgrade by DubMatrix         ||
    || http://www.princefari.com             ||
    || _____________________________________ ||
    || Color conversion from decimal to      ||
    || hex (dehexize function) by:           ||
    || Litejet > litejet@hotmail.com         ||
    || _____________________________________ ||
    || Fade, hex, setColor functions by:     ||
    || Dak Phoenix > phoenix-archetypes.com  ||
    || _____________________________________ ||
    || domouseover/out based on scripts by   ||
    || The Shadow  > www.icon.co.za/~andrewk ||
    ||                                       ||
    || _____________________________________ ||
    || Netscape v4+ support added by         ||
    || tk102 > zxcvbnm6012@yahoo.com         ||
    || Mar 24, 2004                          ||
    \*****************************************/
    
    
    
    
    // This part is configurable
    //------------------------------------------------
    startColor = "#CCCCCC"; // MouseOut link color
    endColor = "#FF6600" // MouseOver link color
    stepIn = 20; // delay when fading in
    stepOut = 25; // delay when fading out
    autoFade = false;
    sloppyClass = false;
    //------------------------------------------------
    
    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";
    
    var version = parseInt(navigator.appVersion)
    var appName = navigator.appName
    var ns4 = version>=4 && appName=="Netscape"
    
    if (ns4) { //Netscape 4+
    	document.onmouseover = doN4mouseover;
    	document.onmouseout = doN4mouseout;
    } else { //other
    	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 doN4mouseover(event) {
    	var srcElement=event.target;
    	if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))
    		nfade(startColor,endColor,srcElement,stepIn);
    }
    
    function doN4mouseout(event) {
    		var srcElement = event.target; 
    		if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))
    		 nfade(endColor,startColor,srcElement,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.borderBottomColor = "#"+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){  //check have we already faded this?
    		setColor(sr,sg,sb,eval(fadeId[0]));   // no, set the first color
    		var i = 1;
    		while(i < fadeId.length){             //get ready to fade
    			clearTimeout(fadeId[i]);
    			i++;
    		}
    	}
            //MSIE must setup timeouts using strings        
    	for(var i = 0; i <= step; i++) { //timeouts fall like dominos
    		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; // oneshot
    }
    function nfade(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){  //check have we already faded this?
    		setColor(sr,sg,sb,eval(fadeId[0]));   // no, set the first color
    		var i = 1;
    		while(i < fadeId.length){             //get ready to fade
    			clearTimeout(fadeId[i]);
    			i++;
    		}
    	}
            //Netscape can call SetTimeout using objects, making for more readable code
    	for(var i = 0; i <= step; i++) { 
    		fadeId[i+1] = setTimeout(
    					setColor,
    					i*step,
    					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
    					);
    	}
    	fadeId[0] = element; //oneshot
    }

    If you can help I would really appreciate it.
    I'm looking for a link exchange.
    contact me or head to:
    http://www.aheadcreative.co.uk

  2. #2
    SitePoint Zealot get_dave's Avatar
    Join Date
    Nov 2006
    Location
    England, UK
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've had 23 views and no one seems to know the answer - if anyone can help please just point me in the right direction. I'll do the hard work
    I'm looking for a link exchange.
    contact me or head to:
    http://www.aheadcreative.co.uk


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •