Hey all,
I'm new to the block. I've had my hosting purchased for about 4 months or so, but just now getting the free time to begin playing. I've created my first site with CSS. It hasn't been difficult so far and I love how the code is rather clean looking.
I've got a banner that I want to add a rollover effect to with another image of the exact same dimensions. Here's a snippet of what my index looks like:
Code:
<link href="Files/layout.css" rel="stylesheet" type="text/css" /></head>
<body>
<div id="mBody">
<div id="mHeader"></div>
And my layout file:
Code:
body
{
background: #000000;
}
#mBody
{
margin: 0 auto;
width: 950px;
border: 1px solid #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
color:#CCCCCC;
}
#mHeader
{
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
height: 90px;
background:url(Images/90x940Header.gif) no-repeat;
color: #006666;
}
As you see, I have a call out to 90x940Header.gif . I want it to switch to 90x940Header2.gif on rollover.
I'm not sure if the way I went about this is good or not, but it works. I've googled and searched these forums for multiple resources concerning this, but none of the examples are exactly like this. Primarily examples of changing the background color or something to keep one single image.
Can someone help point me in the right direction on how I can accomplish this? Thanks.a