Everyone knows roll-overs are best done with CSS. But it looks like one still needs JavaScript preloading. Is there anything I can do in CSS so that I don't need JS preloading anymore?You can use the "sliding window" technique where the same graphic image is used for the default background and the rollover effect background: half the graphic is the default and half is the rollover:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
<title>Untitled</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 20px;
font: medium arial, helvetica, sans-serif;
background-color: white;
color: black
}
a.slide {
display: block;
width: 130px;
height: 20px;
margin: 0;
padding: 15px 10px;
text-align: center;
background: teal url(window.png) repeat 0 0;
border: navy solid 1px;
color: white;
font-weight: bold;
}
a.slide:hover {
background: aqua url(window.png) no-repeat 100% 0;
}
-->
</style>
</head>
<body>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class=slide>Test</a>
</body>
</html>How about something like the attachmentI'm not so sure about this sliding thing.
Firstly, your image is three times larger than it needs to be.
Also, you need to have your sizes right, which is not exactly easy (for me at least) because IE 5 changes the size of page elements with its broken box model.
Anyway, thanks for the idea, I'm sure it will be the best choice in some cases.
Maybe for one image it would be a good idea to set the rollover image as background for the body and move it out of sight?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
<title>Untitled</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 20px;
font: medium arial, helvetica, sans-serif;
background-color: white;
color: black
}
a.slide {
display: block;
width: 130px;
height: 20px;
margin: 0;
padding: 15px 10px;
text-align: center;
background: teal url(window.png) repeat 0 0;
border: navy solid 1px;
color: white;
font-weight: bold;
}
a.slide:hover {
background: aqua url(window.png) no-repeat 100% 0;
}
-->
</style>
</head>
<body>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class=slide>Test</a>
</body>
</html>How about something like the attachmentI'm not so sure about this sliding thing.
Firstly, your image is three times larger than it needs to be.
Also, you need to have your sizes right, which is not exactly easy (for me at least) because IE 5 changes the size of page elements with its broken box model.
Anyway, thanks for the idea, I'm sure it will be the best choice in some cases.
Maybe for one image it would be a good idea to set the rollover image as background for the body and move it out of sight?