Revitalizing your links with rollover images!

The classic internet link: blue, underlined, times new roman…boring. 

Rollover images offer a refreshing, visually pleasing alternative to the typical run-of-the-mill link. When the cursor moves over the link (an image in this case), a second, preloaded image pops up – signaling the user the link is clickable. These images can be photos, text, anything that can be loaded as a JPG or PNG image.

Let’s begin.

From Adobe Dreamweaver:

  1. click insert, located on the toolbar on the top of the screen.Image
  2. Navigate to image object –> rollover image.Image
  3. From the dialogue box that appears, enter the proper credentials, selecting: original image,” “rollover image,” and “when clicked, go to URL.” Which specify the default image displayed, the image that appears with the cursor, and the destination of the link.Image
  4. Dreamweaver will automatically generate the proper HTML and javascript codes and insert them into the document. Cake.
  5. The link image size can be adjusted from the Dreamweaver’s Design view, where click-drag-expand capabilities are enabled.

Bon appetit. 


~ by maf137 on October 15, 2012.

2 Responses to “Revitalizing your links with rollover images!”

  1. Wow, this post is exactly what I was looking for! I had been trying to find out how to get rid of the boring ol’ blue hyperlinks on my webpage and this is exactly what I needed!

    This post is very clear and concise and short and to the point, however I would almost like a little bit more detail in the beginning as to what a “rollover image” is. An example would have been great, or even an animation showing how when the mouse goes over top of the image it changes, signifying that the image is, in fact, a link.

    Overall a great job and I can’t wait to show the CEO what I got with this handy trick!

  2. First of all, cool post. Had no idea Dreamweaver had this built in. Here I am doing this by hand like some sort of schmuck.

    Your use of pictures is cool, but doesn’t really do anything to add to your post. Simple text instruction of how to navigate the menus would do just fine. What would be useful, however, is perhaps screenshots of an image rollover in action.

    You also say ‘anything that can be loaded as a JPG or PNG image.’ I may be wrong on this point, as far as dreamweaver is concerned, but there’s no reason you couldn’t use a .gif, .bmp, .tiff, or any of the other myriad of common image formats.

Comments are closed.

%d bloggers like this: