Ich schreibe ein Modell (unter Verwendung von HTML, JS / jQuery) und CSS für einen Client, bei dem ein einzelnes Bild (einer Schnittstelle) mit einer darauf angewendeten Map vorliegt. Aus Gründen, die ich nicht erläutere, wenn auf einen bestimmten Bereich geklickt wird, wird eine Aktion ausgeführt, die eine Animation enthält und dann das Bild ändertsrc (es sieht also so aus, als würde es sich zwischen den Oberflächen bewegen) und dann wende ich eine andere Imagemap auf das Bild an (sollte ich vielleicht sagen)<img> Etikett)

Der Kunde hat danach gefragt, ich weiß, es scheint wie Wahnsinn, aber ich habe keine Mockup-Tools, um die Animationen usw. auszuführen.

Ich habe ein Muster bemerkt und konnte meinen Code überarbeiten, damit er einfacher zu erweitern und zu warten ist. Allerdings habe ich mich gefragt, ob ich das folgende HTML habe:

<img src="claas_ipad3.jpg" USEMAP="#claas_ipad3" width="1130" height="871" alt="" border="0" id="mainPage">
    <map name="claas_ipad3">
      <area shape="rect" coords="181,249,255,341" href=""  alt="" id="Contacts">
      <area shape="rect" coords="345,251,454,341" href=""  alt="" id="Appointments">
      <area shape="rect" coords="533,256,576,311" href=""  alt="" id="Maps">
      <area shape="rect" coords="686,255,785,344" href=""  alt="" id="Tasks">
      <area shape="rect" coords="835,246,973,348" href=""  alt="" id="Products">
      <area shape="rect" coords="176,412,278,513" href=""  alt="" id="Reports">
      <area shape="rect" coords="330,411,457,513" href=""  alt="" id="PriceTable">
      <area shape="rect" coords="502,399,637,518" href=""  alt="" id="SalesCycle">
      <area shape="rect" coords="677,398,808,519" href=""  alt="" id="MetaData">
      <area shape="rect" coords="844,408,970,510" href=""  alt="" id="Settings">
      <area shape="rect" coords="173,545,283,662" href=""  alt="" id="Vids">
      <area shape="rect" coords="328,558,461,652" href=""  alt="" id="Web">
      <area shape="rect" coords="491,559,626,666" href=""  alt="" id="Files">
    </map>

Kann ich mithilfe von JavaScript oder jQuery feststellen, ob ein Bereich angeklickt wurde? Dann konnte ich die ID identifizieren und die richtigen Aktionen ausführen. Was ich derzeit habe, sind viele verschiedene Bedingungen wie ...

 $("#Contacts").click(function(event){
            event.preventDefault();

            // okay lets show the contacts interface
            $("#mainPage").fadeOut(300, function(){
                $(this).attr('src','claas_ipad3_1.jpg').bind('onreadystatechange load', function(){
                    if (this.complete){
                        $(this).fadeIn(300);
                        $(this).attr('USEMAP','#claas_ipad_1');
                    }
                    });
                });
            });

Wenn ich jedoch weiß, auf welchen Bereich geklickt wurde (durch Bestimmen der ID), kann ich Array-Werte auf eine generische Funktion anwenden, anstatt sie spezifisch an die Kartenbereiche zu binden.

Ich dachte, ich könnte die ID des angeklickten Elements wie folgt ermitteln:

$(this).live('click', function () {
    alert($(this).attr('id')); 
});

Dies wirkt sich jedoch auf meine gesamte Seite aus. Dies ist kein Problem, aber ich weiß, dass es nicht funktionieren wird.

Tut mir leid, wenn ich mich nicht gut erklärt habe oder mein Wortlaut schlecht ist. Auf Wunsch kann ich erweitern oder umformulieren.

Vielen Dank

AKTUALISIEREN

Ich habe dieses Problem gelöst, wenn ich eine ID auf die Karte anwende, die Folgendes verwendet, wird die ID zurückgegeben

 $("#Map1 area").click( function () {
        alert($(this).attr('id')); // this
    });