Gradual Image Highlight Modification

[cr3ative]

I found this script:
http://www.dynamicdrive.com/dynamicindex4/highlightgrad.htm

And loved it. But I wanted a script like this:
http://www.dynamicdrive.com/dynamicindex4/highlightgrad2.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:


/***********************************************
* 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

[mwinter]

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:


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 (http://www.dynamicdrive.com/forums/showthread.php?t=1522) 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.)

[cr3ative]

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 :)


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