PDA

View Full Version : Help with Modified Gradual Highlight Image Script



dotBomb
03-27-2010, 08:30 PM
:confused:

1) Script Title: Gradual Highlight Image Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/highlightgrad.htm

3) Describe problem:

Hi, I'm using a modified version of this script to accomplish the following: when the user's mouse enters an image inside of a <td/> the image will fade out and so the background of the <td/> appears. the events that fire the modified version of the gradual highlight script are hooked up to the foreground image of the <td/>. The background image is just hanging out waiting to gradually become visible when the user's mouse enters the foreground image and the foreground image fades to 0 opacity. It works okay. I only hooked the script up to the first two of the four images on this page, but if you go to the link:

http://www.papertraildesigns.com/indexSandbox.html

And pass your mouse (quickly) over the first two images (Invitations and Maps) ... you'll notice that one of the images becomes stuck in the middle of a transition and never makes it out until further user interaction.

If you pass your mouse (slowly) over one or the other there is no issue.

I'm hoping that if we can get this working, I can submit it to you as a fully functioning script that will accomplish the gradual fade-out / fade-in effect on image rollovers that is so the fad.

Anyway, the original script is really well written, simple and clean and I think there is a problem with setinterval / clearinterval order of operations getting messed up in my modified version.

Please view full source here:

http://www.papertraildesigns.com/indexSandbox.html

I have included the source for the script and sample HTML below ... I really appreciate any assistance.


<HEAD>
<STYLE type="text/css">

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

.gradualfade
{
filter:alpha(opacity=99);
-moz-opacity:0.99;
}

</STYLE>

<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
* Modified by Daniel Kemper 2010-03-26 to support fade out/fade in effect on image rollover
***********************************************/

Object.prototype.size = function()
{
var len = this.length ? --this.length : -1
for (var k in this)
len++
return len
}


var highlighting=null
var hightlighting2=null
functionArry = new Array()

function slowhigh(which, baseopacity)
{
if ((functionArry.size() > 0) && (functionArry[which.src] != null))
{

cleartimer(functionArry[which.src])
}

imgobj=which
browserdetect=which.filters ? "ie" : typeof which.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity, imgobj)
highlighting=setInterval("gradualshine(imgobj)",50)
functionArry[which.src] = highlighting
}

function slowlow(which2, baseopacity)
{
if ((functionArry.size() > 0) && (functionArry[which2.src] != null))
{

cleartimer(functionArry[which2.src])
}

imgobj2=which2
browserdetect=which2.filters ? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity, imgobj2)
highlighting2=setInterval("gradualfade(imgobj2)",50)
functionArry[which2.src] = highlighting2
}


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

function cleartimer(timedFunction)
{
if (timedFunction) clearInterval(timedFunction)
}

function gradualfade(cur)
{
if (browserdetect=="mozilla" && cur.style.MozOpacity>=0)
cur.style.MozOpacity=Math.min(parseFloat(cur.style.MozOpacity)-0.1, 0.99)
else if (browserdetect=="ie" && cur.filters.alpha.opacity>=0)
cur.filters.alpha.opacity-=10
else if (functionArry[cur.src])
clearInterval(functionArry[cur.src])
}

function gradualshine(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 (functionArry[cur2.src])
clearInterval(functionArry[cur2.src])
}

</script>
</HEAD>
<BODY>
<table width=655 height=166 border=0 cellspacing=0 cellpadding=0 style='border:none;'>
<tr>
<td width="167" background="midBannerRolloverSwap_1.png"><A HREF="invitations.html"><img border=0 class="gradualfade" src="midBannerRollover_1.png" onMouseOver="slowlow(this, 99); return setMsg('Invitations');" onMouseOut="slowhigh(this, 0); return setMsg('');"></A></td>
<td width="160" background="midBannerRolloverSwap_2.png"><A HREF="maps.html"><img border=0 class="gradualfade" src="midBannerRollover_2.png" onMouseOver="slowlow(this, 99); return setMsg('Invitations');" onMouseOut="slowhigh(this, 0); return setMsg('');"></A></td>
<td width="160"><A HREF="programs.html" onMouseOver="imageOn(2); return setMsg('Programs');" onMouseOut=imageOff(2); return setMsg('');"><img border=0 class="gradualfade" src="midBannerRollover_3.png"></A></td>
<td width="168"><A HREF="pt_ReceptionsAndMore.php" onMouseOver="imageOn(3); return setMsg('Receptions and More');" onMouseOut="imageOff(3); return setMsg('');"><img border=0 class="gradualfade" src="midBannerRollover_4.png"></A></td>
</tr>
</table>
</BODY>

jscheuer1
03-28-2010, 02:03 PM
That's an old script and not very cross browser. Also it seems "it can't walk and chew gum at the same time". Try:

http://home.comcast.net/~jscheuer1/side/files/fade_advanced_preset_write.htm

dotBomb
04-12-2010, 10:11 PM
John, this is exactly what I needed. Thank you!

Dan