In the last tutorial, we took our table layout and inserted an image into the Header section. In this tutorial we are going to add a rollover button to our website.
Start up Dreamweaver and open the file you completed in the last tutorial. If you not completed this, you can download the file from here. Alternatively, you can apply the rollover button to your own layouts.
To create a rollover effect, you need two images for each button. The first image represents the original state of the button, and the second image represents the rollover state of the button. If you wish to make your own buttons, please follow the Simple Button tutorial under the Photoshop Series on this website.
This tutorial will create a rollover “HOME” Button for our website. If you wish, you can use the following images to practice with:
Save your images into the same directory as your Dreamweaver file, or any suitable location within your website directory. With your mouse cursor placed at the location you want your button to be inserted on your webpage, from the Menu Bar select Insert>Image Objects>Rollover Image.
You will now be displayed with an Insert Rollover Image dialog, where we can give Dreamweaver the information it needs to create our rollover button. Firstly, set the Image Name field to “HomeButton” or any name you desire.
The Original Image field will point to the image we want to be displayed to the user all of the time, until a rollover event occurs. Click on the Browse button next to this field and navigate to your original image.
The Rollover Image field will point to the image we want displayed to the user when they have rolled over the original image with their mouse. Once again, click on the Browse button next to this field and navigate to your rollover image.
The Alternate Text field is where we can provide Dreamweaver with some text to display if for some reason our images fail to do so. Provide this field with the text “Home Button” or any suitable name.
Lastly, the When Clicked, go to URL field is where we provide a hyperlink for our button. As we have no other pages as yet to link to, we can leave this field blank. If you do wish to link to something, just provide this field with the URL of this link. Your Insert Rollover Image dialog should now look similar to this:
All that is required now is for you to click on OK to create your rollover image, and it will be added to the location you specified within your webpage. If you wish to test out your rollover image in a web browser, from the Menu Bar select File>Preview in Browser, and point to one of the browser options provided to you. Your webpage may now look something like so:
If you wish, you can now add additional rollover images to create a complete navigation bar. You might also follow the CSS Tutorial series on this website to learn how to position your buttons. In the next tutorial, you will be learning how to make an image map.