Modified 'gradual highligh' script - works on safari now

[Courthold]

Hi all. While coding my site I came across the gradual highlight script (and then the modification at http://www.dynamicdrive.com/forums/s...ead.php?t=1527 to fade out as well. However as a Mac user, it has to work on safari, so I modified it slightly so it will work.

Javascript:


<script type="text/javascript">

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

var baseopacity=30

function slowhigh(which2){
imgobj=which2
browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
highlighting=setInterval("gradualfade(imgobj)",50)
}


function slowlow(which2){
cleartimer();
setTimeout(function() {gradualfadeout(which2);}, 50);
}

function instantset(degree){
if (browserdetect=="mozilla")
imgobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
imgobj.filters.alpha.opacity=degree
else
imgobj.style.opacity = degree/100;
}

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 (browserdetect!="mozilla") {
if (browserdetect!="ie") {
cur2.style.opacity=Math.min(parseFloat(cur2.style.opacity)+0.1, 0.99)
}
}
else if (window.highlighting)
clearInterval(highlighting)
}

function gradualfadeout(cur3){
cr3=setTimeout(function() {gradualfadeout(cur3);}, 50)
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
else if (cur3.style.opacity>0.3)
cur3.style.opacity=Math.min(parseFloat(cur3.style.opacity)-0.1)
if (browserdetect=="mozilla" && cur3.style.MozOpacity<=0.3)
clearTimeout(cr3);
else if (browserdetect=="ie" && cur3.filters.alpha.opacity<=30)
clearTimeout(cr3);
else if (cur3.style.opacity<=0.3)
clearTimeout(cr3);
}

</script>


CSS:


.gradualshine{
filter:alpha(opacity=30);
-moz-opacity:0.3;
opacity:0.3;
}

[cr3ative]

Excellent news - glad to see some interest in the script and modification.

I'm currently planning on purchasing an iBook before Apple ruin their computers with Intel processors, so I may well soon be able to help out more on the Mac side of things.

cr3ative
(You couldn't put the notice back in the copyright area that says I modified it, could you? Ta. It'd be a good idea to put your own mark in that area too, to keep track of usage online.)

[mwinter]

While coding my site I came across the gradual highlight script (and then the modification at http://www.dynamicdrive.com/forums/s...ead.php?t=1527 to fade out as well. However as a Mac user, it has to work on safari, so I modified it slightly so it will work.

To be honest, I'd have sincerely hoped that if you did read that thread, you'd have incorporated the much desired improvements I suggested. The script already contained duplicated code and bizarre string-based browser detection.

In the thread you reference, I posted a link to code that contains at least the principle of a good design. Unfortunately, it doesn't work as is because Konqueror and Safari don't support the getComputedStyle method. Removing that particular usage would just mean that the opacity couldn't be inherited from a style sheet; it would have to specified inline, or during a call to the fade script.

Mike

[Livia]

I tried your script in Safari and Firefox on Mac and the image stays dull... Did I do something wrong?

I entered the first part into the head of my page and the css part into my css - all I did was change the class to the img tag so that it affects all images...

Thanks for any help!

[Livia]

Duh.... ok... I put the CSS part into the image:hover in my css and now the image is bright when the page loads and becomes dull when I hover over it...

But I thought the script would do it the other way round??

That's what I need... and it should work on mac / safari ...

[ddadmin]

I'll try and run the modified script through Safari later in the week, and if it checks out fine, may incorporate the changes to the script.

[Livia]

I didn't really understand that...
does that mean there's a possibility to get it the way I need it??

That would be great!! Thanks!!!

[cr3ative]

clearTimeout(cr3);

Heh, I knew I had left a tag in the code somewhere.

[Livia]

I'll try and run the modified script through Safari later in the week, and if it checks out fine, may incorporate the changes to the script.

Are there any news about this script yet??

[Livia]

... oh my god - am I stupid or what???

I entered

img:hover{
filter:alpha(opacity=30);
-moz-opacity:0.3;
opacity:0.3;
}

into my css... as advised by Courthold...and the image was bright and turned dull on rollover...

But when I entered

img{
filter:alpha(opacity=30);
-moz-opacity:0.3;
opacity:0.3;
}

and

img:hover{
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
}

it worked...
I really don't know why I didn't think about that earlier...

except one thing:
I have a white background with padding applied on my images to have a white border around them.
Default status, the border is dull, too - but when I hover, the border stays dull...

Why??