Image Maps and Rollovers

Image Maps are also called as hotspots and allow you to assign web links to portions of images. These remain invisible to the user till the mouse rolls over them. To create an image map select an image Map tool shape from the toolbar. Click and drag it on the page and open the Image Map palette. Type in the URL into the field.

Select an image Map tool shape to set the next image area and repeat the steps. To test click preview in browser button on toolbar. The image opens in a web browser and the mouse pointer changes to hand when it hovers over the "hot" regions.

Rollovers are used on WebPages, video pages, video games and DVD menus. When the mouse moves over a button or portion of the image the image changes i.e. it may glow or appear depressed. These are used on interactive websites or other media. To create a rollover, you need two things:

• A slice with the original image (in its normal state).
• An activated image (in its rolled-over state) of exactly the same size as the slice.

Exporting a Web Page

After having created a webpage in Photoshop, sliced and optimised it, created the image maps and rollovers and set the links you need to test it in a browser. After being satisfied you can post the piece on the Web.

Transparent and Animated GIFs

Transparent GIF that appears as a cut shape with a transparent background and creates a illusion of a non-rectangular transparent shape that allows the background to show through the transparent areas. Animated GIFs are a series of images grouped together into one image. Each image in an animated GIF is called a frame and is displayed as part of a sequence of images, just like in traditional animation. When you click play the frames, it gives the illusion of movement.