Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Mar 2004
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    filter:alpha & -moz-opacity

    I found a fade in/fade out script on Google which goes like this:

    Code:
    function high(which2){
    theobject=which2
    highlighting=setInterval("highlightit(theobject)",50)
    }
    function low(which2){
    clearInterval(highlighting)
    if (which2.style.MozOpacity)
    which2.style.MozOpacity=0.5
    else if (which2.filters)
    which2.filters.alpha.opacity=50
    }
    
    function highlightit(cur2){
    if (cur2.style.MozOpacity<1)
    cur2.style.MozOpacity=parseFloat(cur2.style.MozOpacity)+0.1
    else if (cur2.filters&&cur2.filters.alpha.opacity<100)
    cur2.filters.alpha.opacity+=10
    else if (window.highlighting)
    clearInterval(highlighting)
    }
    And here is how the img tag must look:

    Code:
    <img src="images/button.gif" border="0" height="31" width="88"
    style="filter:alpha(opacity=50);-moz-opacity:0.5" onMouseover="high(this)"
    onMouseout="low(this)">
    This script makes it so when you have your mouse over the image, there is a graduate fade in. However, when you take your mouse out, it fades out instantly.

    Would there be a way to make the fade out graduate?
    Thanks a lot.
    (I hope I posted this in the good section)

  • #2
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You basically make the low() function be the opposite of high(). I had to modify it slightly to eliminate a flickering effect. Replace your current functions with the following:
    Code:
    <script>
    var timeoutID = -1;
    function high(which2) {
     if(timeoutID != -1)
      clearTimeout(timeoutID);
     
     theobject=which2;
     highlightit(theobject);
    }
    
    function low(which2) {
     if(timeoutID != -1)
      clearTimeout(timeoutID);
    
     theobject=which2;
     lowlightit(theobject);
    }
    
    function lowlightit(cur2){
     timeoutID=setTimeout("lowlightit(theobject)",50);
     if (cur2.style.MozOpacity>0)
      cur2.style.MozOpacity=parseFloat(cur2.style.MozOpacity)-0.1;
     else if (cur2.filters&&cur2.filters.alpha.opacity>0)
      cur2.filters.alpha.opacity-=10;
     else if (window.highlighting)
      clearInterval(lowlighting);
    }
    
    function highlightit(cur2){
     timeoutID=setTimeout("highlightit(theobject)",50);
     if (cur2.style.MozOpacity<1)
      cur2.style.MozOpacity=parseFloat(cur2.style.MozOpacity)+0.1;
     else if (cur2.filters&&cur2.filters.alpha.opacity<100)
      cur2.filters.alpha.opacity+=10;
     else if (window.highlighting)
      clearInterval(highlighting);
    }
    </script>
    And your img should stay the same:
    Code:
    <img src="http://192.168.1.50/pics/signed.gif" border="0" height="31" width="88"
    style="filter:alpha(opacity=0);-moz-opacity:0" onMouseover="high(this)"
    onMouseout="low(this)">
    Let me know how it works out.
    Sadiq.
    Last edited by sad69; 07-05-2004 at 06:11 PM. Reason: Just cleaned up the coding..

  • #3
    Regular Coder ArcticFox's Avatar
    Join Date
    Jan 2004
    Location
    Vostok Station, AQ
    Posts
    602
    Thanks
    35
    Thanked 3 Times in 3 Posts
    Ooooo...

    Iíve been looking for a cross-browser (IE/NS) one of these.

    Thank you!
    <div> - putting your mind in a box since 1997

  • #4
    New to the CF scene
    Join Date
    Aug 2004
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is there any way to do the same thing with Opera?
    (Opera compatible code for filter:alpha or -moz-opacity)

  • #5
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Quote Originally Posted by trustle
    Is there any way to do the same thing with Opera?
    No, not yet. Safari 1.2 and recent Mozilla versions use the CSS3 opacity property, so that's the one you should use for future compatibility.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #6
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sorry to bring up an old post, but,

    how can you make it so if the browser doesnt support this, it just shows the image?

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I thought Safari used "-khtml-opacity" ?

    Either way, there are four opacity models at the moment - IE's filter, -moz-opacity in older moz builds, -khtml-opacity in some KHTML browsers (safari and konqueror), and the standard opacity property.

    I have a script which caters for all four -- http://www.brothercake.com/site/reso...s/transitions/ -- the first one (swap-fade) has the fade-in / fade-out controls you wanted.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #8
    Regular Coder ArcticFox's Avatar
    Join Date
    Jan 2004
    Location
    Vostok Station, AQ
    Posts
    602
    Thanks
    35
    Thanked 3 Times in 3 Posts

    Internet Explorer

    Quote Originally Posted by veganCoder
    sorry to bring up an old post, but,

    how can you make it so if the browser doesnt support this, it just shows the image?
    That's what the browser will do. When using the CSS, the browsers pull the transparency down from full; if the browser doesn't like/use the CSS, then the image will be displayed as usual.
    <div> - putting your mind in a box since 1997


  •  

    Posting Permissions

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