BrandonE97 Posted April 30, 2007 Share Posted April 30, 2007 Between the time someone mouses over a rollover image and the downloading of the image there is nothing under the mouse (an image) and I was wondering what I could do to fix that so an image is always shown (even if its the first one, not the rollover image) so everything looks better in the image rollover. No time where there is no image showing. Thanks! a.navlink, a:visited.navlink, a:link.navlink { display:block; width:100px; height:20px; padding-top:2px; font-size:12px; text-decoration:none; color:#000000; background-image:url(/theme/navlinka.gif); background-repeat:no-repeat; text-align:center; } a:hover.navlink { display:block; width:100px; height:20px; padding-top:2px; font-size:12px; font-weight:bold; text-decoration:none; color:#000000; background-image:url(/theme/navlinkb.gif); background-repeat:no-repeat; text-align:center; } Quote Link to comment Share on other sites More sharing options...
Copyright Posted April 30, 2007 Share Posted April 30, 2007 That's because the rollover images are not loaded with the page content. A javascript image preloader should resolve the problem function preloadImages(urls) { var img = new Array(); for (var i=0; i<urls.length; i++) { img[img.length] = new Image(); img[img.length - 1].src = urls[i]; } } window.onload = function() { // rollover images var img = new Array("active.gif", "inactive.gif", "other.gif"); preloadImages(img); } Later. Quote Link to comment Share on other sites More sharing options...
BrandonE97 Posted April 30, 2007 Author Share Posted April 30, 2007 Im not very good with javascript. How and where would I call the function in my HTML code? Quote Link to comment Share on other sites More sharing options...
BrandonE97 Posted April 30, 2007 Author Share Posted April 30, 2007 Well, I guess the <body> tag lol. Wasnt thinking earlier. Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted April 30, 2007 Share Posted April 30, 2007 http://wellstyled.com/css-nopreload-rollovers.html Quote Link to comment Share on other sites More sharing options...
tomfmason Posted April 30, 2007 Share Posted April 30, 2007 Here is how I normally do my css rollover images. I start by creating a new image and then stacking my other two images on top of each other. Like this So on the top you will want the first image that will be shown and then on the bottom you will put the hover image. Here is the css for something like that. .rollOver { height: 40px; width: 100px; } .rollOver a { background: #FFFFFF url(demo.gif); display: block; float: left; line-height: 40px; height: 40px; width:100px; text-decoration: none; } .rollOver a:hover {background-position: left bottom; } The html <span class="rollOver"><a href="#">Whatever</a></span> You will have to define the height and width of your rollover image. Now when the image is moused over the background image position will change. This enables us to get rid of that lag and does not require any javascript. Here is a demo Quote Link to comment Share on other sites More sharing options...
BrandonE97 Posted May 5, 2007 Author Share Posted May 5, 2007 Thanks for all the help guys! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.