I use CSS to create a rollover image. Here is my code:
Code:
CSS -
/* EOSS Style Sheet */
/* Banner */
.banner
{
margin: 0px 0px 0px 100px;
}
/* Navigation */
/* Home Button */
a.navigation_home
{
display: block;
margin: 0px 0px 0px 100px;
height:30px;
width:64px;
background-image: url(navigation_home.gif);
background-repeat: no-repeat;
}
/* Home Button -- Hover */
a.navigation_home:hover
{
background-image: url(navigation_home_hover.gif);
}
/* Downloads Button */
a.navigation_downloads
{
display: block;
margin: -30px 0px 0px 164px;
height: 30px;
width: 89px;
background-image: url(navigation_downloads.gif);
background-repeat: no-repeat;
}
/* Downloads Button -- Hover */
a.navigation_downloads:hover
{
background-image: url(navigation_downloads_hover.gif);
}
/* Endless Online Button */
a.navigation_endlessonline
{
display: block;
margin: -30px 0px 0px 253px;
height: 30px;
width: 114px;
background-image: url(navigation_endlessonline.gif);
background-repeat: no-repeat;
}
/* Endless Online Button -- Hover */
a.navigation_endlessonline:hover
{
background-image: url(navigation_endlessonline_hover.gif);
}
/* Navigation Bar -- Finish */
.navigation_barfinish
{
margin: -30px 0px 0px 367px;
}
HTML -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css" />
<title>
EOSS - Endless Online Super Speed
</title>
<!--East Parade-->
<embed src="east_parade.mp3" autostart="true" hidden="true"/>
</head>
<body>
<!--Banner-->
<div class="banner">
<img src="banner.gif"/>
</div>
<!--Navigation-->
<!--Home Button-->
<a class="navigation_home" href="index.html">
</a>
<!--Downloads Button-->
<a class="navigation_downloads" href="downloads.html">
</a>
<!--Endless Online Button-->
<a class="navigation_endlessonline" href="http://www.endless-online.com">
</a>
<!-- Navigation Bar - Finish-->
<div class="navigation_barfinish">
<img src="navigation_barfinish.gif"/>
</div>
<!--Announcements-->
<!--Header-->
<div class="header_announcement">
<img src="header_announcements.gif"/>
</div>
</html>
This works fine in the Mozilla Firefox browser, but it doesn't work at all in Internet Explorer. Can anyone tell me how to fix this? Thank you.