The code is as shown below.
<HEAD>
<TITLE>Selecting an Element in DHTML</TITLE>
<SCRIPT LANGUAGE="JavaScript" SRC="../include/browser.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
var name = null;
function whichElement (evnt)
{
if (isNS4)
{
var testElem;
var xPos = evnt.pageX;
var yPos = evnt.pageY;
for (var i = document.layers.length - 1; i >= 0; i--)
{
testElem = document.layers[i];
var x = (testElem.left + testElem.clip.width);
var y = (testElem.top + testElem.clip.height);
if (xPos > testElem.left && xPos < x && yPos > testElem.top && yPos < y)
{
name = testElem.name;
alert ('You are on ' + name + '.');
return;
}
}
}
else
{
name = event.srcElement.name;
alert ('You are on ' + name + '.');
return;
}
return;
}
</SCRIPT>
<STYLE TYPE="text/css">
#kitty { top: 5px; left: 5px; }
#VictoriaFalls { top: 150px; left: 200px; }
#WaveJumper { top: 5px; left: 300px; }
.picture { position: absolute; }
</STYLE>
</HEAD>
<BODY>
<A HREF="../dhtmlidx.html">Dynamic HTML Index</A><BR><BR>
<SPAN ID="kitty" CLASS="picture">
<A HREF="#" onClick="whichElement (event);">
<IMG SRC="../graphics/kitty.jpg" BORDER="0" NAME="kitty">
</A>
</SPAN>
<SPAN ID="VictoriaFalls" CLASS="picture">
<A HREF="#" onCLick="whichElement (event)">
<IMG SRC="../graphics/VictoriaFalls.jpg" BORDER="0" NAME="VictoriaFalls">
</A>
</SPAN>
<SPAN ID="WaveJumper" CLASS="picture">
<A HREF="#" onClick="whichElement (event)">
<IMG SRC="../graphics/WaveJumper.jpg" BORDER="0" NAME="WaveJumper">
</A>
</SPAN>