Visit the recently re-developed BBC homepage and you will see a very good example of how CSS can be used to create very simple image roll-overs without the need to first create, then insert 2 versions of the same images (as you do when inserting Rollovers). In this article, we will create a navigation bar made up of images that all utilize the same CSS to enable the rollover effect.
I’ve selected 3 images, very similar in size. Using Photoshop I made each image W 300 px by H 200 px at a resolution of 72 dpi. All that really matters here though is that the images are consistent in size with each other.
Open the Insert Panel, set it to Layout and select the Draw AP Div option.
Draw an AP Div onto your page, use the Property Panel to set the size to 930px v 220px.
Drag each image in turn to the AP DIV so that they are aligned horizontally, with no gaps between them.
Using CSS to control what happens to a rollover means that all rollovers, text or images would be styled the same. To avoid that situation, first create a Class style to be attached to each image.
In the CSS Styles panel, create a new CSS Rule, set the type to Class and name it NavBar. Use the Styles Border options to create a Left & Right border of 5px and color them #999.
Select each image and using the Class drop-down menu in the Properties Panel to set each one to the Class called NavBar.
Now to set the Rollover style to be applied. Create another New Style Rule in the CSS Styles Panel. Set the type to Compound this time, this will allow the creation of a style that automatically controls the look of links once they are created.
Name the style a:hover (the a:hover style controls the style settings for links when the mouse is over them).
To finish the effect, and make the images fade to 50% opacity when rolled over, switch to the code view (or split if you’d prefer) and find the a:hover parameter that are listed near to the top of the code.
Add the following code to the compound style to create a 50% opacity change:
Now select the first image and use the link field in the Properties Panel to create a link, try inserting http://www.macprovideo.com/hub into it for example.
Repeat this for all 3 images so they all become links.
Finally, save the page File > Save or press Command-S and test in your default browser Option-F12.
Roll over each image to see the opacity change and the borders lighten.