Image MapsSo what other visual trickery might we have up our sleeve. Lets say you had a picture of a room and when someone clicked on the door it lead them into another room. Or if you clicked on the window you got to see the view outside ?? This can be done with what is known as an Image Map. Parts of an Image can become links to other Webpages or Images This is again accomplished by using a .gif image. Any image utility that allows you to see X and Y coordinates can be used to accomplish this task. So I will create a simple image in Photoshop which will allow me to map my X and Y axis points in pixels so I can define areas that can be used to Link to other webpages. So I open Photoshop and create a rectangular area at 72 dpi and color it. On this area I create a rectangle, a circle and polygonal shaped object and I color them different colors. I then save this as a .gif 
In photoshop I can look under Windows and call up my Info Window which allows me to see my X and Y coordinates as I move the curser across the window. But first I must go into my Photoshop Preferences and set my Units and Rulers measurements to pixels. (I could also figure it out in inches by multiplying images by 72). Now the get info window diplays in Pixels. 
For the rectangle I plot the X,Y coordinates for 2 opposite corners. I find these to 267,35 and 344,82 
For the circle I map the X,Y coordinate of the center and then figure out how many pixels the edge is from the center by findinga point directly above center and subtracting Y coordinates which gives me the radius of the circle in pixels. I find these to be 213,165 and 25 for the radius 
For the polygon I find the X, Y coordinates of each corner. These I map as 305,206 and 359,205 and 375,259 and 276,239 as I work clockwise around the polygon. I can then shut down Photoshop and Map these coordinates in a peice of code which tells a browser that these areas will link to certain webpages. So first I create a Tag called MAP and I give it a Name. <MAP NAME="NameofMap"> <AREA SHAPE="rect" COORDS="267,35,344,82" HREF="Tables.html" ALT="index.html" onMouseOver="window.status='Tables.html';return true"> <AREA SHAPE="circle" COORDS="213,165,25" HREF="mountain.html" ALT="animation.html" onMouseOver="window.status='mountain.html';return true"> <AREA SHAPE="poly" COORDS="305,206,359,205,375,259,276,239" HREF="TileMe.html" ALT="Tile.html" onMouseOver="window.status='TileMe.html';return true"> </MAP> In the AREA tags name the SHAPE of the object and the COORDS that you mapped earlier. HREF= points to the link you are calling. The oonMouseOver="window.status='index.html';return true" portion of the code - is where you write a description which will be displayed in the bottom bar of the browser window when the Mouse moves over that object. I usually put the document name so they can see it and type it in if they can't get there via the button. What the tricky code here . There are some single quotes mixed in with the regular quotation marks. Then I call the image with an IMG SRC Tag <IMG SRC="images/Picture.gif" USEMAP="#NameofMap" ALT="Navigational Image: please Reload if Download Stops" BORDER="0"> and inlude a variable that says USEMAP= and you give this the name that you assigned to the map and lets the picture use the information in the Map. To see this in action Click here for the image map demo There are some programs that will help map these coordinates and write the HTML code for it. ImageMapper and mapEdit come to mind for Mac but its pretty easy to do with any image program as long as you can map your coordinates. So you are just begging for it... lay it on they keep saying... I'm just beginning to get faint from the lack of oxygen in my brain from thinking so hard.... |