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.
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.
Time needed: 5 minutes.
How easy is it to add an image map to WordPress?
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.
The code produced is clean html. Just copy and past this into the source area for your WordPress page.
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.
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:
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
</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>
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.
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
This generator is #1 among the best ways to produce a map because it offers:
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.
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
This is another beautiful tool and stands out as being incredibly easy to use.
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
This tool feels like its setup to gain your email address.
Automated page speed optimizations for fast site performance