Selecting an Element in DHTML




















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>