A very interesting technique I discovered inside Dreamweaver is using the rollover effect on images. This technique makes pictures EXCITING and EXPLOSIVE! Essentially it displays a normal photo until a mouse rolls over top of it, like a hover effect that make links interactive. This could be used for several different innovative and exciting reasons: interactive pictures like in my photo essay, the logo you have on your site (so people love it and want to come back), and, if you’re feeling it, before and after acne pictures!
So I bet you’re wondering how you can be this cool. It’s actually the easiest thing ever.
- Make your .html page and have it all fancy and spiffy except for your photo/logo.
- Have the spot where you want your picture to be and click there. You’re going to go to the tool bar at the top and hit
*insert > image > rollover image
When you do this, a box will pop up that looks like this:
- As mentioned in the picture, it’s very self explanatory. The original picture gets open in the “original image” section. Similarly, the hover picture gets opened in the “rollover image” section. The title is what it will say in the blank box if your page doesn’t load, so it is important to add a title so if all else fails, people can visualize it.
- Hit okay, and wha-la! Your thingy is now an interactive neat mosquito thingy!
I tried adding a rollover photo to this post, but I couldn’t really figure it out. If you want to see first hand, visit my site:
If you’re like me, you won’t click on it so I’ll show you some side-by-side examples!
(They are actually not side-by-side. I’m not sorry.)