All Articles Dreamweaver
Creating Image Rollovers Using CSS in Dreamweaver
David Smith on Wed, May 9th 0 comments
There are certain trends in the world of web design that spread like wildfire… One of these is the use of image rollovers. David Smith shows how to emulate this using Dreamweaver CS5 & CS6.

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?


Comments (0)

You must be logged in to comment.

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: