Gradual Highlight Image Script

**dmp2005** · 01-28-2005, 03:16 PM

Gradual Highlight Image Script
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.

HTML Code:

<!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

Originally Posted by cr3ative

<!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.

Code:

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:

Code:

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:

Code:

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

Originally Posted by mwinter

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:

Code:

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:

Code:

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

Originally Posted by cr3ative

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.

HTML Code:

<!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

Thread: Gradual Highlight Image Script

Thread Tools

Search Thread

Gradual Highlight Image Script

Thanks!

Bookmarks

Bookmarks

Posting Permissions