Perhaps youíre wondering how I made those little bats on my layout, clickable. Or maybe youíre not. Whatever your reason for looking here, that is called image mapping. Image mapping is where you create hotspots on your image, so when people click that area, it works like a hyperlink. To do this, you must find the coordinates, and enter them in the code, which Iíll provide you later in this thing Iím writing right now.
There are three ways to create an image map that Iíll get into. The first way to image map is to find a program or a site online to do the image mapping for you. This resource eludes me at the moment so itís up to you to find something with a Google Search.
The second way to create your image map is in Photoshop. Open up the image you want to map in Photoshop. First well go with a rectangular hotspot since thatís the most basic thing to do. To find the coordinates for this, open up the Info Palette, click on the cursor, and set it to pixels.
Next simply point to the top left corner of the hotspot for the first two sets of the coordinates. These coordinates show up in the Info palette. Next, click the bottom right corner of your hotspot for the remaining two coordinates. Congrats. Youíve got your coordinates. Repeat this step until youíve got all your buttons down.
For further understanding, your coordinates should be in this order: (top left, top left, bottom right, bottom right)
The coordinates for "endlessrage.net" on the Saix image is 17, 248, 137, 261.
Now letís talk about polygonal hotspots. This works exactly the same as a rectangular hotspot. But instead, you just keep adding coordinates from your picture, until youíve got it all covered. Think of it as those dot-to-dot activities in coloring books. The order of the coordinates for this one should follow the same order as the dots you ďconnect.Ē
If you donít have Photoshop, no worries. You can just upload your image to your website, and enter its URL in the following code:
<A HREF="Ignore This"><IMG SRC="Image URL Here" style="position: absolute; top: 0; left: 0; ISMAP></A>
Once you set that up, open up the page and just hover where you want your coordinates. The coordinates will appear in the bottom of the browser. So far Iíve only tested this in both Firefox and Internet Explorer and they should work. This is the easiest way to get your coordinates since youíd already have your image uploaded. Youíre good to go. You can see the example of this code for my Saix site by following the link.
Saix Image Map
All you need now is to set up these coordinates to work on your site. Hereís the code. Things in Bold are for you to edit your own information. For area shape, you must enter whether youíre using a rectangle or a polygon.
<img src="Image URL" usemap="#Map ID" style="position: absolute; top: 0; left: 0; alt="Alt Text" style="border-style:none" border="0" /><map id="Map ID Again" name="Image Name">
<area shape="rect/poly here" alt="Alt Text" coords="Coordinates Here" href="URL Here" title="Title Here" />
<area shape="default" nohref="nohref" alt="" />
For each link on your image, you paste more of the code with the 'coordinates here' portion, and fill in new information as usual. In that same code, with 'rect/poly' is where you indicate what shape your hotspot will be. The style through left:0; portion of the code is unnecessary unless you're trying to set up a layout that starts at the top left of the browser.
You can also do a circle or something but Iím too lazy to explain it.