How to Insert Rollover Images into Dreamweaver CS4
Ok, we’ll be inserting rollover images into our Dreamweaver template.
The template is a three column fixed header and footer and is a Dreamweaver template available by going to FILE>NEW and selecting the blank HTML template option and scroll down until you find it.
The rollover buttons were created in Adobe Fireworks but you can use whatever graphics editor you have, even paint brush. The rollover button images consist of an UP image and an OVER image.
The UP image is how the button will look when it first appears on your website. The OVER image is ‘swapped in’ when the end users mouse rolls over the image.
First step is to make sure the images are in a folder or in your site directory so that you can access them from Dreamweaver. If you have them in a folder just click and drag the folder into your site root.
We will be positioning our rollover images inside Sidebar 1 which is on the left side of the template under the word header.
It is important to know the image dimensions as we are going to be adjusting our CSS styles to fit the dimensions of the image buttons.
The dimensions for each button are 165px (Pixels) Width and 32px Height or as windows will show it: ‘165 x 32.‘
I am inserting 5 rollover buttons and they are:
|Home |
|About Us|
|Online Store|
|Blog|
|Affiliate|
So to easily remember my buttons I have named them:
| home_up | home_over |
| aboutus_up | aboutus_over |
| onlinestore_up | onlinestore_over |
| blog_up | blog_over |
| affiliate_up | affiliate_over |
Now, with you template loaded click on the side bar 1 div tag inside ‘design view’
Now have a look at the tag inspector which is just above the properties inspector. There is a line of code there and from the tag inspector we can make sure we are in exactly the right place when we go to edit any of the attributes contained within the Dreamweaver template:
.ThrColFixHdr> <div #container> <div# sidebar 1>
This code indicates that you are inside <div # sidebar 1> and that is inside <div #container> and the container is inside the body of the .ThrColFixHdr template which you have created.
So if you are ever not sure of where you are inside of Dreamweaver remember to look inside the tag inspector and the tag inspector will help you navigate smoothly through your Dreamweaver template.
Now we know what we are editing, look inside the CSS styles panel for a css rule definition called:
.ThrColFixHdr #sidebar 1 and double click on it to bring up the css rule definition dialogue box. Then click on the BOX category and I’m going to adjust the width of #sidebar 1 to 165px so you should adjust the #sidebar 1 div tag to be whatever width your buttons are. I find that 165px width is just right for me!
Do not adjust the height of the div tag for #sidebar 1 because your Dreamweaver template is already set to auto extend down the page of the template. You may be putting in 20 buttons so you should just let it expand as you add the buttons for a nice snug fit.
There is some default padding inside the css rule for #sidebar 1 because it has text inside of it which is being pushed away from the edge of the div tag. So zero out all of the padding and while you are there you can also zero out all of the margins too. When you click apply you will find that the text will then be shunted against the top left wall of the div tag. That’s a good sign because now our rollover images will not be pushed away from the edge of the div tag and protrude inside the #mainContent div tag beside it.
Ok, now highlight all of the text in #sidebar 1 from within design view and delete it. Make sure that you have also deleted the header tags by looking at the code from inside code view. Now go to:
INSERT> IMAGE OBJECTS> ROLLOVER IMAGE
The insert rollover images box will appear and wants to know the name of the first rollover button image you will be using. In my case I will be inserting the |home| button first. So I’m going to call it ‘home.’
Click on the browse button to browse for the UP image and select it from the images folder that you should have defined in your site root. Or just select it from your site root if they are not inside a folder.
Next browse for the OVER image and insert that too. You also want to make sure that you have the preload images checkbox checked, otherwise your rollover image will not start to load until after someone has rolled over it and there can be a slight delay which would make your website look unprofessional.
The alternate text box and whatever you type into it, will appear if ever your image fails to load up on a web surfer’s browser. So make sure that you put something relevant and related to that image so that if in the event that the image doesn’t load up, then the your audience will be able to understand what was supposed to be there. It also helps to make your website more user friendly and if you are optimizing your website with Google ADsense to make money, then spending the time making sure the alternate text box is filled in will be seen as favourable in the Google search engine rankings.
In the last box, you can specify a URL to go to. But there is a much better and easier way for adding the links for your rollover buttons or any other link you create for that matter. See my tutorial on creating links and hyperlinks in Dreamweaver.
When you are finished, click OK and you will see that your first image has been inserted. To make sure it has worked, preview the template in your browser by clicking on the globe icon and save your changes to your Dreamweaver template and the CSS document too.
If you inserted your rollover image correctly, you will see that when you rollover the button the second image ‘swaps in’ and takes the place of the original image. Great!
Where most people get stuck when trying to insert side navigation rollover images is that they don’t quite know how to insert the next rollover button because if you do not place your cursor at the end of the first image that you created, then your button could end in the wrong place within the div tag. So to put your next rollover button that it slots in just below your first rollover button, click on the first button and then press the right arrow on your keyboard and that will place the cursor to the right of the first button! You can also check that this is the case by looking in code view. Now repeat the procedure above that you used for the first rollover button that you put into your Dreamweaver template, go to:
INSERT> IMAGE OBJECTS> ROLLOVER IMAGE
And when you have finished that button, make sure you click on the last button you created and then key the right arrow on your keyboard and repeat the procedure again!
Congratulations, because if you have now inserted your first side navigation rollover images!
For a Dreamweaver CS4 Video Tutorial explaining the above techniques follow this link:
Insert Rollover Images into Dreamweaver CS4
