IMAGE SLICING (This is 100-W lab 7)

1.  Find a web page that is complicated, like the nytimes.com
	site, or a complex artistic site.  Do a print-screen
	or alt-print-screen.

	Paste it as a new image in ImageReady.

2.  Select three areas you would like to be image rollovers
	(when you mouse over these areas, they change saturation).

	After each selection, choose "create slice from selection."

	After each selection, copy that selection to a new image.

3.  Now save the sliced image using "Save Optimized As".  

	Use a name that does not have any strange characters or spaces
	in it.

	Verify in the browser that you can view the html you saved.

	Show the TA that you can isolate one of the slices as a separate
	image by mousing over it, opening the properties, and using
	that as the URL, so that the browser displays just one of the sliced
	images.

	Note the path to the images folder being used.

4.  Go back into ImageReady and copy your three selected slices into Photoshop.

	Change the saturation of each of the three slices, and save
	each in the images with a slightly modified name.  I like
	to use img3b.jpg when the original is img3.jpg.

5.  Now edit the html source... note that it specifies a table with
	lots of images.  Find each of the images you selected and
	give each a unique id.  I like id=img3 for img3.jpg, and
	so forth.

	On img3's img tag, you will add the attribute:

		OnMouseOver="img3.src='images/img3b.jpg'"

	assuming that the src of the image is images\img3.jpg.

	Try saving this and reloading the page in an IE browser.

	Mouse over the image.  Did the image change?

6.  Add the corresponding OnMouseOver event to the other two images
	you selected.

7.  You want the original image to be restored when you mouse out,
	right?  Add

		OnMouseOut="img3.src='images\img3.jpg'"

	And test to see if that works.

	Do it to all three of your images.

	Show the TA.

8.  Try doing the rollover in a different order.  First, compose
	an image out of three layers, and keep the layers separate.

	You might find a background image, then put a border shape
	on it, like an inked line, then put some text on top.

	Make three new versions of this image, where each new version
	slightly alters just one of the layers.

	Save all three new images, and the old image, as img0, img1, 
	img2, and img3.

	Now make a web page with just the img0 image on it using the
	IMG tag.

	You're going to need three buttons.  The easiest thing
	to do is to find three MORE images, or to make them,
	and it's good if they all have the same height and width
	and are fairly small.

	Add these images to the bottom of your page using the IMG
	tag.

9.  We are going to add the code so that putting the mouse over each
	button will cause the main image to change:

	Add an OnMouseover event to the first button that causes img0 to
	become img1.  
	
	Add an OnMouseover event to the second button that causes img0
	to become img2.
	
	Add an OnMouseover event to the third button that causes img0
	to become img3.

10.  Show the TA and you are done.