Client Side Image Maps

VIP Posts : 1 Join date : 2011-02-12

How to find the Coordinates

There are two ways to find the X,Y coordinates in an image. The first is to use a graphics program by moving your mouse over the place on the image and looking somewhere for a set of numbers that change as you move the mouse. The second way is to use your browser. Make your image a link, and then add the attribute ISMAP to your image tag. Load the page with this markup into your browser, and get the X,Y by looking at the set of numbers in the status bar.

Code:: <a href="">
<img src="image.gif" width="130" height="110" alt="someText" ISMAP>
</a>

Rectangle (rect)

To make a rectangular area find the coordinates of the top left corner of the area, and then the bottom right corner. Put the coordinates in the coords attribute separated by comma's.

Code:: <map name="rect">
<area shape="rect" coords="x1, y1, x2, y2" href="page.html" alt="Alternate Text Here">
</map>

Circle

To make a circular area find the coordinates of the center of the area, and then the left center. Put the first coordinates in as normal, and subtract the first number from the second set of coordinates from the first number of the first set of coordinates. That makes your third variable and the radius of the circle.

Code:: <map name="circle">
<area shape="circle" coords="x, y, r" href="page.html" alt="Alternate Text Here=">
</map>

Polygon

Polygons are almost the same as the rectangle, except you can have as many coordinates as you wish and the area can have any shape. Simply put all the coordinates in and you are done.

Code:: <map name="poly">
<area shape="poly" coords="x1, y1, x2, y2, x3, y3, x4, y4, x5, y5, x6, y6, x7, y7" href="page.html" alt="Alternate Text Here">
</map>

Subject: Re: Client Side Image Maps Sat Feb 12, 2011 12:38 pm

Oh my god thank you!!! I needed this so badly!

» Carat & Exp Client (5-24-2011)
» Rumble Fighter Destruction 2.0.1.0 + Multi Client