SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Mar 2002
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What technique are they using??? =)

    Please visit the url I have listed here, and if you know how they do it and/or what the technique is called, I'd love to hear from you!! I think it is amazing.

    Go to http://www.nutrasweet.com/infocenter...tact/index.asp

    And look at the links under the "marbles". When you mouseover them, they change colours, slowly, like a very subtle glow. What is that? Bett yet, what is the code? =D

    Thanks guys n gals

    Aaron

  2. #2
    SitePoint Guru okrogius's Avatar
    Join Date
    Mar 2002
    Location
    US
    Posts
    622
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's a simple javascript.

    Code:
    /*****************************************\
    ||       Fade Script Version 1.01        ||
    ||  http://www.xs.mw/anarchos/fade.js    ||
    ||              (c) 1999                 ||
    || ___________________________________   ||
    ||                                       ||
    || Fade, hex, setbgColor functions by:   ||
    || Dak Phoenix > phoenix-archetypes.com  ||
    || ___________________________________   ||
    ||                                       ||
    || Modifications for mouseover by:       ||
    || Anarchos    > i.am/Anarchos           ||
    || ___________________________________   ||
    || 	  					     ||
    || Some sections based on scripts by     ||
    || The Shadow  > www.icon.co.za/~andrewk ||
    || ___________________________________   ||
    ||						     ||
    || Questions/Comments/etc. ->		     ||
    ||						     ||
    || Please send any questions or comments ||
    || on the script to:			     ||	
    || anarchos3@hotmail.com                 ||
    ||					           ||
    \*****************************************/
    
    document.onmouseover = domouseover;
    document.onmouseout = domouseout;
    
    function domouseover() {
      if(document.all){
      srcElement = window.event.srcElement;
      if (srcElement.className.indexOf("fade") > -1) {
            var linkName = srcElement.name;
          fadein(linkName);
          }
          }
    }
    
    function domouseout() {
      if (document.all){
      srcElement = window.event.srcElement;
      if (srcElement.className.indexOf("fade") > -1) {
            var linkName = srcElement.name;
          fadeout(linkName);
          }
          }
    }
    
    function makearray(n) {
        this.length = n;
        for(var i = 1; i <= n; i++)
            this[i] = 0;
        return this;
    }
    
    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";
    
    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 setbgColor(r, g, b, element) {
          var hr = hex(r); var hg = hex(g); var hb = hex(b);
          element.style.color = "#"+hr+hg+hb;
    }
    
    function fade(sr, sg, sb, er, eg, eb, step, direction, element){
        for(var i = 0; i <= step; i++) {
    setTimeout("setbgColor(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);
        }
    }
    
    
    
    
    
    function fadeout(element) {
    
    
              
        fade(255,102,0, 103, 103, 103, 30, 1, element);
    }
    
    
    
    function fadein(element) {
    
    
    
        fade(103, 103, 103, 255, 102, 0, 10, 1, element);
    }
    /*ignore this >>>>*/
    function fadeIn2(id){
    	fade(255,255,255, 88,118,152, 25, 1, id);
    }
    
    function fadeOut2(id){
    	fade(88,118,152, 255,255,255, 29, 1, id);
    }
    You might have to adjust some hex variables.

  3. #3
    SitePoint Member
    Join Date
    Mar 2002
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't get the code above to work. To be honest, I don't even know what tags to put at the beginning and end.

    Anyone have an idea? I really want to get this to work!

    Thanks!!

    aaron

  4. #4
    . Ruchir's Avatar
    Join Date
    Feb 2002
    Location
    Sydney
    Posts
    1,863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cool code. i like it myself and would like to know. BTW , the site is designed by www.designkitchen.com .

  5. #5
    SitePoint Guru okrogius's Avatar
    Join Date
    Mar 2002
    Location
    US
    Posts
    622
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Search google for fade.js. Upload it then call it using a js tag with a src parameter.

  6. #6
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    moved to a more appropriate forum
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS


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
  •