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
7
votes
8 answers

Resize image map on window resize

I'm trying to resize an image map on window resize event. The closest I've gotten is to use a mouseclick event, but it needs to be window resize for what I'm doing. I'm using Firefox 3.5.5 I'm using jquery somewhat. Here's my example - the area…
Kozy
  • 2,691
  • 3
  • 18
  • 11
7
votes
4 answers

Difference between IMAGE MAPS and CSS SPRITES

I could not find the clear difference between IMAGE MAPS and CSS SPRITES. Both are looking like combining the images in the page into one? So we can reduce multiple requests to the server. So what is the real difference?
Stranger
  • 10,332
  • 18
  • 78
  • 115
7
votes
1 answer

Image maps and HTML5

This question is more philosophical than technical. I've trained myself as a web developer back when web developers were called webmasters and my tool of choice was FrontPage, moving onto Evrsoft 1st Page 2000. That was the last time I used an HTML…
Emphram Stavanger
  • 4,158
  • 9
  • 35
  • 63
6
votes
2 answers

iPhone, Map, Clickable non-rectangular areas

Anyone have any ideas on how I could implement the following on the iPhone? We have a map of the US, and it has different regions (climate regions, I believe) that are different colors. They are not rectangular, and don't follow state or zip or…
Matt Dawdy
  • 19,247
  • 18
  • 66
  • 91
6
votes
3 answers

Convert SVG image path to Image Map coordinates?

Can I convert SVG image paths to Image map coordinates? Lets assume that I have this SVG Image http://www.openclipart.org/people/ArtFavor/anatomy26.svg i want to convert the paths in the SVG somehow to Imagemap coordinates so i can make an…
RulE_BreakeR
  • 63
  • 1
  • 1
  • 5
6
votes
2 answers

How to detect area tag onClick in a Image Map in React

I want to detect the onClick & onHover on different parts of a image. bpleft
Pabba Anu Bharath
  • 61
  • 1
  • 1
  • 4
6
votes
2 answers

Adding hover effects for links in image map (area)

I'm only a beginner in html and I would like to put hover effects for my image map. I have searched for lots of solutions but I only come up with solutions using script which I don't understand. How does this script work? I tried using area:hover…
user4194677
6
votes
1 answer

Swiping over an iframe, passing click events, and elementFromPoint returning null on imagemap area

I have an HTML document that includes 3 iframes representing previous, current, and next pages. I'm trying to enable page swiping (via the jQuery touchswipe plugin), but also let clicks go through to the document inside the iframe. Here's the…
JeffR
  • 313
  • 6
  • 13
6
votes
3 answers

Div, Background Image, and Image Map

On a web page I'm creating, I have a div with a background image. I overlay some text over the image that I'll be changing frequently, so that's why I'm using a background image and real text instead of an img tag that contains the text. The…
Coolmoondog
  • 71
  • 1
  • 1
  • 2
6
votes
2 answers

Showing tooltip on moving div over image

What I have is: I have an image of a pie chart shown I have an image map of the pie chart The default browser tooltip is shown on mouse move over the image What I am trying to do is: On pie chart slice touchmove, move the Green Marker (a div) on…
Nagesh Salunke
  • 1,278
  • 3
  • 14
  • 37
6
votes
1 answer

Image Map: Click to echo/print text on screen

Is it possible to click a portion of an image map and print out some text, be it the alt or title value of that tag somewhere on the page? Could I do this through jQuery? I've looked and I'm struggling to do so (very rusty with jQuery, and a…
scrot
  • 1,647
  • 8
  • 24
  • 31
6
votes
2 answers

Javascript code for finding min distance from a point to polygon (as defined by html area)

I have an image map with multiple areas defined, all as polygons I would like to calculate the distance from a point on the image (typically given by the user clicking on the image) to the closes point on the outer edge of a given area. For my case…
RAGgen
  • 61
  • 3
6
votes
3 answers

How to make a click-able graph by networkx?

I am trying to produce a clickable image of a graph in python. I directly called graphviz at first, then discovered networkx http://networkx.lanl.gov . I'd like my program to obtain info about which node is displayed at the (x,y) coordinate where…
alessandro
  • 3,838
  • 8
  • 40
  • 59
6
votes
1 answer

Extracting coordinates of a path from an SVG file

I'm trying to find percise coordinates from a path in Adobe Illustrator to use in an HTML image map and someone suggested I save the path as an SVG file, however when I open the SVG in note pad, I get the following:
dcd0181
  • 1,493
  • 4
  • 29
  • 52
6
votes
1 answer

Calculating SVG paths

I have a quite complex image map (made up of over 150 pieces) and I want to convert the coords within the map to SVG path standard format. The reason why is I want to use the following instead of an image map http://raphaeljs.com/australia.html. But…
vdh_ant
  • 12,720
  • 13
  • 66
  • 86
1 2
3
…
57 58