Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

ò Making Image Maps

Image Maps

ò Making Image Maps

by  SPYDERIX  Posted    (Edited  )
How to make Image Maps using ImageReady 7.0:

In ImageReady 7.0 open your picture that you wish to make the Image Map then be sure to know the shape of your image map. First of all, the Image Map tool is found directly below the lasso tool and the shortcut key is (P). If you wish to create only square or rectangle image maps then select the Rectangle Image Map Tool if you want only circles then select the Circle Image Map Tool or if you want to make abnormal shapes use the Polygon Image Map Tool. To get each of these different selections tools you click and hold the mouse down on the image map tool and a popout will appear and you select your tools there. If you are creating several Image Maps then you will need to use the Image Map Select Tool to select the map you wish to alter. When an Image Map is inactive then it will have a blue outline.

Making Square Image Maps:
Select the Rectangle Image Map Tool and click and drag a box on the picture. After you release the mouse you will see a box outlined in red and the center will look translucent. That is your Image Map. You can alter it if you wish. To alter it you can click in the center of the Image Map then you can drag it to somewhere else (you can only do this if the Image Map tool is selected), you can resize it the way you would do a free transform in Photoshop by dragging the top, bottom, left, right side or you can drag the corners. If you hold shift when dragging the corners then as you resize up or down the square or rectangle will resize proportionally. You can also use the mouse keys to move the Image Map (only when the Image Map tool is selected) to move the map by incriments of 1 pixel. Or you can specify the exact X & Y co-ordinates of the map relative to the top left hand side of the picture and you can also specify the exact width and height of the map too. To do this you must have the Image Map Palette showing. Goto WINDOW|IMAGE MAP and then you will see the place to enter the co-ordinates in.

Then comes the part of entering in the URL and the TARGET and the ALT tag. You will need the Image Map Palette showing to do this. Once you have created your Image Map then use the Image Map Select Tool to select the map you wish to attach the URL and TARGET and ALT tag to, then on the Image Map Palette on the right hand side enter in the name of the Image Map, then enter the URL (ALWAYS INCLUDE [color red]http://[/color] before any URL's)then specify the TARGET and if you wish you can specify the ALT tag.

Then when you have finished all that you will want to preview the Image Map and get the HTML code for it. You can do this 2 ways. Right click on any of the Image Maps and goto PREVIEW IN|(then select your browser), or you can goto FILE|PREVIEW IN|(select your browser) Then copy the HTML code below the map in your browser.

Making Circle Image Maps:
I am not going to explain this as it is exactly the same as making square/rectangle Image Maps. Please see above.

Making Polygon Image Maps:
This is slightly different but the same principles apply as for making square/rectangle and circular Image Maps. This process is very similar to using the pen tool in Photoshop. Select the Polygon Image Map Tool and then click on the beginning part of the Image Map then release the mouse and notice how whereever you move the mouse a line will trail behind it. If you are creating an Image Map that has some circular parts, then you will have to make many different map points so as to make the map look circular. Once you have gone around your area click on the starting point of the map and the cursor will turn into a thicker crosshair and an "O" will appear to the bottom left of the cursor indicating that you wish to close the polygon Image Map. When the cursor changes, simply click and the Image Map will be complete. Then you can alter it by specifying the X & Y co-ordinates and the dimensions and you can touch up some circular areas by dragging them away or towards the shape depending on what you need to do. Then do the same process to preview the Image Map and get the HTML code.

Deleting Image Maps:
Simply select the Image Map Select Tool, click on your map, it will turn red and then press the DELETE key.

Overlapping Image Maps:
Do not overlap Image Maps unless you wish to have an Image Map within an Image Map. When you overlap 2 Image Maps then sometimes it will become impossible to select the Image Map because it may be covered up by another Image Map. To select the one underneath you will need to have the ROLLOVERS palette showing, WINDOW|ROLLOVERS then simply click on the Image Map layer to select it. If you are putting an Image Map inside another one then you will have to put the Image Maps in the correct order on the Rollovers palette. Which ever Image Map is closest to the top will take precidence. For example if you have a small polygon Image Map to take you to one site and a larger cirlce completely surrounding the polygon Image Map taking you to a different site then you will need the polygon Image Map to be the highest Image Map on the Rollovers Palette. If the circle was at the top then your polygon Image Map will render completely useless and won't do a thing.

Have fun making Image Maps and remember, experimentation is the key to success.


NATE

[img http://www.mainframe-webdesign.com/tt/mainframe.gif]
http://www.mainframe-webdesign.com
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top