Rollover Images

For my website I am planning on using a lot of rollover images in order to create links from page to page.  It is similar to how digitialtrishacampbell does it on our course homepage!

I used this for part of my recovery story and I really like what it adds to the page.  It’s such a simple feature but it changes the photos and the overall message.

I’ll use the photos from my recovery story as an example:

I took the original photo and saved it on my computer.  Then I opened the photo and edited it.  For my story I wanted to highlight two people in the photograph without using words or pointing directly to them.  So I used the pencil tool to scratch out the faces of everyone in the photo except for the two people I wanted the audience to notice.  I saved this edited photo as a new jpeg.

Original Image:


Edited Image:


Now that I have two photos I can create the rollover in Dreamweaver.

Open the html page that you wish you rollover image to be on.  Click the “Insert” tab at the top, then “Image Objects” to “Rollover Image”


When this box appears, simply upload your images.  Image one should be the original, or what you want to be on the page.  Image 2 should be the image you wish to see when your cursor rolls over the image.

Screen Shot 2013-10-30 at 5.32.06 PM

Everything else is done like usual.  As long as both images are in your website folder, the images should appear when making this page live to the world.  If you want to see the finished rollover effect, please visit my (still under construction) website.  This specific rollover image is the last one of my recovery story.



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