Imagemap creation for SEO purposes

It's not a kind of doing, what you can use on each corner. But such hint could help you to diversify and enrich your assets and to gain the spreading of your source. But don't misuse - you could be just quickly abused;) Google doesn't like if you become oversmart. I'm talking about imagemaps, the links inside of imagemaps and making use of imagemaps for SEO purposes.
Although a smart guy at forum@moz.com detected, that Google follows links inserted into imagemap, and respects if links are attributed with rel="nofollow".

Usual imagemaps

This insignt is valid for "normal" imagemaps, which are generated with map, shape and coords. Such imagemaps may include kinds of shapes: rectangles, circles and polygons, like this one:

<map id="imgmap" name="imgmap">
<area shape="rect" alt="my g+ profile" title="my g+ profile" coords="8,11,119,28" href="https://www.google.com/+Evgeniy-Orlov" target="_blank" />
<area shape="circle" alt="my advanced seo blog" title="my advanced seo blog" coords="27,55,10" href="http://undead-seo.blogspot.de" target="_blank" />
<area shape="poly" alt="search" title="search" coords="69,51,73,99,104,88,110,55,93,41" href="http://google.de" target="_blank" rel="nofollow" />
</map>

Good.

CSS imagemaps

This is comfortable enough, but we can go further and create an imagemap, which is fully css based and on using it we don't need to have any doubt about how Google means about it. Google sees in it just a piece of HTML code, with background image and some links in a foreground. It's simple, look:

<div class="imgmap_css_container" id="imgmap">
<a style="position: absolute; top: 11px; left: 8px; width: 111px; height: 17px;"  alt="my g+ profile" title="my g+ profile" href="https://www.google.com/+Evgeniy-Orlov" target="_blank" ><em>my g+ profile</em></a>
<a style="position: absolute; top: 45px; left: 17px; width: 20px; height: 20px;"  alt="my advanced seo blog" title="my advanced seo blog" href="http://undead-seo.blogspot.de" target="_blank" ><em>my advanced seo blog</em></a>
<a style="position: absolute; top: 41px; left: 69px; width: 41px; height: 58px;"  alt="search" title="search" href="http://google.de" target="_blank"  rel="nofollow"><em>search</em></a>
</div>

You see, there is a small restriction: css based imagemap lets you make use only by rectangles - i personally am unpretentious enough to prefer this kind of imagemap.

Imagemap creation

To make imagemap creation as comfortable as possible i recommend an imagemap creation tool, which can mak both of "normal and CSS imagemaps for you. You need only upload an image, or fill a n image URL, then marup active areas on the image (it will save coordinates of them). Then you fill in URLs and ALT's for each active area and you're done! You copy generated HTML code and share it or publish it where you want. And the name of this free imagemap online creation tool is... sure, Online Image Map Editor - or do you expect anything else? There is btw a desctop version too.
Use and enjoy! And not forget to donate to the tool developers!