Search jQuery

jQuery Forum

[jQuery] binding click event to area (image map)

in Using jQuery • 14 years ago

Hey Guys,
Not entirely sure what this is not working but have the following code:
js:
 $('.optSelectMe').click(function(){
 $('.noShowing').addClass('noNakedEye').removeClass('noShowing');
 $('#'+$(this).attr('meta')).addClass('noShowing').removeClass('noNakedEye').highlightFade('yellow');
 return false;
 });
html:
 <img src="img/004.jpg" usemap="#Map" class="textLeft" border="0"/>
 <map name="Map" id="Map">
 <area meta="optA" class="optSelectMe" shape="poly" coords="19,56,59,15,111,3,111,109,19,56" href="#" alt="" />
 <area meta="optB" class="optSelectMe" shape="poly" coords="111,109,111,3,160,15,203,55,111,109" href="#" alt="" />
 <area meta="optC" class="optSelectMe" shape="poly" coords="111,109,203,55,219,109,203,162,111,109" href="#" alt="" />
 <area meta="optD" class="optSelectMe" shape="poly" coords="111,109,203,162,160,204,111,216,111,109" href="#" alt="" />
 <area meta="optE" class="optSelectMe" shape="poly" coords="111,109,111,216,59,204,18,162,111,109" href="#" alt="" />
 <area meta="optF" class="optSelectMe" shape="poly" coords="111,109,18,162,3,109,19,56,111,109" href="#" alt="" />
 </map> 
error:
[Exception...
"'Dimensions: jQuery collection is empty' when calling method:
[nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e
(NS_ERROR_XPC_JS_THREW_STRING)" location: "<unknown>" data: no]
even if I do below, I still get the same error:
 $('.optSelectMe').click(function(){
 $(this)
 return false;
 });

I am using v1.2.1, any ideas?

--
Benjamin Sterling
<a href="http://www.KenzoMedia.com">http://www.KenzoMedia.com</a>
<a href="http://www.KenzoHosting.com">http://www.KenzoHosting.com</a>
<a href="http://www.benjaminsterling.com">http://www.benjaminsterling.com</a>

Replies(2)

alexandre2

Re: [jQuery] binding click event to area (image map)

14 years ago

hi benjamin,
should'nt it better to use:
$('area.optSelectMe').bind("click",function(){
// do this and that
});
that error message you get comes from dimensions.js, which typically return that message when the element sent to dimension cannot be found in the DOM.
---------- Original Message ----------
To: jquery-en (jquery-en@googlegroups.com)
From: Benjamin Sterling (benjamin.sterling@kenzomedia.com)
Subject: [jQuery] binding click event to area (image map)
Date: 28/1/2008 15:46:51
Hey Guys,
Not entirely sure what this is not working but have the following code:
js:
 $('.optSelectMe').click(function(){
 $('.noShowing').addClass('noNakedEye').removeClass('noShowing');
 $('#'+$(this).attr('meta')).addClass('noShowing').removeClass('noNakedEye').highlightFade('yellow');
 return false;
 });
html:
 <img src="img/004.jpg" usemap="#Map" class="textLeft" border="0"/>
 <map name="Map" id="Map">
 <area meta="optA" class="optSelectMe" shape="poly" coords="19,56,59,15,111,3,111,109,19,56" href="#" alt="" />
 <area meta="optB" class="optSelectMe" shape="poly" coords="111,109,111,3,160,15,203,55,111,109" href="#" alt="" />
 <area meta="optC" class="optSelectMe" shape="poly" coords="111,109,203,55,219,109,203,162,111,109" href="#" alt="" />
 <area meta="optD" class="optSelectMe" shape="poly" coords="111,109,203,162,160,204,111,216,111,109" href="#" alt="" />
 <area meta="optE" class="optSelectMe" shape="poly" coords="111,109,111,216,59,204,18,162,111,109" href="#" alt="" />
 <area meta="optF" class="optSelectMe" shape="poly" coords="111,109,18,162,3,109,19,56,111,109" href="#" alt="" />
 </map>
error:
[Exception... "'Dimensions: jQuery collection is empty' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "<unknown>" data: no]
even if I do below, I still get the same error:
 $('.optSelectMe').click(function(){
 $(this)
 return false;
 });
I am using v1.2.1, any ideas?
--
Benjamin Sterling
http://www.KenzoMedia.com
http://www.KenzoHosting.com
http://www.benjaminsterling.com
Alexandre Plennevaux - LAb[au] asbl.vzw / MediaRuimte
Lakensestraat/Rue de Laeken 104
B-1000 Brussel-Bruxelles-Brussels
Belgie-Belgique-Belgium
Tel:+32(0)2.219.65.55
Fax:+32(0)2.426.69.86
Mobile:+32(0)476.23.21.42
http://www.lab-au.com
http://www.mediaruimte.be
__________________________________________________________________________
The information in this e-mail is intended only for the addressee named above.
If you are not that addressee, please note that any disclosure, distribution or copying of this e-mail is prohibited.
Because e-mail can be electronically altered, the integrity of this communication cannot be guaranteed.
__________________________________________________________________________

benjamin...

Re: [jQuery] binding click event to area (image map)

14 years ago

Alexandre,
Thanks, the dimesions plugn was the issue. But sadly I need the dimensions plugin. Not sure why this is an issue.
Thanks.
<div>On 1/28/08, Alexandre Plennevaux <<a href="mailto:alexandre@lab-au.com">alexandre@lab-au.com</a>> wrote:<blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
hi benjamin,
should'nt it better to use:
$('area.optSelectMe').bind("click",function(){
// do this and that
});
that error message you get comes from dimensions.js, which typically return that message when the element sent to dimension cannot be found in the DOM.
---------- Original Message ----------
To: jquery-en (<a href="mailto:jquery-en@googlegroups.com">jquery-en@googlegroups.com</a>)
From: Benjamin Sterling (<a href="mailto:benjamin.sterling@kenzomedia.com">benjamin.sterling@kenzomedia.com</a>)
Subject: [jQuery] binding click event to area (image map)
Date: 28/1/2008 15:46:51
Hey Guys,
Not entirely sure what this is not working but have the following code:
js:
 $('.optSelectMe').click(function(){
 $('.noShowing').addClass('noNakedEye').removeClass('noShowing');
 $('#'+$(this).attr('meta')).addClass('noShowing').removeClass('noNakedEye').highlightFade('yellow');
 return false;
 });
html:
 <img src="img/004.jpg" usemap="#Map" class="textLeft" border="0"/>
 <map name="Map" id="Map">
 <area meta="optA" class="optSelectMe" shape="poly" coords="19,56,59,15,111,3,111,109,19,56" href="#" alt="" />
 <area meta="optB" class="optSelectMe" shape="poly" coords="111,109,111,3,160,15,203,55,111,109" href="#" alt="" />
 <area meta="optC" class="optSelectMe" shape="poly" coords="111,109,203,55,219,109,203,162,111,109" href="#" alt="" />
 <area meta="optD" class="optSelectMe" shape="poly" coords="111,109,203,162,160,204,111,216,111,109" href="#" alt="" />
 <area meta="optE" class="optSelectMe" shape="poly" coords="111,109,111,216,59,204,18,162,111,109" href="#" alt="" />
 <area meta="optF" class="optSelectMe" shape="poly" coords="111,109,18,162,3,109,19,56,111,109" href="#" alt="" />
 </map>
error:
[Exception... "'Dimensions: jQuery collection is empty' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "<unknown>" data: no]
even if I do below, I still get the same error:
 $('.optSelectMe').click(function(){
 $(this)
 return false;
 });
I am using v1.2.1, any ideas?
--
Benjamin Sterling
<a href="http://www.KenzoMedia.com">http://www.KenzoMedia.com</a>
<a href="http://www.KenzoHosting.com">http://www.KenzoHosting.com</a>
<a href="http://www.benjaminsterling.com">http://www.benjaminsterling.com</a>
Alexandre Plennevaux - LAb[au] asbl.vzw / MediaRuimte
 Lakensestraat/Rue de Laeken 104
 B-1000 Brussel-Bruxelles-Brussels
 Belgie-Belgique-Belgium
Tel:+32(0)2.219.65.55
 Fax:+32(0)2.426.69.86
 Mobile:+32(0)476.23.21.42
 <a href="http://www.lab-au.com">http://www.lab-au.com</a>
 <a href="http://www.mediaruimte.be">http://www.mediaruimte.be</a>
__________________________________________________________________________
The information in this e-mail is intended only for the addressee named above.
 If you are not that addressee, please note that any disclosure, distribution or copying of this e-mail is prohibited.
 Because e-mail can be electronically altered, the integrity of this communication cannot be guaranteed.
__________________________________________________________________________
</blockquote></div>
 
--
Benjamin Sterling
<a href="http://www.KenzoMedia.com">http://www.KenzoMedia.com</a>
<a href="http://www.KenzoHosting.com">http://www.KenzoHosting.com</a>
<a href="http://www.benjaminsterling.com">http://www.benjaminsterling.com</a>

Top Reply

Response title

Attachments

jQuery Forum

[jQuery] binding click event to area (image map)

Replies(2)

Re: [jQuery] binding click event to area (image map)

Re: [jQuery] binding click event to area (image map)

Statistics

Tags

Actions