Button roll-over doesn't work smoothly.

I was bored so I made a new website today. It works quite well (it's still quite empty, but oh well), but I came across some problems.

One of them is the navigation. When I move my mouse over a button, a grey block appears for like half a second before the roll-over image becomes visible. It's probably because they have to load, but I've no idea how to solve it.

I've tried it in both Firefox and Chrome, and the problem appears in both browsers (haven't tried it in any other browsers yet).

I've made the roll-over button with CSS. This is the code:

CSS:

#artwork {
width: 91px;
height: 44px;
float: left;
background-image: url(images/artwork.png);
background-repeat: no-repeat;
}
#artwork:hover {
background-image: url(images/artworkh.png);
}

Code (markup):

HTML:

<div id="artwork" onclick="location.href='#';" style="cursor:pointer;"></div>

Code (markup):

Link to the website: http://www.brisingr.nl/

 

I'm sure someone will give you a better solution, but you can always preload all of your rollover images on each page, so when someone goes to click them you don't get that grey box (while it waits for the image to load).

I've never needed to do this though, all of my rollovers have always stayed on the first image while loading the transitional one.

 

That'd be an option. How do I preload images? :'p

 

Preload images ...

List the images you want to preload like this and add to the bottom of your page just before closing body tag:

<!-- Start: Preloader -->
<div id="preloader">
	<img src="path/to/image.gif" width="1" height="1" />
	<img src="path/to/image.gif" width="1" height="1" />
	<img src="path/to/image.gif" width="1" height="1" />
</div>
<!-- End: Preloader -->

Code (markup):

Then add this to your CSS file:

div#preloader {
 position: absolute;
 left: -9999px;
 top:  -9999px;
}
div#preloader img {
 display: block;
}

Code (markup):

Now for the link stuff ...

The link:

<div id="artwork">
	<a href="link/path.html"></a>
</div>

Code (markup):

CSS to create hover

#artwork a:link, #artwork a:visited {
 display:block;
 width: 141px; 
 height: 48px; 
 background: url(path/to/image.gif) no-repeat; 
} 

#artwork a:hover { 
 background: url(path/to/hover/image.gif) no-repeat; 
}

Code (markup):

 

Oooh thank you very much, both of you

 

Pre-loading is one way to overcome this problem. Another, and very commonly used technique is to create a single image with both states and then use the background-position css property to achieve the rollover effect.

For example, you have a button that is 30px tall. You create an image that is 60px high with the normal state in the top 30px and the rollover state in the bottom 30 px. Then use the css background-position property.

.button a{
background: url('path/to/image');
}

.button a:hover{
background-position: 0 -30px;
}

Code (markup):

The advantage to this method is that you only have to create and load one image instead of 2 and does not require pre-loading any separate images.

 

Aah, that's an usefull option too. Thanks for the explanation.

Just another quick question. When I use © on my site, it becomes a question mark. How do I show it properly?

Edit: nvm, found out how to use Unicode

 

Use "©" instead of the symbol directly.