Rollover Picture Links

An easy way to make a rollover link in dreamweaver is to use CSS image sprites. By using a DIV tag and some CSS, you can create rollover image by making a separate container and shifting the background image when it’s being hovered. To create a rollover image, you have to start by making the actual image in photoshop. Start by creating the picture for the link how you want it to look when its not being hovered.Image

 

Create a new image with the same width as your original link picture, but 2x the height. Place your link picture into the new image and position it to the top of the canvas. In the space below, create what you want the link to look like when it is being hovered.

Image

 

Keep in mind that we will be shifting the background space of a to create the rollover effect, so only half of the image will be visible at any given time. After this is complete save the file as a . JPG. 
Now its time to write the code. By doing a quick google search, you can find multiple websites with for the code, or just copy it from mine.  In DreamWeaver create link and give it a new class that we can style later in CSS.

Image

 

CSS is needed to create the rollover effect. Create a new CSS file, or you can add to your existing CSS. Create a new style for your rollover image class . Make the width of this the same as the width of your image you made earlier. Make the height one half of the final image you saved. Insert the image you created as the background image. The text-indent shifts your text so that only the background picture is visible. 

Image

Now you have to write the code for the hoover effect. This is done by using the same name as the last ID we crated but followed by :hover. The height and width of this will be the same as the last. The background-position tag shifts the image downward. Save your CSS document and attach it to your HTML page.

Image

After you attach the CSS to your HTML document the link should work and change when you hover over it.
Keep in mind that since CSS is used to create the rollover effect, as long as the image stays the same size you can use this same code for multiple links.

Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s