Image map generator review
Image map generator review for the perfect image map in html
For anyone familiar with Dreamweaver, image maps were a very useful tool that worked seamlessly in the design view of Dreamweaver. Before we look in detail at our image map generator review we are first going to understand why you may need to use one.
What is an image map?
The image map is simply an uploaded image that could be divided into sections with its own title, alt tag and link reference. These areas were called hotspots. When you mouse hovered over the hotspot the mouse cursor changed to show it was a link to the associated URL. Dreamweaver produced a client-side image maps in HTML code.
Are image maps in HTML still needed?
Before we look at our image map generator review, lets first explore why creating HTML based image maps is still acceptable.
The map element is still fully supported in the major 5 browsers. So web pages after loading the image with the img tag should be fine using the circle and poly shape coordinates.
An image-map element is broken down into several factors. In our example we are going to assume we have a gif image of Dorset
- Define the image e.g. <img src=”Dorset.gif” alt=”UK” usemap=”#Dorsetmap”>
- Name the map with a unique name e.g. <img src=”Dorset.gif” alt=”Dorset” usemap=”#Dorsetmap”>
- Set the open map tag with the same name as the image e.g. <map name=”Dorset-map”>
- Finally add some coordinated within the html map tags this can be in the form of polygon or circle. This is where the challenge comes and drawing the clickable areas with a pointer makes this so much easier see html example below:
</p> <map name="Dorset-map"> <area shape="rect" coords="0,0,20,130" alt="Dorset" href="Dorset.htm"> <area shape="circle" coords="90,60,0" alt="Bournemouth" href="Bournemouth.htm"> <area shape="circle" coords="120,60,0" alt="Poole" href="Poole.htm"> </map> <p>
Image map generator review
A few years ago I was in need of finding a Dreamweaver alternative purely so i could produce a complicated image map for a client. It literally was a map of the world with 200 coordinates! So I went on the hunt for a free Dreamweaver alternative for creating image maps. Take a look at the article as it breaks it down with screenshots on how I managed to deliver to the customer using a great image map generator.
Since then I’ve been aware there are some other great ways to draw the standard poly shapes on an image with the purpose of getting quick easy html code to embed into the html area of a WordPress website.
In First Place
Image Map Net
Image Map Generator
Score: 9.9/10
With this tool, creating html imagemaps is free and easy. Select an image from your pc, or load one directly from an external website. Then use rectangle, circle or polygon shapes with a click and point. Its incredibly easy to use and intuitve. The code is clean html.
Some Useful Facts
- Totally free and unlimited use.
- Really simple intuitive interface.
- Uses all three types of shapes.
- You can add as many shapes as needed.
- Totally online solution, no downloads required.
- Clean HTML code is produced to use in your website.
This generator is #1 among the best ways to produce a map because it offers:
- Simple interface with clear directions
- Its free and unlimited
- You can upload the image or use an online image with a URL
- Its actually easier to use than Dreamweaver ! A true replacement as a Dreamweaver image map alternative
I’m not really sure how this tool could be improved. Just in case I find an even better generator, I have allowed the score to allow room for a perfect 10.
In Second Place
Image Map Org
Img Map
Score: 9.5/10
The easiest tool yet. The only reason its not #1 in our review is it doesnt allow the use of an online URL image. It could be argued the one choice makes it even easier to use as its on route to the perfect code. The tool is extremely easy to generate HTML based image maps. All the work is done in the browser. The code is produced as you work on the image above.
Some Useful Facts
- Free and fully private unlimited use
- Interface is probably the best
- All three poly types of shapes.
- Unlimited shapes as needed.
- No downloads required.
- Alt tags and titles produced correctly.Great quality image map in html
This is another beautiful tool and stands out as being incredibly easy to use.
- The easiest interface out of all our reviews.
- Its free and really intuitive to use.
- You can upload the image but there is no ability to host or use an URL.
- Its probably the easiest to use out of all of the tools reviewed on here.
In Third Place
Image Maps Com
Image Maps
Score: 7.5/10
Creating imagemaps with this tool felt hard work. Its interface wasnt particularly inviting. The site actually improved once you started using the tool. I really liked the right click menu to access the details of the tool. On the whole it wasnt particularly easy as the #1 tool above.
Some Useful Facts
- Free but asks for email or signups.
- Interface feels cluttered.
- Uses all three types of shapes.
- Feels dated compared to the others.
- No downloads required.
- Not overly intuitive.
This tool feels like its setup to gain your email address.
- The interface wasn’t overly clear, though I liked the right click menu.
- Its free but you really need to setup an account and part with your email address.
- You can upload the image but it is only hosted for 24 hours.
- Its pretty difficult to use. I couldnt get the circle coordinates to work at all.
