[RESOLVED] On hover effect not working too well

**thegreatdanton** · 04-22-2011 07:58 AM

Hi,

I'm trying to get the hover effect working on a new website I'm designing. The link to the website is:

http://www.woodlandprint.com/newwebsite

On the homepage there are 4 divs, each with a new image appearing on hover. However, it's not working too well with Internet Explorer. Seems to be flickering. I would appreciate any assistance in rectifying this or if there is another way I can improve the hover effect then I would like to hear your thoughts. Any help would be greatly appreciated.

HTML Code

HTML Code:

<div id="slides">
<div id="slideleft">
<div id="slidewelcome">
	<h2 class="slidewelcome">welcome to woodland print...</h2>
</div>
<a href="http://www.woodlandprint.com/newwebsite/welcome/design"><div id="slidedesign"></div></a>
<a href="http://www.woodlandprint.com/newwebsite/welcome/print"><div id="slideprint"></div></a>
<a href="http://www.woodlandprint.com/newwebsite/welcome/signage"><div id="slidesignage"></div></a>
</div>
<div id="slideright"></div>
</div>

CSS Code

Code:

#slides {background:#ffffff; border-top: 3px solid #DCE4EB;border-bottom:1px solid #D4DCE2;}
#slideleft {width: 500px; height: 400px; float: left; background:#ffffff;}
#slidewelcome{width: 500px; height: 80px; float: left;}
#slides h2.slidewelcome{font-family: Arial, Verdana; font-size: 28px; color: #659730; margin: 30px 0px 0px 70px;}
#slidedesign{width: 198px; height: 90px; float: left; margin: 10px 0 0 235px; background: #ffffff url(http://www.woodlandprint.com/newwebsite/wp-content/uploads/2011/04/design.gif);}
#slidedesign:hover{width: 198px; height: 90px; float: left; margin: 10px 0 0 235px; background: #ffffff url(http://www.woodlandprint.com/newwebsite/wp-content/uploads/2011/04/design1.gif);}
#slideprint {width: 181px; height: 90px; float: left; margin: 10px 0 0 35px; background: #ffffff url(http://www.woodlandprint.com/newwebsite/wp-content/uploads/2011/04/print1.gif); background-repeat: no-repeat;}
#slideprint:hover {width: 181px; height: 90px; margin: 10px 0 0 35px; background: #ffffff url(http://www.woodlandprint.com/newwebsite/wp-content/uploads/2011/04/print.gif); background-repeat: no-repeat;}
#slidesignage {width: 255px; height: 90px; float: left; margin: 10px 0 0 85px; background: #ffffff url(http://www.woodlandprint.com/newwebsite/wp-content/uploads/2011/04/signage1.gif); background-repeat: no-repeat;}
#slidesignage:hover {width: 255px; height: 90px; margin: 10px 0 0 85px; background: #ffffff url(http://www.woodlandprint.com/newwebsite/wp-content/uploads/2011/04/signage.gif); background-repeat: no-repeat;}

#slideright{width: 520px; height: 400px; background: #ffffff url(http://www.woodlandprint.com/newwebsite/wp-content/uploads/2011/04/frog.jpg); margin: 0px 30px 0px 550px;}
#slideright:hover{width: 520px; height: 400px; background: #ffffff url(http://www.woodlandprint.com/newwebsite/wp-content/uploads/2011/04/frog1.jpg); margin: 0px 30px 0px 550px;}

**ralphchadkirk** · 04-22-2011 08:34 AM

The browser has to download the hover image the first time you hover over it. Hence it goes white, and then appears, as it downloads.

You can solve it by putting this for each over image after the <body> tag.

HTML Code:

<img src="path/to/image.jpg" class="noshow" />

Code:

.noshow {
display: none;
}

That should solve it.

**thegreatdanton** · 04-22-2011 09:06 AM

Originally Posted by ralphchadkirk

The browser has to download the hover image the first time you hover over it. Hence it goes white, and then appears, as it downloads.

You can solve it by putting this for each over image after the <body> tag.

HTML Code:

<img src="path/to/image.jpg" class="noshow" />

Code:

.noshow {
display: none;
}

That should solve it.

Thank you for your response. However, I'm still a little unsure. The images are referenced in the CSS and not in the HTML. So where do I put the following?

HTML Code:

<img src="path/to/image.jpg" class="noshow" />

Thank you.

**ralphchadkirk** · 04-22-2011 09:09 AM

For each over image (only really the large file sizes) put each one in an <img> as the first tags after the body as if you were putting it in by HTML. Then give it the class noshow, and put the CSS I gave in your CSS file. What it does is forces the browser to download the image before the hover pseudo class works, so it doesn't need to download when the hover is activated. It's set to not show at all, so your page visually will look no different.

HTML Code:

<body>
  <img src="path/to/image.jpg" class="noshow" />

**thegreatdanton** · 04-22-2011 09:24 AM

Thank you for your response. I think I've that issue fixed. However, there is still a small issue with the frog onmouseout (Internet Explorer only). When I move the mouse away from the frog there is still a slight flicker. Do you notice that in your internet explorer?

By the way the new code is:

HTML

HTML Code:

<div id="slides">
<div id="slideleft">
<div id="slidewelcome">
	<h2 class="slidewelcome">welcome to woodland print...</h2>
</div>
<a href="http://www.woodlandprint.com/newwebsite/welcome/design">
	<div id="slidedesign">
		<img src="http://www.woodlandprint.com/newwebsite/wp-content/uploads/2011/04/design1.gif" class="noshow" />
	</div>
</a>

<a href="http://www.woodlandprint.com/newwebsite/welcome/print">
	<div id="slideprint">
		<img src="http://www.woodlandprint.com/newwebsite/wp-content/uploads/2011/04/print.gif" class="noshow" />
	</div>
</a>

<a href="http://www.woodlandprint.com/newwebsite/welcome/signage">
	<div id="slidesignage">
		<img src="http://www.woodlandprint.com/newwebsite/wp-content/uploads/2011/04/signage.gif" class="noshow" />
	</div>
</a>
</div>
<div id="slideright"><img src="http://www.woodlandprint.com/newwebsite/wp-content/uploads/2011/04/frog1.jpg" class="noshow" /></div>
</div><!-- /#slides -->

CSS

Code:

#slides {background:#ffffff; border-top: 3px solid #DCE4EB;border-bottom:1px solid #D4DCE2;}
#slideleft {width: 500px; height: 400px; float: left; background:#ffffff;}
#slidewelcome{width: 500px; height: 80px; float: left;}
#slides h2.slidewelcome{font-family: Arial, Verdana; font-size: 28px; color: #659730; margin: 30px 0px 0px 70px;}
#slidedesign{width: 198px; height: 90px; float: left; margin: 10px 0 0 235px; background: #ffffff url(http://www.woodlandprint.com/newwebsite/wp-content/uploads/2011/04/design.gif);}
#slidedesign:hover{width: 198px; height: 90px; float: left; margin: 10px 0 0 235px; background: #ffffff url(http://www.woodlandprint.com/newwebsite/wp-content/uploads/2011/04/design1.gif);}
#slideprint {width: 181px; height: 90px; float: left; margin: 10px 0 0 35px; background: #ffffff url(http://www.woodlandprint.com/newwebsite/wp-content/uploads/2011/04/print1.gif); background-repeat: no-repeat;}
#slideprint:hover {width: 181px; height: 90px; margin: 10px 0 0 35px; background: #ffffff url(http://www.woodlandprint.com/newwebsite/wp-content/uploads/2011/04/print.gif); background-repeat: no-repeat;}
#slidesignage {width: 255px; height: 90px; float: left; margin: 10px 0 0 85px; background: #ffffff url(http://www.woodlandprint.com/newwebsite/wp-content/uploads/2011/04/signage1.gif); background-repeat: no-repeat;}
#slidesignage:hover {width: 255px; height: 90px; margin: 10px 0 0 85px; background: #ffffff url(http://www.woodlandprint.com/newwebsite/wp-content/uploads/2011/04/signage.gif); background-repeat: no-repeat;}
#slideright{width: 520px; height: 400px; background: url(http://www.woodlandprint.com/newwebsite/wp-content/uploads/2011/04/frog.jpg); margin: 0px 30px 0px 550px;}
#slideright:hover{width: 520px; height: 400px; background: url(http://www.woodlandprint.com/newwebsite/wp-content/uploads/2011/04/frog1.jpg); margin: 0px 30px 0px 550px;}
.noshow {display: none;}

Thank you