Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2008
    Location
    Phoenix, AZ
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    "Blinking" buttons

    Hi all -

    I posted for help last week on a site I'm developing for a friend about my roll overs. I wanted to put the roll overs in a style sheet so IE users wouldn't get that annoying ActiveX message.

    When you load the page and go to roll over the buttons, they blink/flicker, like they didn't load the image up front. Is there something I can place in the head that loads the images so this doesn't happen (or some other alternative)?

    Here's the beta site: http://members.cox.net/juliegleaton/jamie/index.html

    My code in HTML:
    Code:
    <div id="container">
       	  <div id="links">
      	  <a id="about" href="about.htm"></a>
    	  <a id="portfolio" href="portfolio.htm"></a>
    	  <a id="weddings" href="weddings.htm"></a>
    	  <a id="contact" href="contact.htm"></a>    	
                   </div>
    </div>
    Sample of one of the links code in the CSS:

    Code:
    #about {
    	left: 0px;
    	width: 125px;
    	height: 325px;
    	background:url(../graphics/about.jpg);
    	cursor:pointer;
    	position: absolute;
    }
    
    a#about:hover {
    	background: url(../graphics/about_ro.jpg);
    
    }
    Thanks for the help.

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Code:
    <script language="JavaScript">
    <!--
    if (document.images)
    {
      pic1= new Image(); 
      pic1.src="../graphics/about_ro.jpg"; 
    
      pic2= new Image(); 
      pic2.src="../graphics/about_ro.jpg"; 
    
    }
    //-->
    </script>

  • Users who have thanked jcdevelopment for this post:

    julieg (07-21-2008)

  • #3
    New to the CF scene
    Join Date
    Jul 2008
    Location
    Phoenix, AZ
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    You guys are fast and awesome. :-) Thanks for the help.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,471
    Thanks
    6
    Thanked 980 Times in 953 Posts
    I’d rather suggest a CSS solution as JavaScript just adds more code and isn’t 100&#37; reliable. A good tutorial is on http://wellstyled.com/css-nopreload-rollovers.html, although I’m usually putting the image states vertically instead of horizontally.


  •  

    Posting Permissions

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