Piszę makietę (używając HTML, JS / jQuery) i CSS dla klienta, która wymaga posiadania pojedynczego obrazu (interfejsu) z zastosowaną Mapą. Z powodów, których nie wyjaśnię po kliknięciu określonego obszaru, wykonywana jest akcja, która obejmuje animację, a następnie zmianę obrazusrc (więc wygląda na to, że porusza się między interfejsami), a następnie stosuję inną obrazkę na obrazie (być może powinienem powiedzieć<img> etykietka)

Klient poprosił o to, wiem, że wydaje się to szaleństwem, ale nie mam żadnych narzędzi makiet do wykonywania animacji itp. Itd ...

Zauważyłem wzorzec i mogłem zmienić mój kod, aby był łatwiejszy do rozszerzenia i utrzymania. Zastanawiałem się jednak, czy mam następujący kod HTML:

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

Czy jest możliwe, aby określić za pomocą JavaScript lub jQuery, jeśli obszar został kliknięty? Wtedy mógłbym zidentyfikować identyfikator i wykonać prawidłowe działania. Obecnie posiadam wiele różnych warunków, takich jak ...

 $("#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');
                    }
                    });
                });
            });

Jeśli jednak wiem, który obszar został kliknięty (przez określenie identyfikatora), mogę zastosować wartości tablicowe do funkcji ogólnej, a nie konkretnie do obszarów mapy.

Myślałem, że mogę określić id tego, co zostało kliknięte, coś takiego:

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

jednak wpłynie to na całą moją stronę, co nie stanowi problemu, ale wiem, że to nie zadziała.

Przepraszam, jeśli nie wytłumaczyłem się dobrze lub moje sformułowanie jest słabe. W razie potrzeby mogę rozszerzyć lub przeredagować.

Dzięki

AKTUALIZACJA

Rozwiązałem to, jeśli zastosuję identyfikator do mapy, używając poniższego, zwrócę identyfikator

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