How to create a Rollover Effect by Swapping an Image

As a part of my website design, I plan to include buttons that I’ve made in photo shop in my navigation bar. I’ve found that I really like whenever there is a rollover effect on buttons/links on a website. I found a really easy way to create that effect by simply swapping the image. You create two buttons basically, one that you start out with and the other that you swap the image with (essentially you want to create the second button however you want it to look when the mouse is on it).

Here are the steps:

1. Choose your starting image for your button.

Screen Shot 2013-10-30 at 9.06.12 PM

2. Click Window -> Behaviors. Then you click the icon that has a + on it. Choose swap image. Then a window will pop up where you can browse your computer for the file you want the image to swap to (the second image). Dreamweaver does all the coding for you, as you can see in the bottom image of this grouping.

Screen Shot 2013-10-30 at 9.06.27 PMScreen Shot 2013-10-30 at 9.07.29 PMScreen Shot 2013-10-30 at 9.08.43 PM

3. Test it! I pulled up the view in Firefox to make sure it was working. The rollover was too quick for me to get a screenshot of it actually happening, but here is the image rollover effect in my browser.

Screen Shot 2013-10-30 at 9.09.44 PM


I know this is a very simple tool that Dreamweaver has to offer (in comparison to everyone’s brilliant tutorials), but I think it’s something that can be added into final website design and really allow your site to stand apart from others.


On the struggle bus, for sure.




Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s