SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Fading Buttons

  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Location
    Canada
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fading Buttons

    Is there a script that can fade in pictures as you mouseover them that is also XHTML complient, or in css?

  2. #2
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wrote this one:

    Code:
    var setOpacity = 0.1;
    var unHighlighting = false;
    function high(imgObject, imgOpacity)
    {
     imgOpacity = imgOpacity ? imgOpacity : setOpacity;
     passObj = imgObject;
     if (window.imgHighlightInt && unHighlighting!=false)
      clearHighlight(unHighlighting, imgOpacity);
     if (window.imgHighlightInt)
      clearInterval(imgHighlightInt);
     imgHighlightInt = setInterval("doHighlight(passObj)", 35);
    }
    function low(imgObject, imgOpacity)
    {
     passObj = imgObject;
     passOpac = imgOpacity ? imgOpacity : setOpacity;
     if (window.imgHighlightInt)
      clearInterval(imgHighlightInt);
     imgHighlightInt = setInterval("undoHighlight(passObj, passOpac)", 10);
    }
    function doHighlight(imgObject)
    {
     if (imgObject.style.MozOpacity < 0.95)
      imgObject.style.MozOpacity = parseFloat(imgObject.style.MozOpacity) + 0.05;
     else if (imgObject.style.MozOpacity==0.95)
      imgObject.style.MozOpacity = 0.99;
     else if (imgObject.filters && imgObject.filters.alpha.opacity < 100)
      imgObject.filters.alpha.opacity += 5;
     else if (window.imgHighlightInt)
      clearInterval(imgHighlightInt);
     unHighlighting = imgObject;
    }
    function undoHighlight(imgObject, imgOpacity)
    {
     if (imgObject.style.MozOpacity == 0.99)
      imgObject.style.MozOpacity = 0.95;
     else if (imgObject.style.MozOpacity > imgOpacity)
      imgObject.style.MozOpacity = parseFloat(imgObject.style.MozOpacity) - 0.05;
     else if (imgObject.filters && imgObject.filters.alpha.opacity > (imgOpacity * 100))
      imgObject.filters.alpha.opacity -= 5;
     else if (window.imgHighlightInt)
      clearInterval(imgHighlightInt);
     unHighlighting = imgObject;
    }
    function clearHighlight(imgObject, imgOpacity)
    {
     if (imgObject.style.MozOpacity)
      imgObject.style.MozOpacity = imgOpacity;
     else if (imgObject.filters && imgObject.filters.alpha.opacity)
      imgObject.filters.alpha.opacity = (imgOpacity * 100);
    }
    I think it would work better if you stored an array or something with the unhighlighting objects, but this is my current implimentation.

    Usage:

    HTML Code:
    <img style="filter:Alpha(Opacity=10); -moz-opacity:0.1;" onmouseover="high(this, 0.1)" onmouseout="low(this, 0.1)" src="./valid-xhtml11.gif" alt="" />
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Location
    Canada
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! This worked great!


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
  •