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
2
votes
1 answer

How to make responsive imagemap WITH highlight on mouseover?

I need to make responsive imagemap with highlight when the mouse is over the specific part of the image. Can it be done (and how) using ONLY JavaScript, html and CSS ? I found some threads here but only for the part with the responsive imagemap and…
Christian
  • 45
  • 5
2
votes
0 answers

Javascript Array with Links

I am using an javascript array to swap images and act like a slide show. I am looking to apply an image map to each image and link to a specific page when clicked. I need to code an image map hot spot covering a rectangle from (24,247) to (174,284)…
CCRaiff
  • 43
  • 1
  • 10
2
votes
3 answers

html image map stops working on iOS Safari

So, there's an html page with an image map (img tag with usemap attribute) and clickable areas. Lately, I think after iOS 15 upgrade on iphone (XR, XS, 13), Safari stops firing onclick event on areas. Initially onclick works if you tap lightly, with…
igorp
  • 23
  • 4
2
votes
0 answers

Draw area on image to get coordinates

I need to have options to upload img and drow area on that img and save coordinates to JSON. Similar like here https://www.image-map.net/ I search for libraries but nothing that I can really use. Here is lib for angularJS, but can not use it in…
Arter
  • 2,224
  • 3
  • 29
  • 66
2
votes
1 answer

Responsive ImageMap rwdImageMaps not working

I have been using rwdImageMaps 1.6 with JQuery 3.5.1 for the past year on several projects without any issue. Just today, I realize that the map areas are not working anymore. Coordinates return as NaN. Google Chrome - not working Edge - not…
Samuel Tan
  • 31
  • 4
2
votes
1 answer

Antd Tooltip on an image useMap reactjs

Why is my ANTD tooltip position is always fix on a straight line no matter how i change the style of the tooltips? Here's the link for the problem stated: https://codesandbox.io/s/tooltip-image-v9q3t?file=/index.js Please enlighten me!
student404
  • 47
  • 1
  • 8
2
votes
1 answer

How can I add an image map to dynamically created chart of PHP gd library?

I'm building a chart populated from the database. Now, I wanted to click each point to drill down some information to users. I don't know how to integrate image mapping to each element of the chart dynamically created on the fly. Can you please…
brukekek
  • 25
  • 1
  • 4
2
votes
1 answer

How do you use imagemap control in asp.net with masterpages

I have got a masterpage with a picture on it, I attached the image map control with the picture.. but when i navigate to a child page.. the picture is not triggered. Is there a way to put an image map control on the masterpage and activate it…
Matrix001
  • 1,272
  • 6
  • 30
  • 51
2
votes
3 answers

Clicking to an anchor from and image map causing page to move unnecessarily

I realize I'm still pretty new here, but I have a static image (Google Map but not using Google API yet) in which I have created hotspots which will pull up location data that lives in a table to the left of the map. When a hotspot is clicked on,…
rlphilli
  • 111
  • 1
  • 4
  • 17
2
votes
3 answers

php dynamically generate coords for image map

I have a map with a grid on it. each cell of the grid will be a clickable area on the map via image map coords. I would like to do this dynamically to save writing all this code for the image maps, but I can't quite figure out the statement or…
chaoskreator
  • 889
  • 1
  • 17
  • 39
2
votes
1 answer

how do i get a bunch of squares to look like the border of Croatia?

I decided to use SVGs to generate squares and images I need. SVGs are flexible and that should work with me. I can't figure out how can I generate squares to fit inside the border of Croatia. End result I'd like to have can be seen in (see image…
Misko Mali
  • 617
  • 1
  • 7
  • 17
2
votes
1 answer

Image map set background image for circle area

I have created an image map with a dot. Now I want to change the color or the image of the dot at CSS Hover. Is it possible to solve this with CSS, or is Javascript required? What other options do I have with HTML Area?
noc500
  • 23
  • 2
2
votes
1 answer

Internet Explorer not recognizing CSS for SVG elements

I have an SVG image map with hover styles on the links. (More on SVG image maps here.) All respectable browsers I've tested on are displaying it correctly. IE is not having any of it (surprise!)... (I'm only concerned with IE11, not super-archaic…
Mentalist
  • 1,530
  • 1
  • 18
  • 32
2
votes
1 answer

Image map in Flex

Anyone have an example of doing something like an image map in Flex? I'm not sure if that is the correct term, since I also want to do things like highlight the selected part of the image or show a popup bubble pointing to it. Any ideas?
Abdullah Jibaly
  • 53,220
  • 42
  • 124
  • 197
2
votes
0 answers

How to create image-map in jssor slider

How to use image-map on jssor. its not working, the link disappears. I have tried the given code.