PDA

View Full Version : Gradual Highlight Image Script



dmp2005
01-28-2005, 03:16 PM
Gradual Highlight Image Script
http://dynamicdrive.com/dynamicindex4/highlightgrad.htm (http://http://dynamicdrive.com/dynamicindex4/highlightgrad.htm)

Is there anyway to make this script do the reverse? For example, the image starts off fully displayed, but when moused over it gradually fades out?

cr3ative
01-28-2005, 04:30 PM
Try this for size, it fades to half opacity on mouse over. I can make it fade more or less for you if need be - tell me what you need doing to it.

/edit: See Mike's post below if you would like a different script which acts in the same way. Also edited the Doctype declaration, cheers.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Transitional 4.01//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">

.gradualshine{
filter:alpha(opacity=100);
-moz-opacity:1;
}

</style>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<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=99


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()
instantset(baseopacity)
}

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>0.5)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)-0.1)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity>50)
cur2.filters.alpha.opacity-=10
else if (window.highlighting)
clearInterval(highlighting)
}

</script>
</head>

<body>

<p>
<img class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)" src="picture.jpg" width="165" height="182" alt="Example

Image"></p>

</body>

</html>

cr3ative

dmp2005
01-28-2005, 06:53 PM
This is perfect! Thank you so much. I'm making a surprise image gallery for my sister-in-law's baby.

cr3ative
01-28-2005, 07:01 PM
No problem - I might use the script myself :)

cr3ative

mwinter
01-28-2005, 08:25 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML TRANSITIONAL 4.01//EN"
"http://www.w3.org/TR/html4/loose.dtd">Public identifiers (the first quoted string) are case-sensitive, if I remember correctly. Not writing "Transitional" in title-case may throw user agents into quirks-mode.



browserdetect=which2.filters? "ie" :
typeof which2.style.MozOpacity=="string"? "mozilla" : ""It should be more efficient to leave the detection as standard feature detection rather than string comparison:


function setOpacity(element, opacity) {
if(element.filters) {
element.filters.alpha.opacity = opacity;
} else if(element.style) {
element.style.MozOpacity = opacity / 100;
}
}That could be optimised to remove the testing after the first call:


function setOpacity(element, opacity) {
var f = element.filters
? function(e, o) {e.filters.alpha.opacity = o;}
: element.style
? function(e, o) {e.style.MozOpacity = o / 100;}
: function() {},
r = f(element, opacity);
element = null; setOpacity = f;
return r;
}The outer function examines the object and overwrites itself with the most applicable inner function.

Obviously, you can do the same with a getOpacity function. This would make gradualfade much simpler.

Personally, I think you should pass an argument (as required above) rather than rely on a global. Globals should really be used very sparingly. It makes clashes between scripts far more likely.

I haven't run the code you posted, however it does seem similar to something I wrote (http://www.mlwinter.pwp.blueyonder.co.uk/clj/yawnmoth/fade.html) last month for a poster on comp.lang.javascript.

I should note that the rendering error in Gecko-based user agents with the left-most image is intentional. It was meant to show a bug where reaching an opacity of 100% would cause the fade to "lock" temporarily. The commented code near the end of fade.js prevents this by changing target opacities of 100% to 99%. When uncommented, both images will fade as desired.

[edit:]Moreover, there's a new version (http://www.mlwinter.pwp.blueyonder.co.uk/clj/yawnmoth/fade-new.js) of the script which I had previously written but forgot about.

Mike

ddadmin
02-01-2005, 12:26 AM
Useful feedback Mike! There's always room for improving on a DD script, such as in the area of efficiency. In this case, it probably wouldn't matter too much though, unless the effect is always only applied to one element at any one time.

martino
06-15-2006, 05:03 PM
Public identifiers (the first quoted string) are case-sensitive, if I remember correctly. Not writing "Transitional" in title-case may throw user agents into quirks-mode.

It should be more efficient to leave the detection as standard feature detection rather than string comparison:


function setOpacity(element, opacity) {
if(element.filters) {
element.filters.alpha.opacity = opacity;
} else if(element.style) {
element.style.MozOpacity = opacity / 100;
}
}That could be optimised to remove the testing after the first call:


function setOpacity(element, opacity) {
var f = element.filters
? function(e, o) {e.filters.alpha.opacity = o;}
: element.style
? function(e, o) {e.style.MozOpacity = o / 100;}
: function() {},
r = f(element, opacity);
element = null; setOpacity = f;
return r;
}The outer function examines the object and overwrites itself with the most applicable inner function.

Obviously, you can do the same with a getOpacity function. This would make gradualfade much simpler.

Personally, I think you should pass an argument (as required above) rather than rely on a global. Globals should really be used very sparingly. It makes clashes between scripts far more likely.

I haven't run the code you posted, however it does seem similar to something I wrote (http://www.mlwinter.pwp.blueyonder.co.uk/clj/yawnmoth/fade.html) last month for a poster on comp.lang.javascript.

I should note that the rendering error in Gecko-based user agents with the left-most image is intentional. It was meant to show a bug where reaching an opacity of 100% would cause the fade to "lock" temporarily. The commented code near the end of fade.js prevents this by changing target opacities of 100% to 99%. When uncommented, both images will fade as desired.

[edit:]Moreover, there's a new version (http://www.mlwinter.pwp.blueyonder.co.uk/clj/yawnmoth/fade-new.js) of the script which I had previously written but forgot about.

Mike


Hello Mike,
Great script btw, is there a way to reverse the transition. ie. have the inital state 100% but on rollover to fade 50%.

Thanks!
Martin

martino
06-15-2006, 05:20 PM
Try this for size, it fades to half opacity on mouse over. I can make it fade more or less for you if need be - tell me what you need doing to it.

/edit: See Mike's post below if you would like a different script which acts in the same way. Also edited the Doctype declaration, cheers.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Transitional 4.01//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">

.gradualshine{
filter:alpha(opacity=100);
-moz-opacity:1;
}

</style>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<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=99


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()
instantset(baseopacity)
}

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>0.5)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)-0.1)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity>50)
cur2.filters.alpha.opacity-=10
else if (window.highlighting)
clearInterval(highlighting)
}

</script>
</head>

<body>

<p>
<img class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)" src="picture.jpg" width="165" height="182" alt="Example

Image"></p>

</body>

</html>

cr3ative

Thanks for reversing the transition, but is there a way to speed up the fade?

Regards,
Martin