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; } Link to comment https://forums.phpfreaks.com/topic/49307-image-lag/ 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. Link to comment https://forums.phpfreaks.com/topic/49307-image-lag/#findComment-241749 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? Link to comment https://forums.phpfreaks.com/topic/49307-image-lag/#findComment-241893 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. Link to comment https://forums.phpfreaks.com/topic/49307-image-lag/#findComment-241948 Share on other sites More sharing options...
ToonMariner Posted April 30, 2007 Share Posted April 30, 2007 http://wellstyled.com/css-nopreload-rollovers.html Link to comment https://forums.phpfreaks.com/topic/49307-image-lag/#findComment-241959 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 Link to comment https://forums.phpfreaks.com/topic/49307-image-lag/#findComment-241963 Share on other sites More sharing options...
BrandonE97 Posted May 5, 2007 Author Share Posted May 5, 2007 Thanks for all the help guys! Link to comment https://forums.phpfreaks.com/topic/49307-image-lag/#findComment-245946 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.