views:

115

answers:

2

I would like to display area tag name after a person clicks on it. Unfortunately when I use code below for map area I get undefined name of obiekt name. It's weird because for textbox 'kot' it works well.

<script>

function metoda(obiekt)
{
    alert(obiekt.name); //Here I get undefined!
}

</script>

<input type='text' value='kot' name='das' onclick='metoda(this);'></input>
<map name='mapkama'>
   <area 
      name='AE' 
      shape='POLY' 
      coords='285,87,287,90,288,87,285,87' 
      href='#'  
      title='' 
      onclick='metoda(this); return false;'>
</map>

<img usemap="#mapkama" src='http://myimage.com/image'&gt;

How to display area name from metoda function?

+1  A: 

Hi,

The below code returns me the value of the name properly.

<script> 

function metoda(obiekt) 
{ 
    alert(obiekt.name); 
} 

</script> 

<input type='text' value='kot' name='das' onclick='metoda(this);'></input> 

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
  <area name='AE1' shape="rect" coords="0,0,82,126" href="#" alt="Sun" onclick='metoda(this); return false;'/>
</map> 

Only difference is that, I am using a rect shape whereas you are using poly. Can you check if using rect or circle help you.

Sachin Shanbhag
this still returns undefined.
rob waminal
You mean for the rect, it returns undefined? One thing I noticed, that the poly shape co-ordinates need to be proper in order to get click co-ordinates
Sachin Shanbhag
@Sachin Shanbhag The same as for rob - undefined. I've updated my source code to the real life scenario I have, so you will be able to reproduce it easily
tomaszs
Or better not because it's a bunch of code. This example is enough I think
tomaszs
@tomaszs - I am able to get the value AE as output on running above modified code. If this helps, I am using IE8 version 8.0.6001.18702 browser.
Sachin Shanbhag
@Sachin Shanbhag For poly? I am using FF 3.5 and for poly it's not working...
tomaszs
A: 

using jquery you can achieve this by

<script type="text/javascript"> 

function metoda(obiekt) 
{ 
    alert(obiekt.getAttribute("name")); 
} 

</script> 

<input type='text' value='kot' name='das' onclick='metoda(this);'></input> 

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
  <area name='AE1' shape="rect" coords="0,0,82,126" href="#" alt="Sun" onclick='metoda(this); return false;'/>
</map> 
rob waminal
I can't use JQuery, only JS
tomaszs
hi I have edited my answer, `obiekt.getAttribute("name")` should do it.
rob waminal