(Close)
Forgot password?
AskAudio Magazine
Join Now! Watch Tutorials
macProVideo.com
Close

Join macProVideo.com

Access free tutorial videos, premium articles and project files.

Share this article with friends!

Creating Image Rollovers Using CSS in Dreamweaver

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. 


Step 1- Gather the images

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. 

3 images


Step 2 - Create a Div to contain a Navigation bar

Open the Insert Panel, set it to Layout and select the Draw AP Div option. 

AP Div


Draw an AP Div onto your page, use the Property Panel to set the size to 930px v 220px.


Step 3 - Insert 3 images

Drag each image in turn to the AP DIV so that they are aligned horizontally, with no gaps between them.

lined up images


Step 4 - Create a class named NavBar

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. 

null


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.


Step 5 - Apply the Class style

Select each image and using the Class drop-down menu in the Properties Panel to set each one to the Class called NavBar.

class applied


Step 6 - Create a Hover Compound style

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.

compound


Name the style a:hover (the a:hover style controls the style settings for links when the mouse is over them).


Step 7 - Create a transparency

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. 

code view


Add the following code to the compound style to create a 50% opacity change:

{

filter: alpha(opacity=50);

opacity: 0.5;

}


Step 8 - Create Links

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.

link made


Repeat this for all 3 images so they all become links. 


Step 9 - Test the Page

Finally, save the page File > Save or press Command-S and test in your default browser Option-F12

rollovers


Roll over each image to see the opacity change and the borders lighten.  

Cool huh?


David Smith

David Smith | Articles by this author

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.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2014 macProVideo.com
a division of NonLinear Educating Inc.
Link