// This scripts available from - http://www.viewsource.dk
// LOts of free Java Applets, DHTML and Javascript

// *****   This goes in the head section   *****

<script language=javaScript>
<!-- Beginning of JavaScript -

// CREDITS:
// PeopleMarker by Urs Dudli and Peter Gehrig 
// Copyright (c) 2000 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.24fun.com.
// info@24fun.ch
// 7/14/2000

// IMPORTANT: 
// If you add this script to a script-library or script-archive 
// you have to add a link to http://www.24fun.com on the webpage 
// where the scrips will be running.

// CONFIGURATION:
// Go to www.24fun.com, open category 'utility' and download 
// the full-version of this script as ZIP-file containing the test-image, 
// the marker-image and the script-file with colorized  
// step-by-step instructions for non-programmers.

// the url of your image (in this sample the people-picture)
var imgurl="yourimage147.jpg"

// the url of your marker-image (in this sample it's a transparent circle)
var markerurl="circlemarker.gif"

// set the horizontal position of the image (distance to the left margin of the window, pixels)
var x_imgposition=5

// set the vertical position of the image (distance to the top margin of the window, pixels)
var y_imgposition=10

// do not edit the variables below
var preloadimgurl=new Image()
preloadimgurl.src=imgurl

var preloadmarkerurl=new Image()
preloadmarkerurl.src=markerurl

var isloaded=false

function initiate() {
	if(document.all) {
		yourimage.innerHTML="<img src="+imgurl+">"
		document.all.yourimage.style.posLeft=x_imgposition
		document.all.yourimage.style.posTop=y_imgposition
		
		markerimage.innerHTML="<img src="+markerurl+">"
		document.all.markerimage.style.posLeft=x_imgposition
		document.all.markerimage.style.posTop=y_imgposition
		isloaded=true
	}
	if(document.layers) {
		document.yourimage.document.write("<img src="+imgurl+">")
		document.yourimage.document.close()
		document.yourimage.left=x_imgposition
		document.yourimage.top=y_imgposition
		
		document.markerimage.document.write("<img src="+markerurl+">")
		document.markerimage.document.close()
		document.markerimage.left=x_imgposition
		document.markerimage.top=y_imgposition
		isloaded=true
	}
}

function setmarkerto(x_pos,y_pos) {
	if(document.all && isloaded) {
		var x_marker=eval(x_pos)+eval(x_imgposition)
		var y_marker=eval(y_pos)+eval(y_imgposition)
		document.all.markerimage.style.posLeft=x_marker
		document.all.markerimage.style.posTop=y_marker
	}
	if(document.layers && isloaded) {
		var x_marker=eval(x_pos)+eval(x_imgposition)
		var y_marker=eval(y_pos)+eval(y_imgposition)
		document.markerimage.left=x_marker
		document.markerimage.top=y_marker
	}
}
// - End of JavaScript - -->
</script>

// *****   This goes in the body section   *****

<body bgcolor="#003399" onLoad="initiate()">

<div id="yourimage" style="position:absolute;left:0px;top:0px;"></div>

<div id="markerimage" style="position:absolute;left:0px;top:0px"></div>

<div id="peoplenames" style="position:absolute;left:330px;top:10px;">
<ul>
<font face=Verdana size=3 color=red><b>Test the script</b></font>
<font face=Verdana color=black size=1><br>
<li>Click on any name to see the marker-effect:<br>
<a href="javascript:setmarkerto('47','103')"><font face=Verdana color=blue size=1>Mary</font></a>, 
<a href="javascript:setmarkerto('75','137')"><font face=Verdana color=blue size=1>Ann</font></a>, 
<a href="javascript:setmarkerto('129','118')"><font face=Verdana color=blue size=1>Mia</font></a>, 
<a href="javascript:setmarkerto('214','123')"><font face=Verdana color=blue size=1>Rita</font></a>, 
<a href="javascript:setmarkerto('263','112')"><font face=Verdana color=blue size=1>Gina</font></a>,
<a href="javascript:setmarkerto('176','142')"><font face=Verdana color=blue size=1>Sue</font></a>, 
<a href="javascript:setmarkerto('275','19')"><font face=Verdana color=blue size=1>Ron</font></a>
</font>
</ul>
</div>

