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.
David Smith is Scotland's most qualified Apple and Adobe certified trainer. Having completed his education at Edinburgh College of Art's BAFTA winning Film School, David moved straight into TV production, first as a Vision Mixer then quickly becoming, at the age of just 24, a director of live TV studio productions. In 2001 he moved into Higher Education where he became a lecturer in TV Production, specializing in post-production and live studio production. During this time, and working with the support of the BBC, Channel 4 and independent production companies, David was instrumental in the design, development and implementation of industry-approved vocational courses across Scotland's Colleges. In 2006, after working closely with Apple Computers to create a unique multimedia studio for education at the Music and Media Centre in Perth, David became Scotland's first Apple-Certified Trainer for Pro Apps. This led on to David forming the first Apple Authorized Training Centre for Education, north of Manchester. In 2008 David made the move to full time training and joined the ranks at Academy Class, Ltd. where he continues to train industry professionals as a certified trainer across the Adobe Creative Suite and Apple Pro Apps range.