Is it possible to use onClick with an Image in Mozilla?

[j_liu21]

I'm trying to trigger a javascript call when someone clicks on an
image.

<a href="javascript:void(0)" onClick="alert('hi');"><IMG src="foo.gif"
usemap="#someImageMap" border="0"></a>

This works in I.E., but will only work in Mozilla (using 1.0.5) if
there is text and the user must click on the text and not the image to
trigger the alert:

<a href="javascript:void(0)" onClick="alert('hi');"><IMG src="foo.gif"
usemap="#someImageMap" border="0">works if you click on this text</a>

 

[j_liu21]

Actually it seems it does work if I remove the usemap feature.

<a href="javascript:void(0)" onClick="alert('hi');"><IMG src="foo.gif"
border="0"></a>

The problem is I need to use the imagemap to determine where they
click, but because the imagemap is reused multiple times, I don't have
the context of which image the user actually clicked.

<a href="javascript:void(0)" onClick="alert('hi');"><IMG src="foo1.gif"
name="foo1" usemap="#someImageMap" border="0"></a>

<a href="javascript:void(0)" onClick="alert('hi');"><IMG src="foo2.gif"
name="foo2" usemap="#someImageMap" border="0"></a>

Is there any way to capture this context in the map itself where I can
retrieve the name?
<map name="someImageMap">
<area shape="rect" coords="0,0,15,16" onClick="inputValue(1,this)"
ALT="Section 1">
<area shape="rect" coords="16,0,33,16" onClick="inputValue(2,this)"
ALT="Section 2">
</map>

 

[ASM]

I'm trying to trigger a javascript call when someone clicks on an
image.

<a href="javascript:void(0)" onClick="alert('hi');"><IMG src="foo.gif"
usemap="#someImageMap" border="0"></a>

on my idea
you can't have simultanously a click on
- an image (complete aera of image)
- a part of image (aera from map)
How does browser know what he has to do ? how to choice ?

and your sentance :

Is there any way to capture this context in the map itself where I can
retrieve the name?

has no signification for me. What are you talking about ?

<a href="javascript:void(0)" onClick="alert('hi');"><IMG src="foo.gif"
usemap="#someImageMap" border="0">works if you click on this text</a>

of corse ! the link extands to the text ...

 

[RobG]

Actually it seems it does work if I remove the usemap feature.

<a href="javascript:void(0)" onClick="alert('hi');"><IMG src="foo.gif"
border="0"></a>

The problem is I need to use the imagemap to determine where they
click, but because the imagemap is reused multiple times, I don't have
the context of which image the user actually clicked.

<a href="javascript:void(0)" onClick="alert('hi');"><IMG src="foo1.gif"
name="foo1" usemap="#someImageMap" border="0"></a>

<a href="javascript:void(0)" onClick="alert('hi');"><IMG src="foo2.gif"
name="foo2" usemap="#someImageMap" border="0"></a>

Is there any way to capture this context in the map itself where I can
retrieve the name?
<map name="someImageMap">
<area shape="rect" coords="0,0,15,16" onClick="inputValue(1,this)"
ALT="Section 1">
<area shape="rect" coords="16,0,33,16" onClick="inputValue(2,this)"
ALT="Section 2">
</map>

Pass 'this' from your area elements, then from the inputValue function
call a 'getMap' function that climbs up the node tree looking for
the parent map element, something like:

HTML:

<map ...>
<area ... onClick="inputValue(1, this)" ... >
<area ... onClick="inputValue2, this)" ... >
...
</map>


Script:

function inputValue( num, el ){
var mapRef;
if ( el && (mapRef = getMap(el)) ) {
// do stuff with the map reference
// ...
} else {
// couldn't find the map element
}
}

function getMap( a ){
while ( a.parentNode && 'map' != a.nodeName.toLowerCase() ){
a = a.parentNode;
}
return ( 'map' == a.nodeName.toLowerCase() )? a : false;
}

 

[j_liu21]

Hmm, after some investigation into nodes and I'm still missing
something. Maybe a better explanation is to consider the NetFlix stars
example. Employ one common imagemap (star rating), but with the need
to update different fields corresponding to repeated images based on
the common imagemap. How can one take advantage of the imagemap areas
while maintaining the context of the actual image clicked? In other
words, depending upon where javascript is initiated, I can determine
either their rating or the appropriate movie, but not both.

 

[j_liu21]

Well, after some more thinking and searching, looks like the Node idea
don't quite work in this situation because there is no hierarchy
between the imagemap and the images that use it. I found this post
back in 1999 without any new posts disputing it. Multiple imagemaps it
is.

http://groups-beta.google.com/group...e+images+usemap&rnum=1&hl=en#ee3c164d1fff8660

 

[RobG]

Well, after some more thinking and searching, looks like the Node idea
don't quite work in this situation because there is no hierarchy
between the imagemap and the images that use it. I found this post
back in 1999 without any new posts disputing it. Multiple imagemaps it
is.

http://groups-beta.google.com/group...e+images+usemap&rnum=1&hl=en#ee3c164d1fff8660

Ah yes, I thought you wanted to find the map, not the image.

It seems that the area element traps the click event and stops it
propagating.

As Martin suggests in your link, you could implement this in pure
JavaScript or a combination of map element and JavaScript, but there are
accessibility issues in that.