I have a large image and I want to make certain sections of the image clickable. I also want to specify the shape of the clickable area (square, circle, custom). Without relying on Javascript, how can I use CSS and HTML to create an interactive image-map? With hoverable "hot spots" and highlighting areas without relying on generating SVG coordinates. All of the online image map generators I found using Google, did not deliver what I perceive as a standard basic function of any imagemap tool.
Why don't you use a combination of HTML/CSS instead? Image maps are obsolete.
This btw is Search Engine Optimised as well :)
Source code follows:
.image-map {
background: url('https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');
width: 272px;
height: 92px;
display: block;
position: relative;
margin-top:10px;
float: left;
}
.image-map > a.map {
position: absolute;
display: block;
border: 1px solid green;
}<div class="image-map">
<a class="map" rel="G" style="top: 0px; left: 0px; width: 70px; height: 95px;" href="#"></a>
<a class="map" rel="o" style="top: 0px; left: 70px; width: 50px; height: 95px" href="#"></a>
<a class="map" rel="o" style="top: 0px; left: 120px; width: 50px; height: 95px" href="#"></a>
<a class="map" rel="g" style="top: 0px; left: 170px; width: 40px; height: 95px" href="#"></a>
<a class="map" rel="l" style="top: 0px; left: 210px; width: 20px; height: 95px" href="#"></a>
<a class="map" rel="e" style="top: 0px; left: 230px; width: 40px; height: 95px" href="#"></a>
</div>EDIT:
After the numerous negative points this answer has received I have to come back and say that I can clearly see that you don't agree with my answer, but I personally still believe that is a better option than image maps.
Sure it cannot do polygons, it might have issues on manual page zoom, but personally I feel image maps are obsolete although still on the html5 specification. (It makes make more sense nowadays to try and replicate them using html5 canvas instead)
However I guess the target audience for this question does not agree with me.
You could also check this Are HTML Image Maps still used? and see the most highly voted answer just for reference.
you can use online tool like online Image Map
GIMP ( Graphic Image Manipulation Program) does a pretty good job... http://www.makeuseof.com/tag/create-image-map-gimp/
There is also Mappa - http://mappatool.com/.
It only supports polygons, but they are definitely the hardest parts :)
This one is in my opinion the best one for online (offline however dreamweaver is best): http://www.maschek.hu/imagemap/imgmap
This service is the best in online image map editing I found so far : http://www.image-maps.com/
... but it is in fact a bit weak and I personnaly don't use it anymore. I switched to GIMP and it is indeed pretty good.
The answer from mobius is not wrong but in some cases you must use imagemaps even if it seems a bit old and rusty. For instance, in a newsletter, where you can't use HTML/CSS to do what you want.
I have found Adobe Dreamweaver to be quite good at that. However, it's not free.
Source: Stackoverflow.com