发表新帖
发表新帖

can i have an onclick event on a imagemap area element

前端 未结
关注
7 1129
死守一世寂寞
死守一世寂寞 2020-12-03 09:52

I would like to put an onclick event on an area element. Here is my setup:
相关标签:
7条回答
  • 栀梦
    2020-12-03 10:30

    Try :

    <img  src="wheel.png" width="2795" height="2795" alt="Weels" usemap="#map">

<map name="map">
 <area shape="poly" coords="2318,480,1510,1284" alt="otherThing" href="anotherFile">
</map>

    You souldn't want to add onClick events on area, documentation :

    The tag defines an area inside an image-map (an image-map is an image with clickable areas).

    Edit : your coords are a bit weird since its supposed to the couples of each vertices (so right now, your polygon is a line)

    0 讨论(0)
  • 爱一瞬间的悲伤
    2020-12-03 10:32

    Based on your comments, you just need this:

    $("#image").click( function(){
 alert("clicked");
//your code here
});

    Demo:

    http://codepen.io/tuga/pen/waBQBZ

    0 讨论(0)
  • 无人及你
    2020-12-03 10:35

    Its the shape that's the problem. Your code has set shape equal to polygon but only has 4 points in the coordinates attribute. You need to set shape to rectangle instead.

    Set shape="rect" like this:

    <img id="image" src="wheel.png" width="2795" height="2795" usemap="#Map" > <map name="Map"> <area class="blue" onclick="myFunction()" shape="rect" coords="2318,480,1510,1284" href="#"> </map>

    0 讨论(0)
  • 鱼传尺愫
    2020-12-03 10:36

    Use a class for all elements you want to listen on, and optionally an attribute for behavior:

    <map name="primary">
  <area shape="circle" coords="75,75,75" class="popable" data-text="left circle text">
  <area shape="circle" coords="275,75,75" class="popable" data-text="right circle text">
</map>
<img usemap="#primary" src="http://placehold.it/350x150" alt="350 x 150 pic">
<div class='popup hidden'></div>

    Then add your event listeners to all elements in the class:

    const popable = document.querySelectorAll('.popable');
const popup = document.querySelector('.popup');
let lastClicked;

popable.forEach(elem => elem.addEventListener('click', togglePopup));

function togglePopup(e) {
  popup.innerText = e.target.dataset.text;

  // If  clicking something else, first restore '.hidden' to popup so that toggle will remove it.
  if (lastClicked !== e.target) {
    popup.classList.add('hidden');
  }
  popup.classList.toggle('hidden');
  lastClicked = e.target;  // remember the target
}

    Demo: https://codepen.io/weird_error/pen/xXPNOK

    0 讨论(0)
  • 我在风中等你
    2020-12-03 10:44

    I found this question by @TimorEranAV HTML map that displays text instead of linking to a URL and was marked as duplicate, but i think what he was expecting is this,

    <html>
<head>
 <title> Program - Image Map</title>
</head>
<body>


 <img src="new.png" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" title = "Sun">
  <area shape="rect" coords="82,0,100,126" href="mercur.htm" alt="Mercury" title = "Mercury">

</map>

</body>
</html>

    Here the title tag gives the opportunity to add a hover text(tip) to the image map.

    0 讨论(0)
  • 礼貌的吻别
    2020-12-03 10:49

    Pay attention:

    1. Attribute href is obligatory, without it the area-tag does nothing!

    2. To add a click event, you'll need to block default href.

    Your code should start as follows:

    $(".blue").on("click", function(e){
    e.preventDefault();
    /*
       your code here
    */
});

    Live example here.

    0 讨论(0)
 看不清?
提交回复
热议问题