Professor Petrik said making a rollover on images work was easy and was in our book. I tell you what, if the Stylin' with CSS book has how to use rollover with images, I can't find it. I can find how to do a rollover on a DIV with an embedded image (Page 131) which I think I will use if I use a video but it doesn't help me with doing a rollover on my nav with my images. I finally figured it out, but the next time you all see me I will have a lot less hair and it will be a lot grayer.
Thanks to Ben's web programming page and WebMasterWorld for input. But like always, the little periods, octothorpe, can kill you.
The first thing I did was make an image of what I wanted to be displayed normally. Then I made an image of what I wanted when the user rolled over the link with the mouse. I called these things like PreludeToWar.jpg and PreludeToWarRollover.jpg
In my html document I put in the following
In my Chronology div (My left column)
<div id="Chronology">
<div id="Chronology_inner">
<a href="#" id= "NavPic1"><span class="myalt">Prelude to War</span></a>
<a href="#" id= "NavPic2"><span class="myalt">Conventional War</span></a>
<a href="#" id= "NavPic3"><span class="myalt">Guerrilla War</span></a>
<a href="#" id= "NavPic4"><span class="myalt">Consequences</span></a>
</div>
</div>
These are placeholders for background images.
In my CSS file I have a separate displays for each picture for instance for NavPic1 I have
a#NavPic1{
width:150px;
height:50px;
background-image:url(images/PreludeToWar.jpg);
display:block;
}
a#NavPic1:hover{
background-image:url(images/PreludeToWarRollover.jpg);
}
I also added the display instructions for the "myalt"
a .myalt {
display:none;
}
This makes sure there is space on the screen for the background image to go into, but no real data is displayed.
Now when someone rollsover the link the text changes color. You can make the second picture whatever you want, different text color, different background or completely different words.
The problem with this is that I have now put content in the CSS document and taken it out of the content page. This is a violation of separating display from content. Oh, well it works. Here it is.