WRITINGS BY PETER BYERS

This is a novelty from which your sit might benefit ! Even if it does not, it could teach you some techniques that could benefit you in other areas.

The first page is not essential, it is just a means of getting some interesting text to appear under the spotlight. Click here to start the demonstration. The code for this page is shown below.

<HTML>
<HEAD>
<TITLE>INPUT FOR SPOTLITE</TITLE>
</HEAD>
<BODY>
<B>
Either leave the text that is already in the box
<BR>
or get rid of it and type your own text
<BR>
and send it
</B>
<P>
<FORM METHOD="POST" ACTION="spotlitec.asp">
<TEXTAREA NAME="your_text" COLS="80" ROWS="6" WRAP="VIRTUAL">
Hello - how are you
I hope that you are having a good day
Take care
</TEXTAREA>
<p>
<INPUT TYPE="SUBMIT" VALUE="Send It">
<P>
<B>
When the net page comes up, move the mouse around !!
</B>
</FORM>
</BODY>
</HTML>

You will see that the on submission, it lanches an Active Server Page - the scipt for that page is shown below.

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<script language="javascript" src="findDOM.js"></script>
		<script language="javascript">
	<!--
	var evt = null;
var isNS = 0;

if (navigator.appName.indexOf('Netscape') != -1) {isNS = 1;}

function defaultEvents(evt) { 
 	if (isNS) {
 	      document.captureEvents(Event.MOUSEMOVE) 
 	}
 	if (isDHTML){
	document.onmousemove = followMe;
	}
}

function followMe(evt) {
	if (isNS) event = evt;
	domStyle = findDOM('spotLight',1);
	if (event.pageX != null) {
		domStyle.left = event.pageX - 150;
		domStyle.top = event.pageY - 150;
		return;
	}
	else {
		domStyle.left = event.x - 150;
		domStyle.top = event.y - 150;
		return;
	}
}
// -->
</script>
		<title>DHTML for the WWW | Follow the Mouse.</title>
		<style media="screen" type="text/css"><!--
#spotLight {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 0;
	}
#content {
	font: bold 50px fantasy;
	position: absolute;
	top: 100px;
	left: 100px;
	z-index: 100;
	}
body {
	background-color: black;
	color : black;
	cursor: none;
	}

--></style>
	</head>

	<body onload="defaultEvents(event)">
		<span id="spotLight"><img src="spotLight.gif" width="300" height="300"></span>
		
		<div id="content"><% =Replace(Request.Form( "your_text" ), VbCrLf, "<BR>") %></div>
	</body>

</html>

You will see that the page uses a file called findDOM.js - this file provides the wherewithall for DHTML to work on either Explorer or Netscape. The code for it is shown below.

var isDHTML = 0;
var isID = 0;
var isAll = 0;
var isLayers = 0;


if (document.getElementById) {isID = 1; isDHTML = 1;}
else {
if (document.all) {isAll = 1; isDHTML = 1;}
else {
browserVersion = parseInt(navigator.appVersion);
if ((navigator.appName.indexOf('Netscape') != -1) && (browserVersion == 4)) {isLayers = 1; isDHTML = 1;}
}}

function findDOM(objectID,withStyle) {
	if (withStyle == 1) {
		if (isID) { return (document.getElementById(objectID).style) ; }
		else { 
			if (isAll) { return (document.all[objectID].style); }
		else {
			if (isLayers) { return (document.layers[objectID]); }
		};}
	}
	else {
		if (isID) { return (document.getElementById(objectID)) ; }
		else { 
			if (isAll) { return (document.all[objectID]); }
		else {
			if (isLayers) { return (document.layers[objectID]); }
		};}
	}
}

A small .GIF file is needed it is spotLight.gif click here to see it in your browser and then save it on your PC

Now there - aint that simple !!

I do hope that it has been interesting or of benefit to you.