Questions tagged [imagemap]

Image Map is a list of coordinates relating to a specific image, created in order to hyperlink areas of the image to various destinations. The intention of an image map is to provide an easy way of linking various parts of an image without dividing the image into separate image files.

In HTML, an imagemap is made of the actual image that is embedded with the <img> tag, and contains a usemap attribute.

The imagemap is comprised of the <map> tag and <area> tags, which defines the fields within the weblinks. These are similar to the <a> tag, defining which URL should be opened.

Example:

<img src="image.png" alt="alternative text" usemap="#mapname" />
<map name="mapname">
  <area shape="rect" coords="9,372,66,397" href="http://example.com/" />
</map>
871 questions
14
votes
2 answers

Is this possible: Zoomable SVG Image Map

I would like to make a very big svg that is both a CLICKABLE image map and is ZOOMABLE. If I understand the html5 specs both of these seem possible, but no one mentions using both of these together. Are there any examples out there? I don't want…
jpmorris
  • 882
  • 2
  • 10
  • 22
14
votes
5 answers

jQuery lightweight tooltip script recommendation

I am looking for a lightweight jQuery script for tooltips that is lightweight and can be easily used with image maps... Ideally it would automatically take the 'title' of each the area tag to function as a tooltip. The reason this is an issue is I…
Mark
  • 5,423
  • 11
  • 47
  • 62
14
votes
2 answers

Image Map not working in Firefox! works fine in Chrome+Safari

Ive made a image map and its not working in firefox. It works fine in both Chrome and Safari. This is the site bryanedwardcollins.com Please help! contact
Bryan Collins
  • 141
  • 1
  • 1
  • 3
11
votes
4 answers

Highlight a section of an image in JavaScript

I run a small webpage that allows users to click on various links using image maps. I'd like to highlight the section that a user clicks on to give some feedback to the user (they may be clicking on several different parts rapidly). Is there a…
Joe
  • 4,367
  • 7
  • 33
  • 52
10
votes
1 answer

Image Map Not Working In IE

I have an image map on my site, and it works in everything except IE. This is the code:
009
  • 103
  • 1
  • 1
  • 6
10
votes
1 answer

Maphilight() stops working correctly after zoom in/out of imagemap

I have one image map with 300-400 poly areas which on event "onclick" shoud highlight that area and get some data etc... When page is loaded (my images are kinda big, 3-5MB) so I resized those imagemaps using davidjbradshaw/image-map-resizer plugin.…
KuKeC
  • 4,392
  • 5
  • 31
  • 60
10
votes
2 answers

iPad Safari's mapping of mouse events to touch events in image-maps

My website makes extensive use of image-maps. The images are of pages from a medieval manuscript. The mouseOver event of the AREA tags has a tooltip attached to it, which displays a modern typographic transcription of the ancient script for the line…
Tim
  • 5,371
  • 3
  • 32
  • 41
10
votes
4 answers

How to make absolute positioned image area maps clickable with mouse?

I have several images positioned on top of each other using absolute positioning. These images are partially transparent, and have a html area and map to make only the visible parts clickable. In jQuery, I have attached mouse events to the area…
Mark
  • 18,730
  • 7
  • 107
  • 130
9
votes
4 answers

Hover effects on irregular polygons in CSS

I'm wondering how to go about marking up and coding hover effects for a map similar to this image. When each district (or section) is moused over/touched/clicked I need to change the colour of it without affecting any other section. The boundaries…
Will Morgan
  • 4,470
  • 5
  • 29
  • 42
9
votes
2 answers

Google Maps API V3 - Prevent ImageMapType from wrapping

Please note: This question is very similar to this one I found on stackoverflow. Google Maps v3 ImageMapType Prevent Wrapping However, the above question and answer did not work for my example / issue as I need to be able to view all of my image at…
Blowsie
  • 40,239
  • 15
  • 88
  • 108
8
votes
1 answer

Are Touch Events in HTML Image Maps Supported in iOS/Mobile Safari

Can anyone tell me, definitively, if html image maps support touch events in Mobile Safari? I need to use image maps because I have clickable areas that are irregularly shaped. My testing shows that mouse events are supported (but in a limited way)…
g-dog
  • 410
  • 1
  • 5
  • 14
7
votes
1 answer

Google Maps API V3 - Custom Tiles

I am currently working on Google Maps API V3 over here If you zoom between 21 to 23, there will be an image overlay on the map. The image takes too long to load and I have decided to break it into different tiles for easier loading. I am using…
silverbtf
  • 193
  • 1
  • 2
  • 9
7
votes
3 answers

SVG too small in Internet Explorer

Got this strange problem where IE do not want to obey the viewbox size of an SVG in my HTML. viewBox="0 0 1000 563" It works in all other browsers I've tried, but fails on IE on Windows (I run Win 8.1 w/IE 11.0). It seems to work on IE/Edge on…
Stian Berg Larsen
  • 543
  • 2
  • 10
  • 29
7
votes
2 answers

Resizing Image Maps containing circles

I'm trying to map all the numbers in the image below, which I've done. But now I want to dynamically resize the image and map according to the window's width. Here's the relevant html:
Barry Michael Doyle
  • 9,333
  • 30
  • 83
  • 143
7
votes
6 answers

plot points for image map

I want to add automatic area highlighting to image maps on my webpage. I've found the mapper.js library to be very useful in achieving this, however creating the x,y plots around a regional map is very time consuming. Is there a quick way to create…
Joshua
  • 1,913
  • 1
  • 19
  • 31
1
2
3
57 58