Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Junior Member
    Join Date
    Dec 2009
    Posts
    2
    Member #
    20656
    So I just coded my first real website that I'm doing for a small store that just opened up. I work part-time for them and offered to build a simple site for them.

    I'm having a problem with the image links with the hover style. In firefox, the link images blink/flicker the first time the mouse rolls over them, each one every single time. In Internet Explorer, the same thing happens, but even worse, is when the settings are set to reload images with each visit, the link images flicker every time the mouse rolls over it.

    Here is the website:
    http://www.originalgangsterburgers.com

    You can view the css code by typing in
    http://www.originalgangsterburgers.com/styles2.css

    If anybody can help, I'd be very grateful. Thanks guys!

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    You need to preload those hover images ... using Javascripting...

    You insert the javascript below into your page right before the </head> line.

    Code:
        <SCRIPT language="JavaScript">
        <!--
    
        if (document.images)
        {
          preload_image_object = new Image();
          // set image url
          image_url = new Array();
          image_url[0] = "./images/homehover.png";
          image_url[1] = "./images/aboutushover.png";
          image_url[2] = "./images/menuhover.png";
          image_url[3] = "./images/photoshover.png";
          image_url[4] = "./images/directionshover.png";
          image_url[5] = "./images/contactushover.png";
           var i = 0;
           for(i=0; i<=5; i++) 
             preload_image_object.src = image_url[i];
        }
    
        //-->
        </SCRIPT>
    View this example to see how to reference it with the HTML:
    http://elouai.com/javascript-preload-images.php

    I think you'll be doing it differently than using CSS?


    .


  4. #3
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Also see this:

    http://perishablepress.com/press/200...o-much-better/

    A way without javascripting.


  5. #4
    Junior Member
    Join Date
    Dec 2009
    Posts
    2
    Member #
    20656
    Thank you. It looks like it helped with firefox but is still flickering with IE when it is set to reload images with every visit.

    Is this a lost cause with IE?

  6. #5
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    no reason to use strict other then make your life hard, transitional doctype is good for just about everything.
    also i changed a few thing to kinda give an idea but didnt do all of it. consolidating in places you can will help load speed as well.
    i put the css in the same file so all you have to do is read the source.
    http://www.studio378d.com/wdf/ogb.html

    while($get_it !== true){ continue; }

  7. #6
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    oh and i had to use full url to host it but you can keep using shorts.

    while($get_it !== true){ continue; }

  8. #7
    Junior Member
    Join Date
    Dec 2009
    Posts
    3
    Member #
    20600
    Hi,

    I am i have interest in javascript coding, some body help for to learn java script and ref good online tutorial links.

    web design and development chennai

    Regards
    Poornima

  9. #8
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Dynamic ...
    IE does suck.

    I've seen a bit more discussion on using CSS, where you reference the
    hover images, but don't display them. Like this:

    .photo1{
    background:url(images/menuhover.png);
    visibility:hidden;
    }

    Try doing that with a .photo1, .photo2 .. etc for all 6 images,
    and putting that into a separate CSS file that loads first.

    It seems to me that merely referencing them should put them in cache.
    Maybe this will not work with IE? I'm not sure, but it's easy to experiment with.


  10. #9
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    or my fav for just such
    Code:
    display: none;
    and i know it works in ie
    ref
    http://studio378d.com/?page=po
    i use it for the button recess shadow when you hover on the screenshot area

    while($get_it !== true){ continue; }


Remove Ads

Posting Permissions

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

Search tags for this page

css hover blink

,

firefox javascript image flicker preloader

,

hover blink

,

ie 9 when hover the link and link is blinking

,

image blink in hovering with css

Click on a term to search for related topics.
All times are GMT -6. The time now is 10:45 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com