| Imagemaps allow you to create hot spots in Web images that link to other pages, actions, or information. You could create a graphic with buttons, elaborate text treatments, or image-based information, designating the exact areas within the image for the links. ImageReady makes it easy to designate areas for imagemaps, allowing you to specify the link information and even to save the necessary HTML code to finish the effect. Open the File in ImageReady In ImageReady, choose File, Open and select the desired image file. In this image, I will draw imagemap areas around each line of text, which will link to the respective pages in a Web site.
Select the Image Map Tool Click and hold the Image Map tool in the toolbox to display all the Image Map tools in a pop-out menu. The tool options allow you to draw rectangles, circles, and polygonal shapes. There is also a tool for selecting the imagemap shapes after they're drawn. Select the desired shape tool from the menu.
Draw the Imagemap Shapes Move the mouse pointer over the image and click and drag to draw the shape. It will appear outlined with handles on each side. To edit the shape after it is drawn, select the Image Map Select tool, select the imagemap shape, and move the handles as desired to resize.
Open the Image Map Palette If it's not open already, select Window, Image Map to open the Image Map palette. Adjust the X and Y settings in the Dimensions section to control the exact placement of the shape. Adjust the Width, Height, or Radius controls (depending on the shape type you selected in Step 2) to resize the shape.
Set HTML Information Enter a unique name for the imagemap shape you just drew, as well as the target URL for the link. After entering a URL, you may choose a target value to control the kind of window in which the link will open. Select _blank for a new window or _self for the current window (the _parent and _top options are used primarily for framset targeting). If desired, enter an Alt value, which appears if someone views the page with the graphics off.
Save the Files To save the image and the HTML parameters, it is necessary to save a graphic file and an HTML file. To do this, optimize the file as explained in Part 4, Task 4, "How to Build GIF Files for the Web," and then select File, Save Optimized. In the Format pop-up menu, make sure that HTML and Images is selected and that the files are in the desired directory. Click OK to save the image and HTML files.
How-To Hints Aligning Shapes When working with multiple imagemap shapes, use ImageReady's precision alignment tools to center the shapes or align them along an edge. Select the Image Map Select tool and hold down the Shift key to select multiple shapes. You can then select from any of the align or distribute tools that appear in the Options bar. Imagemaps from Layers If you have a shape that is isolated on its own layer (such as a graphic button), select Layer, New Layer Based Image Map Area. This option creates a new imagemap shape based on the currently active layer. |
|