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.

How do I add an image map to WordPress?

Image map generator video review.

I’ve now put together a video review on how the 3 image map tools work, so if you want a tutorial of how to use the 3 generators reviewed below then you will find this video really helpful.

Image mappers online

So the video above is clear that I’m always looking for a Dreamweaver alternative. As many of us are.Particularly for an image map generator. So if you are looking for an image map generator,  then you’re in the right place. The three really good alternatives to the Dreamweaver image map are reviewed herein my video. I used Macromedia Dreamweaver when I first started out in Web Design. It was the go to tool. So here is my top 3 and you’ll see why these are really useful for design.

If you are asking “what is an image map generator?” An image map generator basically takes images and then links to other pages, adds alt tags, actually title tags and references. The purpose is to provide links and useful functionality so the user can access through to perhaps different parts of the site. An image map basically takes one large image and it then plots coordinates from the corner parts of the image in relation to the corner X=0 and Y=0 and then by plotting pixels with various shapes or “hotspots” the various areas of the map can then direct visitors out into various URL links. 

These 3 tools really help you build your Image map by a quick plot method, much easier than trying to work out the coordinates for each point in relation to the image corner. 

I hope you find these free image map generator tools as helpful as I have. They’re really useful if your designer or a small business that wants to develop all image maps. So what was it in particular that we were looking for? 

These top 3 image mappers take into account the following criteria:

• How close to the Dreamweaver interface and usability was it? 
• Dreamweaver was so simple you just took an image through the shapes and then put the link.
• Also it had to be free
• Easy to use
• Had to be online
• No download which meant no concerns over virus downloads 
• Simple code to copy into a CMS like WordPress or HTML page

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

Some Useful Facts

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

Some Useful Facts

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

Some Useful Facts

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.