Extra Credit—Adding a rollover image

Test: Hover Click

This part is optional. You may skip this page and go to the next page.

You will add a rollover image that is similar to the one at left. When the page loads, you will see one image. When you run your mouse over it, you will see the other image. The rollover image can also be a link.

Find two images that are exactly the same size. Secure copyright permission. Create a Permissions page where you show each of your images. Link each image to the Web page with the "fine print" that gives you permission to use them.

Open your file in NotePad2 or TextWrangler, if it's not already open.

Decide where you want to place your image rollover. Hint: Putting it on your form page is easiest.

Add an image tag where you want to place the image in your HTML file:

<img src="flower1.jpg" alt="flower pic" />

Add the onmouseover event that swaps in the new image.

<img src="flower1.jpg" alt="flower pic"
onmouseover="this.src='flower2.jpg'"
/>

Add the onmouseout event that swaps back the old image or swaps in a new, third image:

<img src="flower1.jpg" alt="flower pic"
onmouseover="this.src='flower2.jpg'"
onmouseout="this.src='flower1.jpg'"
/>

You can also make this rollover link to a new page:

<a href="newPage.html">
<img src="flower1.jpg" alt="flower pic"
onmouseover="this.src='flower2.jpg'"
onmouseout="this.src='flower1.jpg'"
/>
</a>

Save the file and preview in Firefox. Do you see the second image when you hover over it with the mouse? Does clicking the link work?

If the rollover doesn't work, make sure both images are in the same directory and are the same size. Check spelling carefully. Make sure that you use single quotes to set off the src in your onmouseover adn onmouseout event handlers. Remember that names are case sensitive.

Return to the Catalyst WebQ and answer Questions 16, 17, and 18.

All that's left is one last step....creating a new window to display your story.

previous page next page