JSFX Fading Image Rollovers? - There's a much better way!

**KennyP** · 11-12-2010, 08:10 AM

JSFX Image Rollovers - translucent Image Problem

Hi guys:

After hitting another bump on the site I'm working on, I hope you can help me solve it.

JSFX Image Rollovers works to display translucent PNG images on a menu. However, there are two problems. One of which I solved, but, at the expense of creating a new problem.

The recommended typical JSFX image menu item code is as follows:

Code:

<td background="menu/home_down.png">
<a href="/" target="_top" onMouseOver="JSFX.fadeIn('home')" onMouseOut="JSFX.fadeOut('home')">
<img src="menu/home_down.png" class="imgFader" name="home" width="164" height="38" border="0"></a></td>

You'll notice that the td background image is the same image as in the img src.
On page load, until after a link is hovered the first time, both copies of the same image display. When using opaque image, this is not a problem. However, when using translucent PNG images, they double the opacity; being the same image stacked over itself.

I solved that problem by substituting a clear transparent image in the src code, as follows, and it does prevent the above opacity problem on page load.

Code:

<td background="menu/home_down.png">
<a href="/" target="_top" onMouseOver="JSFX.fadeIn('home')" onMouseOut="JSFX.fadeOut('home')">
<img src="menu/blank.png" class="imgFader" name="home" width="164" height="38" border="0"></a></td>

However, since I substitued the clear transparent image in the src code, it created the following problem:

If you would please take a look at the site, http://www.billyjoeconor.com/ you'll quickly see the following:

If you move your mouse in a vertical direction, and you first hover over "HOME" or "FRIENDS," the fade-in image fades in perfectly.

If you move your mouse from there over the rest of the items, there is a flicker before the fade-in image.

After you hover all the flickering items one time, they no longer flicker the second time you hover them, and thereafter. Unless of course you refresh the page.

I assume that flicker is caused by the clear PNG image which is active on page load.

What I find peculiar is the fact that if you refresh the page, and you hover any of the otherwise flickering items from either side of them, moving your mouse in a horizontal direction, they don't flicker. The flickering occurs only when moving from one item to another with a vertical movement.

Do you guys have any idea how this can be solved?

Thanks,

Kenny

**jscheuer1** · 11-12-2010, 05:46 PM

I'd scrap that script and use jQuery. Replace:

Code:

<SCRIPT LANGUAGE="javascript" TYPE="text/javascript" src="scripts/JSFX_FadingRollovers.js"></SCRIPT>
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
<!--
JSFX.Rollover("home","menu/home_over_down.png");
JSFX.Rollover("biography","menu/biography_over.png");
JSFX.Rollover("discography","menu/discography_over.png");
JSFX.Rollover("estore","menu/e-store_over.png");
JSFX.Rollover("friends","menu/friends_over.png");
//-->
</SCRIPT>

with:

Code:

<style type="text/css">
.jqImgFader {
	width: 164px;
	height: 38px;
}
.jqImgFader img {
	visibility: hidden;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	var finOp = document.body.filters? 0.85 : 1;
	$('.jqImgFader').hover(function(){
		$(this).find('img').css({opacity: 0, visibility: 'visible'}).animate({opacity: finOp});
	}, function(){
		$(this).find('img').animate({opacity: 0});
	});
});
</script>

And replace:

HTML Code:

                            <table border="0" cellpadding="0" cellspacing="3">
                              <tr>
                               <td background="menu/home_down.png"><a href="/" target="_top" onMouseOver="JSFX.fadeIn('home')" onMouseOut="JSFX.fadeOut('home')"><img src="menu/blank.png" class="imgFader" name="home" width="164" height="38" border="0"></a></td>
                            </tr>                             
                              <tr>
                               <td background="menu/biography.png"><a href="biography.php" target="_top" onMouseOver="JSFX.fadeIn('biography')" onMouseOut="JSFX.fadeOut('biography')"><img src="menu/blank.png" class="imgFader" name="biography" width="164" height="38" border="0"></a></td>
                            </tr>
                              <tr>
                                <td background="menu/discography.png"><a href="discography.php" target="_top" onMouseOver="JSFX.fadeIn('discography')" onMouseOut="JSFX.fadeOut('discography')"><img src="menu/blank.png" class="imgFader" name="discography" width="164" height="38" border="0"></a></td>
                            </tr>
                              <tr>
                                <td background="menu/e-store.png"><a href="rhythmnbootsmusic/e-store/index.php" target="_top" onMouseOver="JSFX.fadeIn('estore')" onMouseOut="JSFX.fadeOut('estore')"><img src="menu/blank.png" class="imgFader" name="estore" width="164" height="38" border="0"></a></td>
                            </tr>
                              <tr>
                                <td background="menu/friends.png"><a href="friends.php" target="_top" onMouseOver="JSFX.fadeIn('friends')" onMouseOut="JSFX.fadeOut('friends')"><img src="menu/blank.png" class="imgFader" name="friends" width="164" height="38" border="0"></a></td>
                              </tr>
                            </table>

with:

HTML Code:

                            <table border="0" cellpadding="0" cellspacing="3">
                              <tr>
                               <td class="jqImgFader" background="menu/home_down.png"><a href="/" target="_top"><img src="menu/home_over_down.png" name="home" width="164" height="38" border="0"></a></td>
                            </tr>                             
                              <tr>
                               <td class="jqImgFader" background="menu/biography.png"><a href="biography.php" target="_top"><img src="menu/biography_over.png" name="biography" width="164" height="38" border="0"></a></td>
                            </tr>
                              <tr>
                                <td class="jqImgFader" background="menu/discography.png"><a href="discography.php" target="_top"><img src="menu/discography_over.png" name="discography" width="164" height="38" border="0"></a></td>
                            </tr>
                              <tr>
                                <td class="jqImgFader" background="menu/e-store.png"><a href="rhythmnbootsmusic/e-store/index.php" target="_top"><img src="menu/e-store_over.png" name="estore" width="164" height="38" border="0"></a></td>
                            </tr>
                              <tr>
                                <td class="jqImgFader" background="menu/friends.png"><a href="friends.php" target="_top"><img src="menu/friends_over.png" name="friends" width="164" height="38" border="0"></a></td>
                              </tr>
                            </table>

**KennyP** · 11-12-2010, 06:56 PM

John:

Thank you for your generous reply. I wasn't aware that the same effect could be achieved with jquery, and your generosity in also showing me exactly how to implement it is a big gift that has taken a big load off my mind. Although I'm able to put a site together, I'm strictly a copy and paste coder.

My gratitude to you, and also to your fellow coders/members here at dynamic drive who kindly and generously give of your expertise.

Kenny

**KennyP** · 11-13-2010, 12:31 AM

Hello again John:

After entering the jquery image fade code in the menu, all the menu items fade perfectly, without the bugs and limitations of the inferior jsfx.

However, although the fading worked perfectly on all pages, after a search was made, the search engine results page was adversely affected by the introduction of jquery
when viewed in IE. The page shifted about a quarter inch to the left of all other pages. In Firefox it did not shift. After trying different doctypes that made no difference, I
finally found the suggestion to add the following to center the page, and it works.

Code:

body {margin-left:auto; margin-right:auto;}

I curious tho. Why is this the only page that IE would not center without that addition? Also, when you get the opportunity, would you please let me know how to to set the
fade-in and fade-out time?

Many thanks for the help,

Kenny

PS - Please let me know if donations are accepted. I would like to do something to express my appreciation for your kindness and generosity.

**jscheuer1** · 11-13-2010, 05:26 PM

To really answer the first question I would have to analyze at least two pages, probably more. And I would have to see the page in question with and without this modification. The current page doesn't have it and I'm not even seeing the problem you describe when switching to other pages in IE 8 or IE 8 in IE 7 mode. The answer might be that this one page is the only one that has a set width for the body. But the current page does not, so unless that was added somewhere, there must be another reason. Also, the current page is in quirks mode, so the solution you have there will do nothing in IE unless the page is put into standards mode or the page already had left and right margins. However, your solution is slightly flawed. Instead of setting those and any margin or width properties for the body element (margin for the body should actually be 0), a container element for the entire page should have its properties so set. But it gets more complicated because for the current solution to work, the body must have a set width. That must be coming from somewhere else, but as I say, not on the current page. The new container div would need that set width and the body should no longer. Other things:

You may have something IE less than 8 (or some other particular version) set that I'm not detecting, that could possibly be a factor in this. What version of IE are you testing in?
Regardless of the DOCTYPE, if you preface that page with a comment like you currently have it, IE will always be in quirks mode.

For this particular page though, if setting the margin like that for the body works and causes no problems in any IE version 6+ or in other browsers, it's OK. But I'm not seeing the problem, so perhaps you're over thinking it and should leave it alone. Like maybe once all the pages are cleared from the cache in IE, the situation will right itself.

As for the fade time, I tried to match as closely as possible what you already had. But those times were slightly unequal - one for fade in, one for fade out. The way to control them is here, additions highlighted:

Code:

<script type="text/javascript">
jQuery(function($){
	var finOp = document.body.filters? 0.85 : 1;
	$('.jqImgFader').hover(function(){
		$(this).find('img').css({opacity: 0, visibility: 'visible'}).animate({opacity: finOp}, 500);
	}, function(){
		$(this).find('img').animate({opacity: 0}, 500);
	});
});
</script>

Those are duration (from the manual on animation):

Duration

Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively.

The first one is fade in, the second is fade out. By not setting them, I got the default which appeared close enough to my eye. I believe that's 500 as Ive put in there. It could be anything between 200 and 600, you'd think 400 - I'm just not sure at the moment.

I noticed - Setting the number too low (too fast) and the effect wasn't really noticed. Setting it too high (too slow) and the effect dragged out for so long that any rapid movements of the mouse in the area of the triggers looked pretty bad.

I'm not aware of any donations being accepted at Dynamic Drive. I imagine they do pretty well via ad revenue and private arrangements with clients. I do know that the net worth of the site is quite high insofar as what the domain name would command on the open market. If I were them, I'd sell a non-controlling amount of shares in it, either privately or publicly.

Donations are accepted by me personally (I have no real stake in Dynamic Drive, it's just one of my favorite sites) and by charities. See my signature below each post for donation options. The last two are to me, the others are to two of my favorite charities.

**KennyP** · 11-14-2010, 10:46 AM

As it is working, I'll take your advice and just leave it alone for now.

In the meantime, I've tried sending you a PM, but the messaging system doesn't seem to work. When I click submit, no indication is given that it was sent. Nor does it appear in the Sent messages box.

So, here it is...

[Most of PM deleted, it went through twice]

I'm now curious regarding another feature we wanted to add. When a menu item is clicked, can jquery be used to perform the function of fading out the entire content of the div beneath the menu, down to the red horizontal footer bar, and then fade-in the content of that div which appears on all the other pages?

I'm now barely approximating that look by having a simple fade-in script fade-in the content of that div at every new page load; a very sorry substitute.

**jscheuer1** · 11-14-2010, 07:28 PM

Replace:

Code:

<script src="scripts/opacityFade.js" type="text/javascript"></script>
<script>window.onload = opacity('d1', -130, 100, 440)</script>

with:

Code:

<script src="scripts/jqOpacityFade.js" type="text/javascript"></script>

in scripts/jqOpacityFade.js put (for onload):

Code:

(function($){
	$('head').append('<style type="text/css">#d1 {visibility: hidden;}</style>');
	$(window).bind('load', function(){
		$('#d1').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 700, 'linear', function(){
			if(this.style.getAttribute){
				this.style.removeAttribute('filter');
			}
		});
	});
})(jQuery);

Or put (for document ready, happens sooner, but is perhaps less dramatic):

Code:

(function($){
	$('head').append('<style type="text/css">#d1 {visibility: hidden;}</style>');
	$(function(){
		$('#d1').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 700, 'linear', function(){
			if(this.style.getAttribute){
				this.style.removeAttribute('filter');
			}
		});
	});
})(jQuery);

Change:

Code:

<div style="margin-left:44px; margin-top:40px; margin-bottom: 22px;  height:260px; width:713px; filter:alpha(opacity=0); -moz-opacity:0; opacity:0; overflow:hidden;" id="d1">

to:

Code:

<div style="margin-left:44px; margin-top:40px; margin-bottom: 22px; height:260px; width:713px; overflow:hidden;" id="d1">

Those styles can go in the stylesheet.

This not only enables this via jQuery, but also allows the content to be seen in non-javascript browsers.

To that end, make the menu functional in those browsers by adding the highlighted as shown:

Code:

 . . . ground-color:transparent; 
	border:none; 
	cursor: pointer;
}
.theTicker {
	font-size:16px; color:white; font-weight:normal;
}
.jqImgFader {
	width: 164px;
	height: 38px;
}
.jqImgFader a {
	width: 164px;
	height: 38px;
	display: block;
}
.jqImgFader img {
	visibility: hidden;
}
-->
</style>

In an unrelated matter, get rid of:

Code:

<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>

You're not using it and it throws a non-fatal error.

**KennyP** · 11-15-2010, 12:35 AM

Thanks so much John. I entered the new fade code into test pages, and I much prefer it over the previous code, which thinned
out the fonts when viewed in IE.
Unfortunately however, I discovered sevaral problems In IE, the jquery fade code prevents the flexcroll cross-browser custom
scrollbars from displaying. In Firefox, the scrollbars are not affected. Below are the test pages, Biography and Discography, which
do not display the scrollbars as compared to the previous linked pages, which do display custom scrollbars.

http://www.billyjoeconor.com/biograp...t-new-fade.php

http://www.billyjoeconor.com/discogr...t-new-fade.php

Aso, in IE only, since the addition of jqOpacityFade, it seems to affect the smoothness of jqImageFade in the menu.

The register object code is actually being used for the background sound-effect preceding it. I've not been able to find a non-flash
player that could loop audio without an audible break. If you know of one, I'll gladly get rid of the entire code; I don't like Flash.

Code:

<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1" height="1">
    <param name="movie" value="flash/brook.swf">
    <param name="quality" value="high">
    <param name="wmode" value="transparent">
    <param name="swfversion" value="6.0.65.0">
</object>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>

Thanks again,

Kenny

**jscheuer1** · 11-15-2010, 04:06 PM

Last things first, no. There is no swfobject so:

Code:

<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>

does in fact do nothing but cause a non-fatal error. This is because (from the discography page's source code):

Code:

<script type="text/javascript" src="mediaplayer/swfobject.js"></script>

creates a SWFObject, not a swfobject.

You could try changing it to that:

Code:

<script type="text/javascript">
<!--
SWFObject.registerObject("FlashID");
//-->
</script>

But by my reading there is no SWFObject.registerObject. So now you would have a different non-fatal error.

Without all that it works fine. So just get rid of:

Code:

<script type="text/javascript" src="mediaplayer/swfobject.js"></script>

and:

Code:

<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>

Or find a version of swfobject.js that supports that code.

________________________

On to the flex scroll, that's complicated. Remove the BOM (highlighted) from the beginning of the file:

Code:

/*
This license text has to stay intact at all times:
Author: Emrah BASKAYA @ www.hesido.com

This script is registered for use by:
Billy Joe Conor
On the following domain:
billyjoeconor.com
Under the following licence agreement:
http://www.hesido . . .

and at almost the end of its very long line:

Code:

 . . . nm'.split('|'),0,{}))

add the highlighted:

Code:

 . . . nm'.split('|'),0,{}).replace(/fleXenv\.fleXcrollInit\(\);/,''))

And change the scripts/jqOpacityFade.js code to:

Code:

(function($){
	$('head').append('<style type="text/css">#d1 {visibility: hidden;}</style>');
	$(function(){
		$('#d1').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 1200, 'linear', function(){
			if(typeof fleXenv.globalInit === 'function'){
				fleXenv.globalInit();
			}
			if(this.style.getAttribute){
				this.style.removeAttribute('filter');
			}
		});
	});
})(jQuery);

We can no longer do it onload. Perhaps we could, but that would require more extensive hacking of the flexiscroll.js file. The TOS appear to allow that. But even just this much may cause it to stop working - I couldn't find the mechanism whereby it enforces the license. If it does some kind of hash calc, even though this worked locally, it might not live.

As for the other problem in IE with the scripts/jqOpacityFade.js file, I see no difference there with the current discography page's code. IE and other browsers have always had trouble 'walking and chewing gum at the same time' with certain script combos. It doesn't appear all that bad to me, hardly noticeable, and as I say - same as the present page. This sort of thing is often browser and/or CPU/RAM specific.

**KennyP** · 11-16-2010, 01:22 AM

John, you are good! That little hack you made to the scrollbar file fixed all. I just uploaded live versions of the Discography and Biography pages, and as you can see, the scrollbars now display, the div content fades perfectly, and of course the menu's transition fade works as well. I'll now alter all the other pages accordingly.

Regarding the BOM you see, /*, at the start of the scrollbar file, I checked the file and it's not actually there; it simply starts with /*. However, when I did open it (in Dreamweaver), it detects an error on line 17. Maybe that causes the BOM to appear when you view it?

As you suggested, I removed the swfobject references, and the background sound still works. Strange, when I first added that sound, the directions were to include them. Not only did they cause an error, they were totally useless.

Finally, you had made reference to the pages being in Quirks mode. I long removed the link from the doctype, leaving only <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">, because the inclusion of the URL made the search field (at the top of the page) display as 179X29 pixels, when it is only 164X22 pixels. I tried all the popularly listed doctypes, and they all caused the same distortion. Not having the expertise to realize the reason for it, I took the easy path and simply chopped off the URL. Is there a problem with the way I entered the size for the search field which causes the doctype to distort it?

Many Thanks!

Kenny