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

N

7

31

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.

Nunley answered 23/1, 2012 at 12:44 Comment(7)

old joe burns of htmlgoodies fame suggests mapedit boutell.com/mapedit – Phenetidine 4/5, 2014 at 9:46

heise.de/download/fast-image-map-1151488.html - zoom in to 400% - save images maps - free – Sldney 12/5, 2014 at 8:27

Best one other not close path so click not working: developer.cdn.mozilla.net/media/uploads/demos/s/u/summerstyle/… – Scutari 21/7, 2014 at 12:32

After about 10 tryouts, I can recommend this service summerstyle.github.io/summer – Truth 4/12, 2016 at 13:32

Questions like this are nowadays best asked at softwarerecs.stackexchange.com – Lobar 26/2, 2017 at 0:15

After trying half a dozen tools, I think @SergeyE. 's recommendation (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. – Selfdefense 26/9, 2017 at 18:3

maybe I am late but found this beautiful one image-map.weebly.com – Beverly 29/1, 2019 at 8:50

V

-34

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.

Villa answered 23/1, 2012 at 12:56 Comment(15)

"square, circle, custom" ... can you do that with your solution? – Ambrosine 10/2, 2012 at 14:10

@FlabbyRabbit Eh well you win some, you loose some. – Villa 10/2, 2012 at 14:42

@Villa - 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. – Nunley 1/3, 2012 at 4:4

@Nunley I guess you could solve this with a bit of javascript. – Villa 13/3, 2012 at 10:31

Why did this get the correct answer? The question wasn't about breaking up an image as a sprite. – Interstate 16/10, 2012 at 18:19

I would consider this a MENU replacement, not an imageMap replacement. – Bleacher 22/7, 2013 at 19:8

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. – Drus 17/10, 2013 at 15:48

This cannot replace an image map since you cannot do polygons with raw divs or <a> anchor elements. I did a -1 to the anser and the website removed me a point because the answer was marked as correct. ugh! – Futurism 3/2, 2014 at 14:43

I still like the design. – Blackball 10/7, 2014 at 1:39

"...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. – Herisau 23/8, 2014 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 – Villa 24/8, 2014 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: 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. – Herisau 24/8, 2014 at 18:45

-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. – Whitcher 4/3, 2015 at 7:36

@Interstate because it works like an image map? – Grogshop 10/11, 2017 at 0:57

thank you. it works perfectly – Nalepka 26/11, 2020 at 15:24

S

22

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

Storekeeper answered 19/3, 2013 at 16:55 Comment(5)

@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. – Grate 14/4, 2014 at 6:27

this one also allows me to paste in an existing image map and tweak it. Which is handy! – Crossarm 27/11, 2014 at 9:1

This online tool is easier to use IMHO: image-maps.com/map_image.php – Brittaney 22/1, 2015 at 7:37

This is normally my go to, however isn't working at the moment – Trinetta 17/3, 2015 at 15:45

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.) – Aeroballistics 28/10, 2015 at 22:37

S

18

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

Statement answered 28/5, 2013 at 19:3 Comment(0)

M

7

you can use online tool like online Image Map

Molar answered 23/1, 2012 at 13:1 Comment(0)

E

3

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.

Etana answered 31/8, 2013 at 6:27 Comment(0)

M

3

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

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

Monandrous answered 9/9, 2013 at 9:40 Comment(1)

Does no longer seem to exist. – Glottology 3/4, 2016 at 10:54

G

2

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

Gallopade answered 23/1, 2012 at 12:52 Comment(0)

V

-34

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>