Setting up hover-images and buttons with Adobe Dreamweaver

Check out my website The MaStudios

So, your almost finish making your website. Now we will setup whats known as hover or rollover images. Basically, when someone places the cursor over a button you have made, it will switch to the hover state of your button. This lets people know this is a button with a cool effect.

Most of this process is just repetitive tasks, so lets get started.

With this split view selected in Dreamweaver, click on one of your buttons you have already made. This will select the button and show you where the code is for this particular button.

Go up to Insert, Image Objects then Roll-over Image from the menu at the top on the program. This will enable a popup menu like so, and this menu box is pretty self-explanatory. Select Browse next to the first section; original image and select the image of your button at normal state. Do the same for the rollover image section but use the hover image of that button from the hover folder you made.

Make sure the checkbox is checked for Pre-load rollover image. Leave the alternate text box blank, we will discuss this in a more advanced tutorial, but for now lets just learn the basics and this is something that will only complicate things.

Move on the the When clicked, go to URL section and insert a hash symbol ( # ). This will allow the enabling of the button, while allowing you to leave it blank. Once you make more pages, you can select browse to link it to them. Always select the page with the html, the one with a symbol that looks like an Internet Explorer icon.

Click ok, you will notice that you now have two buttons that are the same. Click on the one on top and press delete. Now click anywhere else in the page and the button you did not delete should go to the designated slice area. Make sure when you click elsewhere, to not accidentally drag something. Doing this will screw up your tables and everything will be out of place.

If you do happen to do this, simply go to Edit then Undo from the menu at the top.

Now repeat the process for all of your buttons and click live view or F12 to ensure they are working properly and to see that your tables have not been messed up.

We can now move on the editing your page title and setting the float (how your page sits). Go back to the Main Portal or Continue to the Next Step.