|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Example File From "JavaScript and DHTML Cookbook"
Published by O'Reilly & Associates
Copyright 2003 Danny Goodman
-->
<html>
<head>
<title>Mouse roll over</title>
<style type="text/CSS">
.direction {background-color:#00ffff;
width:100px;
height:50px;
text-align:center
}
#main {background-color:#fff6666; text-align:center}
html {background-color:#cccccc}
body {background-color:#eeeeee; font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:12px;
margin-left:15%; margin-right:15%; border:3px groove darkred; padding:15px}
h1 {text-align:right; font-size:1.5em; font-weight:bold}
h2 {text-align:left; font-size:1.1em; font-weight:bold; text-decoration:underline}
.buttons {margin-top:10px}
</style>
<script type="text/javascript">
function showArrival(evt) {
var direction = "";
evt = (evt) ? evt : ((window.event) ? event : null);
if (evt) {
var elem = (evt.target) ? evt.target : ((evt.srcElement) ?
evt.srcElement : null);
if (elem) {
// limit processing to element nodes
if (elem.nodeType == 1) {
// for W3C DOM property
if (evt.relatedTarget) {
if (evt.relatedTarget != elem.firstChild) {
direction = (evt.relatedTarget.firstChild) ?
evt.relatedTarget.firstChild.nodeValue : "parts unknown";
}
// for IE DOM property
} else if (evt.fromElement) {
direction = (event.fromElement.innerText) ?
event.fromElement.innerText : "parts unknown";
}
// display results
document.getElementById("direction").value = "Arrived from: " +
direction;
}
}
}
}
function showDeparture(evt) {
var direction = "";
evt = (evt) ? evt : ((window.event) ? event : null);
if (evt) {
var elem = (evt.target) ? evt.target : ((evt.srcElement) ?
evt.srcElement : null);
if (elem) {
// limit processing to element nodes
if (elem.nodeType == 1) {
// for W3C DOM property
if (evt.relatedTarget) {
if (evt.relatedTarget != elem.firstChild) {
direction = (evt.relatedTarget.firstChild) ?
evt.relatedTarget.firstChild.nodeValue : "parts unknown";
}
// for IE DOM property
} else if (evt.toElement) {
direction = (event.toElement.innerText) ?
event.toElement.innerText : "parts unknown";
}
// display results
document.getElementById("direction").value = "Departed to: " +
direction;
}
}
}
}
</script>
</head>
<body>
<h1>Cursor Arrival/Departure</h1>
<hr />
<table cellspacing="0" cellpadding="25">
<tr><td></td><td class="direction">North</td><td></td></tr>
<tr><td class="direction">West</td>
<td id="main" onmouseover="showArrival(event)"
onmouseout="showDeparture(event)">Roll</td>
<td class="direction">East</td></tr>
<tr><td></td><td class="direction">South</td><td></td></tr>
</table>
<form name="output">
<input id="direction" type="text" size="30" />
</form>
</body>
</html>
|