I have a partial view in which I put an image in png format. For the image I have a set of points with their coordinates x1, y1. I need to put some kind of buttons (for example, with width=18 and height=23) over the image and locate them according to their coordinates. When the user clicks on a button, I want alert() function run. How can I do it? When the user will resize the window, the image would also resize, so the coordinates should be recalculating to be appeared on the right place.
Asked
Active
Viewed 1,125 times
0
-
you should set the anchor property – Muhammad Ali Sep 28 '14 at 16:16
-
use absolute position and percentage for top and left – charlietfl Sep 28 '14 at 17:22
-
I've found the solution here: http://stackoverflow.com/questions/48474/how-do-i-position-one-image-on-top-of-another-in-html – Dmitry Stepanov Sep 29 '14 at 08:43
1 Answers
0
I think what you're looking for is the <map> tag, specifically called image-map.
Example:
<img src="https://ctd.ucsd.edu/wp-content/uploads/2012/11/ABCD_VotingCard.png" usemap="#map"/>
<map name="map">
<area shape="rect" coords="8,8,132,100" title="A" onclick="alert('A')">
<area shape="rect" coords="158,8,282,100" title="B" onclick="alert('B')">
<area shape="rect" coords="8,124,132,216" title="C" onclick="alert('C')">
<area shape="rect" coords="158,124,282,216" title="D" onclick="alert('D')">
</map>
Here's a demonstration.
Nikunj Madhogaria
- 2,139
- 2
- 23
- 40