it-swarm.com.de

kann ich ein onclick-ereignis auf einem bild-bereichselement haben

Ich möchte ein Onclick-Event auf ein Flächenelement setzen. Hier ist mein Setup:

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

Ich habe zwei verschiedene Möglichkeiten ausprobiert, um ein Onclick-Ereignis durchzuführen. Zuerst habe ich es versucht:

$(".blue").click( function(event){
    alert('test');
});

Ich habe das auch probiert:

function myFunction() {
    alert('test');
}

Keine der oben genannten Arbeiten. Unterstützen Flächenelemente das Obige oder unterstützen sie nur eine href?

Danke im Voraus!

21
danyo

Passt auf:

  1. Attribut href ist obligatorisch, ohne dass der area-tag nichts tut!

  2. Um ein Klickereignis hinzuzufügen, müssen Sie die Standard-Href blockieren.


Ihr Code sollte wie folgt beginnen:

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

Live-Beispiel hier.

25
user4227915

Basierend auf Ihren Kommentaren brauchen Sie nur Folgendes:

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

Demo:

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

2
Pedro Lobito

Versuchen :

<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>

Sie möchten keine onClick-Ereignisse zu Bereich, Dokumentation hinzufügen: 

Das Tag definiert einen Bereich innerhalb einer Image-Map (eine Image-Map ist ein Bild mit anklickbaren Bereichen).

Bearbeiten: Ihre Koordinaten sind ein bisschen komisch, da sie für die Paare der einzelnen Scheitelpunkte gedacht sind (Ihr Polygon ist also gerade eine Linie).

1
Jules

Es ist die Form, die das Problem ist. Ihr Code hat die Form gleich dem Polygon, hat jedoch nur 4 Punkte im Koordinatenattribut. Sie müssen stattdessen die Form auf ein Rechteck setzen. 

Set shape = "rect" wie folgt:

<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>

1
treeFan

Dies ist eine einfache:

<area class="blue" onclick="alert('test');" shape="poly" coords="2318,480,1510,1284" href="#">
<area class="blue" onclick="//JavaScript Code//" shape="poly" coords="2318,480,1510,1284" href="#">
0
TimorEranAV

Diese Frage wurde von @TimorEranAV HTML-Map gefunden, die Text anzeigt, anstatt auf eine URL Zu verweisen, und wurde als Duplikat markiert, aber ich glaube, was er erwartet hat, ist

<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>

Das Titel-Tag gibt hier die Möglichkeit, einen Hover-Text (Tipp) zur Imagemap hinzuzufügen.

0
MLPJ

Verwenden Sie eine Klasse für alle Elemente, die Sie abhören möchten, und optional ein Attribut für das Verhalten:

<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>

Fügen Sie dann Ihren Ereignis-Listenern alle Elemente in der Klasse hinzu:

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
weird_error