Stack Overflow
Stack Overflow

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
182
votes
18 answers

Responsive image map

I have an existing image map in a responsive html layout. Images scale according to browser size, but the image coordinates are obviously fixed pixel sizes. What options do I have to resize the image map coordinates?
jdog
  • 2,465
  • 6
  • 40
  • 74
118
votes
9 answers

Are HTML Image Maps still used?

Do people still use the old HTML Image Maps? The ones with:
ss888
  • 1,728
  • 5
  • 26
  • 48
65
votes
4 answers

Using JQuery hover with HTML image map

I have a complicated background image with a lot of small regions that need rollover illustration highlights, along with additional text display and associated links for each one. The final illustration stacks several static images with transparency…
boomturn
  • 971
  • 1
  • 12
  • 14
33
votes
11 answers

Create a map with clickable provinces/states using SVG, HTML/CSS, ImageMap

I am trying to create an interactive map where users can click on different provinces in the map to get info specific to that province. Example: archived: http://www.todospelaeducacao.org.br/ archived: http://code.google.com/p/svg2imap/ So far…
mindtheGaspar
  • 363
  • 1
  • 3
  • 9
31
votes
7 answers

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

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…
leora
  • 188,729
  • 360
  • 878
  • 1,366
31
votes
5 answers

clickable area of image

i'am designing a GUI remote control, but instead of making separate buttons for each remote button, i want to get a full ready remote image and set certain parts of it click-able. is there a way rather than the motion event to do this?
Outflorks Usus
  • 319
  • 1
  • 3
  • 5
29
votes
7 answers

Can I have an onclick event on a imagemap area element?

I would like to put an onclick event on an area element. Here is my setup:
danyo
  • 5,686
  • 20
  • 59
  • 119
22
votes
6 answers

how to visualise/debug an imagemap?

I'm dynamically generating an imagemap for a chart tool I have. I was hoping to be able to set a border or color on the area tags so I could check everything was being generated with the right coords, but a little research shows this is not…
fearofawhackplanet
  • 52,166
  • 53
  • 160
  • 253
20
votes
6 answers

How to get the path coordinates of a shape for use with image-maps?

I am creating an image map using ImageMapster from here. I have created a photoshop image with several images that I have cut out from the original photographs. Each image is on a separate layer. Now, I need to get the path coordinates of each…
bgmCoder
  • 6,205
  • 8
  • 58
  • 105
19
votes
3 answers

Android image map. - displaying an .svg and using it as an image map (touch zones)

I am looking for a way to display an image and have the user tap on different parts of the image to navigate and perform actions. I was considering using an invisible color map to check which parts have been touched. But since i also want to…
pumpkee
  • 3,357
  • 3
  • 27
  • 34
18
votes
6 answers

Set a background color on the HTML element?

Is there any way to set a background color for the HTML element? I'm creating an image map where certain sections of the map will pop up a tooltip when you mouse over them, and I thought it would be cool (and convenient) if I could set a…
daGUY
  • 27,055
  • 29
  • 75
  • 119
16
votes
5 answers

Does (HTML5) Canvas have the equivalent of an image map?

Does the Canvas element have the equivalent of img's map, so you can define clickable areas on the canvas element? There is brief mention of a map halfway down the page here: http://www.w3.org/TR/html5/the-canvas-element.html, but I can't find…
Mr. Flibble
  • 26,564
  • 23
  • 69
  • 100
15
votes
3 answers

How do I give a border around the ?

I want a border around the active link part of the image that is defined by the coordinates. I currently have implemented to the extent that when the user clicks, the outline is visible by using: outline-color, thanks to href. I need a border around…
Souvik Das
  • 173
  • 1
  • 1
  • 8
15
votes
6 answers

How do I highlight parts of an imagemap on mouseover?

I need to display an imagemap with about 70 areas in it. The area of the imagemap the mouse cursor is currently at is supposed to be highlighted in a certain color. Is this possible and if yes, how?
Maximilian
  • 4,728
  • 5
  • 29
  • 28
14
votes
11 answers

image map not working on iOS devices, with large images that get rescaled by the device

I'm developing an internal web app on our company intranet using PHP. One section of the app displays a couple of high resolution images to the user. These images are in the region of 5000x3500 pixels. Each image has an image map (using rectangular…
Bryan
  • 3,224
  • 9
  • 41
  • 58
1
2 3
…
57 58