Results 1 to 3 of 3

Thread: Gradual Image Highlight Modification

  1. #1
    Join Date
    Aug 2004
    Location
    Brighton
    Posts
    1,563
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Gradual Image Highlight Modification

    I found this script:
    http://www.dynamicdrive.com/dynamici...hlightgrad.htm

    And loved it. But I wanted a script like this:
    http://www.dynamicdrive.com/dynamici...lightgrad2.htm

    Which fades back out again. Problem was, the second script didn't work in any browser except IE. So I went back to the original script (version one) and modified it to fade in and out, cross-browser.

    This script has been tested on Netscape 7.1, Internet Explorer 6, Firefox 1.0, Opera 7.23 and K-Meleon 0.9. It works in all these browsers, except Opera.(Although it seems a majority of scripts dislike Opera )

    This is the new SCRIPT block (the style block stays the same, as does the IMG tag implementation:

    Code:
    /***********************************************
    * Gradual Highlight image script-  Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    * Modification by cr3ative to fade out again.
    ***********************************************/
    
    var baseopacity=30
    
    function slowhigh(which2){
    imgobj=which2
    browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""
    instantset(baseopacity)
    highlighting=setInterval("gradualfade(imgobj)",20)
    }
    
    function slowlow(which2) {
      cleartimer();
      setTimeout(function() {fadeoutest(which2);}, 20);
    }
    
    function instantset(degree){
    if (browserdetect=="mozilla")
    imgobj.style.MozOpacity=degree/100
    else if (browserdetect=="ie")
    imgobj.filters.alpha.opacity=degree
    }
    
    function cleartimer(){
    if (window.highlighting) clearInterval(highlighting)
    }
    
    function gradualfade(cur2){
    if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
    cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
    else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
    cur2.filters.alpha.opacity+=10
    else if (window.highlighting)
    clearInterval(highlighting)
    }
    
    function fadeoutest(cur3){
    cr3=setTimeout(function() {fadeoutest(cur3);}, 20)
    if (browserdetect=="mozilla" && cur3.style.MozOpacity>0.3)
    cur3.style.MozOpacity=Math.min(parseFloat(cur3.style.MozOpacity)-0.1)
    else if (browserdetect=="ie" && cur3.filters.alpha.opacity>30)
    cur3.filters.alpha.opacity=cur3.filters.alpha.opacity-10
    if (browserdetect=="mozilla" && cur3.style.MozOpacity<=0.3)
    clearTimeout(cr3);
    if (browserdetect=="ie" && cur3.filters.alpha.opacity<=30)
    clearTimeout(cr3);
    }
    This should, fingers crossed, work on all modern browsers.

    cr3ative
    Last edited by cr3ative; 01-28-2005 at 07:40 PM.
    A retired member, drop me a line through my site if you'd like to find me!
    cr3ative media | read the stickies

  2. #2
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by cr3ative
    It works in all these browsers, except Opera.
    Opera doesn't support opacity yet. However, as it is now part of CSS 3, the next version might. I heard a rumour that Opera will have better CSS support than Mozilla.

    (Although it seems a majority of scripts dislike Opera )
    Generally because such scripts are badly written. Opera is a very capable browser. What doesn't help is code like:

    Code:
    var is_ie = !!(document.all && document.getElementById);
    Opera will evaluate this to true as it does implement both. Code then goes on to assume it's dealing with recent versions of IE when it's not. This is why browser detection (in any form) should be avoided.

    The code I linked to in the related thread should have similar support, including IE5.5, Safari and Konqueror. That said I don't have the latter two, nor K-Meleon, and IE5.5 acts strangely. However, I am running several IE versions, all in XP and some things don't work as they should - I'd need a standalone copy.

    If the approaches we used for IE were combined[1] - possible with conditional comments - optimal support should increase to IE4+.

    Mike


    [1] Microsoft asserts that the version I use should be preferred for IE5.5+. (I didn't even know your approach existed.)

  3. #3
    Join Date
    Aug 2004
    Location
    Brighton
    Posts
    1,563
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Opera doesn't support opacity yet. However, as it is now part of CSS 3, the next version might. I heard a rumour that Opera will have better CSS support than Mozilla.
    Well, that explains it

    Code:
    var is_ie = !!(document.all && document.getElementById);
    This was already in the script, and I thought best not to touch it - but in retrospect I can see what you mean.

    (K-Meleon is another Mozilla based browser, but more lightweight)

    cr3ative
    A retired member, drop me a line through my site if you'd like to find me!
    cr3ative media | read the stickies

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
  •