What is a good alternative to using an image map generator?

Question

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.

old joe burns of htmlgoodies fame suggests mapedit http://www.boutell.com/mapedit — barlop, May 04 '14 at 09:46
http://www.heise.de/download/fast-image-map-1151488.html - zoom in to 400% - save images maps - free — , May 12 '14 at 08:27
Best one other not close path so click not working: https://developer.cdn.mozilla.net/media/uploads/demos/s/u/summerstyle/365ccfd644f2b008c33f0046d2ba1a8f/summer-html-image-ma_1355318513_demo_package/index.html — user956584, Jul 21 '14 at 12:32
After about 10 tryouts, I can recommend this service http://summerstyle.github.io/summer/ — baduga, Dec 04 '16 at 13:32
Questions like this are nowadays best asked at http://softwarerecs.stackexchange.com/ — Mawg says reinstate Monica, Feb 26 '17 at 00:15
After trying half a dozen tools, I think @SergeyE. 's recommendation (http://summerstyle.github.io/summer/) is the best free online option out there. Dreamweaver does a nice job if you have it, but it ain't free. — Sean the Bean, Sep 26 '17 at 18:03
maybe I am late but found this beautiful one http://image-map.weebly.com/ — Bimal Das, Jan 29 '19 at 08:50

score 22 · Answer 1 · answered Mar 19 '13 at 16:55

22

This one is in my opinion the best one for online (offline however dreamweaver is best): http://www.maschek.hu/imagemap/imgmap

answered Mar 19 '13 at 16:55

Chris Andersson

1,291
11
16

@DanFromGermany It's one of the few that incorporate a zoom feature. It's not as bad as you're making it out to be. – Partack Apr 14 '14 at 06:27
this one also allows me to paste in an existing image map and tweak it. Which is handy! – Andiih Nov 27 '14 at 09:01
This online tool is easier to use IMHO: http://www.image-maps.com/map_image.php – thdoan Jan 22 '15 at 07:37
This is normally my go to, however isn't working at the moment – RedRory Mar 17 '15 at 15:45
1

Thanks for the Dreamweaver recommendation--works like a charm. (In Dreamweaver CC, you have to switch from Live mode to Design mode and open and expand the Properties pane.) – DawnPaladin Oct 28 '15 at 22:37

score 18 · Answer 2 · answered May 28 '13 at 19:03

18

GIMP ( Graphic Image Manipulation Program) does a pretty good job... http://www.makeuseof.com/tag/create-image-map-gimp/

answered May 28 '13 at 19:03

user2429855

181
1
2

score 7 · Answer 3 · answered Jan 23 '12 at 13:01

7

you can use online tool like online Image Map

answered Jan 23 '12 at 13:01

mikul

526
6
14

score 3 · Answer 4 · answered Aug 31 '13 at 06:27

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.

score 3 · Answer 5 · answered Sep 09 '13 at 09:40

3

There is also Mappa - http://mappatool.com/.

It only supports polygons, but they are definitely the hardest parts :)

answered Sep 09 '13 at 09:40

pete otaqui

1,432
14
11

2

Does no longer seem to exist. – orschiro Apr 03 '16 at 10:54

score 2 · Answer 6 · answered Jan 23 '12 at 12:52

2

I have found Adobe Dreamweaver to be quite good at that. However, it's not free.

answered Jan 23 '12 at 12:52

alxbrd

1,675
1
15
16

mobius · Accepted Answer · 2020-12-13T18:23:22.623

-33

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.

edited Dec 13 '20 at 18:23

answered Jan 23 '12 at 12:56

mobius

5,104
2
28
41

4

"square, circle, custom" ... can you do that with your solution? – 0x6C77 Feb 10 '12 at 14:10
@FlabbyRabbit Eh well you win some, you loose some. – mobius Feb 10 '12 at 14:42
1

@mobius - i was about to use this but i found one issue with this solution. My image is centered (margin-left:auto, margin-right: auto) and when i click control+plus or control+minus to zoom in and out of the screen, the background image stays centered but since the clickable section are absolute set (left and top) they are no longer hovering over the correct part of the image. – leora Mar 01 '12 at 04:04
@leora I guess you could solve this with a bit of javascript. – mobius Mar 13 '12 at 10:31
26

Why did this get the correct answer? The question wasn't about breaking up an image as a sprite. – wowo_999 Oct 16 '12 at 18:19
1

I would consider this a MENU replacement, not an imageMap replacement. – Milche Patern Jul 22 '13 at 19:08
Image maps still have a place in web development. Probably even more so now than ever with web apps. Not everything is a box. Breaking a big images up into small bits...I'm not in favor of that, but creating complex buttons and designs...sure. – Senica Gonzalez Oct 17 '13 at 15:48
This cannot replace an image map since you cannot do polygons with raw divs or anchor elements. I did a -1 to the anser and the website removed me a point because the answer was marked as correct. ugh! – Zied Hamdi Feb 03 '14 at 14:43
I still like the design. – kta Jul 10 '14 at 01:39
1

"...personally I feel image maps are obsolete although still on the html5 specification..." - They are in the specification. Therefore they are not obsolete. It has nothing to do with personal opinion. – Oliver Moran Aug 23 '14 at 22:18
@OliverMoran Not using image maps does not break any specification. I had initially expressed my opinion when I've first added my answer ("Image maps are obsolete."), and I edited it some time later to stand by it. The answer is my opinion on the matter, you can by all means still use image maps – mobius Aug 24 '14 at 18:33
@mobius, of course it doesn't break the spec if an author chooses not to use image maps. That's an author's choice. No-one said otherwise. On your statement that image maps are obsolete, however, the specification is the final word: http://www.w3.org/TR/2011/WD-html5-20110525/the-map-element.html It's not the sort of thing that one can have an opinion about. If it's in the current spec, it's not obsolete. – Oliver Moran Aug 24 '14 at 18:45
5

-1 "Image maps are obsolete." Citation please? As @OliverMoran pointed out, this is in HTML5 specs itself, so the argument that these are obsolete is invalid. – Razort4x Mar 04 '15 at 07:36
@wowo_999 because it works like an image map? – Rodrigo Nov 10 '17 at 00:57
thank you. it works perfectly – Mr. Randy Tom Nov 26 '20 at 15:24

What is a good alternative to using an image map generator?

7 Answers7

Linked