Я пишу макет (используя HTML, JS/jQuery) и CSS для клиента, который включает в себя наличие одного изображения (интерфейса) с привязанной к нему Картой. По причинам, которые я не буду объяснять, когда нажимается определенная область, выполняется действие, которое включает анимацию, а затем меняет изображение src
(так что это похоже на перемещение между интерфейсами), а затем я применяю другую картинку к изображению (возможно, я должен сказать тег <img>
)
Клиент попросил об этом, я знаю, что это похоже на безумие, но у меня нет инструментов макета для выполнения анимаций и т.д. и т.д.
Я заметил шаблон, и я мог бы реорганизовать свой код, чтобы его легче было расширять и поддерживать. Однако мне было интересно, скажем, у меня есть следующий 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>
Возможно ли, чтобы я определил использование JavaScript или jQuery, если была нажата область? Затем я мог идентифицировать идентификатор и выполнить правильные действия. У меня в настоящее время много разных условий, таких как...
$("#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');
}
});
});
});
Однако, если я знаю, какая область была нажата (путем определения идентификатора), я могу применить значения массива к общей функции, а не привязываться к конкретным областям карты.
Я думал, что могу определить идентификатор того, что было нажато на что-то вроде этого:
$(this).live('click', function () {
alert($(this).attr('id'));
});
однако это повлияет на всю мою страницу, что не является проблемой, но я знаю, что это не сработает.
Извините, если я не объяснил себя хорошо, или моя формулировка плохая. При желании я могу продлить или изменить.
Спасибо
UPDATE
Я решил это, если я применил идентификатор к карте, используя следующее, вернет ID
$("#Map1 area").click( function () {
alert($(this).attr('id')); // this
});