Did you ever go on a website where you scrolled over a picture or a link that was a picture and then 5 seconds later the picture changed. This time difference is extremely annoying and can drive users away from your website. The solution does not lie in getting rid of these roll-overs but to preload your images using javascript. Preloading your images loads your images when the page loads instead of when you scroll over the image. Here is how you do it:
<!–
pic= new Image(100,100);
pic.src=”image.gif”;
//–>
</script>
The first line creates a new image object named “pic” that has a width of 100px and a height of 100px. The new Image() construct needs two parameters. The first is the width in pixels and the second is the height of the image in pixels. Then the second line specifies the location of the image you are preloading, just replace “image.gif” with whatever image you want to preload. And that is about it. Just be sure to place this in the header section of your website.
Hi, first of all i just wanna say really nice website, then to comment the tutorial, i havn’t tried out the technique you describe in the tutorial, but i would think it would be quite alot easier to just do it with simple CSS..
all it takes is that you place a div in the start of your page where you place all the images that are going to replace on mouseover, and then set the visibility of the div to hidden, this way the images will be loaded but not shown.
Best Regards
Ubbe
gfdgfgdf