www.webdeveloper.com
Results 1 to 8 of 8

Thread: [RESOLVED] On hover effect not working too well

  1. #1
    Join Date
    Aug 2009
    Posts
    45

    resolved [RESOLVED] On hover effect not working too well

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

  2. #2
    Join Date
    Dec 2010
    Posts
    59
    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.

  3. #3
    Join Date
    Aug 2009
    Posts
    45
    Quote Originally Posted by ralphchadkirk View Post
    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.

  4. #4
    Join Date
    Dec 2010
    Posts
    59
    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" />

  5. #5
    Join Date
    Aug 2009
    Posts
    45
    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

  6. #6
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,460
    Hi there thegreatdanton,

    to stop the flicker effect, use a single image - ( sprite ) - method.

    I have made an example with the frogs, and you can download it here...


    Further reading:-

    coothead

  7. #7
    Join Date
    Aug 2009
    Posts
    45
    Quote Originally Posted by coothead View Post
    Hi there thegreatdanton,

    to stop the flicker effect, use a single image - ( sprite ) - method.

    I have made an example with the frogs, and you can download it here...


    Further reading:-

    coothead
    Thank you very much for your help coothead. I will use this technique.

  8. #8
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,460
    No problem, you're very welcome.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles