IME-JAS v0.05 - Image Map Editor written in JavaScript

This simple JavaScript based editor allows you to interactively create HTML code for a client-side clickable image map using the image from a file (.gif, .jpg, .png, .bmp). I.e. it creates source code with elements img and map with areas. The coordinates of image areas are defined using a mouse.

Tested with Firefox 7, Internet Explorer 9, Opera 11

• How to use it
• Editor
• Known problems
• Contact

How to use it

1. Enter (copy/paste) URL of your image to the Image input.
   

   ---

2. Select wanted Shape for the first area
3. Click on the coordinates that define given shape. The coordinates will be filled to the Coords input:
   • For rect click on the upper-left then the bottom-right corner of the rectangle area
   • For circle click in the center of the circle area, then on the point on the circle most on the right
   • For poly click on polygon ridges in clockwise order
4. Enter URL of the page to be opened upon click in this area to Href input.
5. Click on Add button - the HTML source code for the area will be added Source text area. There you can eventually add some other attribute values.

---

6. Repeat the area defining steps (2.-5.) for other areas
7. Click on Finish button - the source code will be completed, new browser window will be opened for the testing of the created code.
8. You can copy just the image map source code from the Source text area to your HTML source using a clipboard or save the full HTML source of the testing page.

Editor

Image
Shape	rect circle poly
Coords
Href
Source

---

Optional parameters

Default circle shape radius		Enter a value (in pixels) to avoid entering radius manually for each circle.
Auto Add		Check to add completed shape (circle or rect) to the Source automatically (only if Href is filled).
Href template		Add text before or after {href} to extend shape's href value given in Href input.
Map area source template		Modify to add the shape tag to the Source in a different format. {href} here is the value given by the Href template. \n (new line) and \t (tab) are supported. I.e. even completely differently formated text can be obtained (e.g. useful for pasting to Excel: {href}\t{coords}\n). s

---

Known problems

• None so far.

Contact