Esta podría ser una página que implementa las distintas funciones utilizadas. El código *.css no es trivial y debería modificarse con sumo cuidado.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style type="text/css">
body{cursor : crosshair;}
DIV.contenedorejes { border:1px solid black;background-color : white; width: 400; height : 400;clear : left; position : relative ; left : 0px; top : 0px; }
DIV.ejeX{ width : 1px; height : 2px; clear : left; position : absolute; font-size : 0px; background-color : black; }
DIV.ejeXcompleto{ clear : left; position : absolute; font-size : 0px; background-color : black; }
DIV.ejeY{ width : 2px; height : 1px; clear : left; position : absolute; font-size : 0px; background-color : black; }
DIV.ejeYcompleto{ clear : left; position : absolute; font-size : 0px; background-color : black; }
DIV.punto{ width : 2px; height : 2px; clear : left; position : absolute; font-size : 0px; background-color : red; }
DIV.texto{ clear : left; position : absolute; font-size : 12px; color :blue; }
</style>
<script type="text/javascript">
// ancho y alto del contenedor
var ancho = 400;
var alto = 400;
var x0 = 0;
var y0 = 0;
var unid_long;
if(navigator.appVersion.indexOf("MSIE") != -1) var IE = true;
function ejes_cartesianos(origenX,origenY,pixelunid){
document.getElementById('contenedorejes').innerHTML = "";
// origenes de coordenadas
x0 = origenX;
y0 = origenY;
// longitud unidades
unid_long = pixelunid;
// numero de unidades eje x+
var num_unids_x_p = (ancho-x0)/unid_long;
// numero de unidades eje x-
var num_unids_x_n = x0/unid_long;
// numero unidades eje y+
var num_unids_y_p = y0/unid_long;
// numero unidades eje y-
var num_unids_y_n = (alto-y0)/unid_long;
// EJES
// EJE X completo
x = 0;
y = y0;
punto= document.createElement("div");
if(IE) punto.setAttribute("className","ejeXcompleto");
else punto.setAttribute("class","ejeXcompleto");
punto.style.left = x + "px";
punto.style.top = y + "px";
punto.style.width = ancho + "px";
punto.style.height = 1 + "px";
document.getElementById('contenedorejes').appendChild(punto);
// eje x divisiones
// eje x +
for(i=0;i<=num_unids_x_p;i++){
x = x0 + i*unid_long;
y = y0;
punto= document.createElement("div");
if(IE) punto.setAttribute("className","ejeX");
else punto.setAttribute("class","ejeX");
punto.style.left = x + "px";
punto.style.top = y + "px";
document.getElementById('contenedorejes').appendChild(punto);
}
// eje x-
for(i=0;i<=num_unids_x_n;i++){
x = x0 - i*unid_long;
y = y0;
punto= document.createElement("div");
if(IE) punto.setAttribute("className","ejeX");
else punto.setAttribute("class","ejeX");
punto.style.left = x + "px";
punto.style.top = y + "px";
document.getElementById('contenedorejes').appendChild(punto);
}
// EJE Y
// EJE Y completo
x = x0;
y = 0;
punto= document.createElement("div");
if(IE) punto.setAttribute("className","ejeXcompleto");
else punto.setAttribute("class","ejeXcompleto");
punto.style.left = x + "px";
punto.style.top = y + "px";
punto.style.width = 1 + "px";
punto.style.height = alto + "px";
document.getElementById('contenedorejes').appendChild(punto);
// eje y divisiones
// eje y+
for(i=0;i<=num_unids_y_p;i++){
x = x0;
y = y0 - i*unid_long;
punto= document.createElement("div");
if(IE) punto.setAttribute("className","ejeY");
else punto.setAttribute("class","ejeY");
punto.style.left = x + "px";
punto.style.top = y + "px";
document.getElementById('contenedorejes').appendChild(punto);
}
// eje y-
for(i=0;i<=num_unids_y_n;i++){
x = x0;
y = y0 + i*unid_long;
punto= document.createElement("div");
if(IE) punto.setAttribute("className","ejeY");
else punto.setAttribute("class","ejeY");
punto.style.left = x + "px";
punto.style.top = y + "px";
document.getElementById('contenedorejes').appendChild(punto);
}
}
function Browser() {
this.isIE = false; // Internet Explorer
this.isNS = false; // Netscape
this.isOpera = false; // Opera
if (navigator.userAgent.indexOf("Netscape6/") >= 0) {
this.isNS = true;
return;
}
if (navigator.userAgent.indexOf("Gecko") >= 0) {
this.isNS = true;
return;
}
if (navigator.userAgent.indexOf("MSIE") >=0 && navigator.userAgent.indexOf("Opera") <0) {
this.isIE = true;
return;
}
if (navigator.userAgent.indexOf("Opera") >=0) {
this.isOpera = true;
return;
}
}
var browser = new Browser();
function initMovimiento(event){
cancelar();
if (browser.isIE || browser.isOpera) {
document.attachEvent("onmousemove", getposicion);
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS) {
document.addEventListener("mousemove", getposicion, true);
event.preventDefault();
}
}
function initPulsar(event){
cancelar();
if (browser.isIE || browser.isOpera) {
document.attachEvent("onclick", getposicion);
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS) {
document.addEventListener("click", getposicion, true);
event.preventDefault();
}
}
function getposicion(event){
if (browser.isIE || browser.isOpera) {
x = (window.event.clientX-x0)/unid_long;
y = (y0-window.event.clientY)/unid_long;
}
if (browser.isNS) {
x = (event.clientX-x0)/unid_long;
y = (y0-event.clientY)/unid_long;
}
dibujaPunto(x,y);
}
function cancelar() {
if (browser.isIE || browser.isOpera) {
document.detachEvent("onmousemove", getposicion);
document.detachEvent("onclick", getposicion);
}
if (browser.isNS ) {
document.removeEventListener("mousemove", getposicion, true);
document.removeEventListener("click", getposicion, true);
}
}
function dibujaPunto(m,n){
var xP = m;
var yP = -n;
x = x0 + xP*unid_long;
y = y0 + yP*unid_long;
punto= document.createElement("div");
if(IE) punto.setAttribute("className","punto");
else punto.setAttribute("class","punto");
punto.style.left = x + "px";
punto.style.top = y + "px";
document.getElementById('contenedorejes').appendChild(punto);
// el texto que acompaña a los puntos
m = Math.round(10*xP)/10;
n = Math.round(10*(-yP))/10;
var texto = "("+ m + "," + n + ")";
textoPunto = document.createTextNode(texto);
divTexto = document.createElement("div");
if(IE) divTexto.setAttribute("className","texto");
else divTexto.setAttribute("class","texto");
divTexto.style.left = (x+6) + "px";
divTexto.style.top = (y-6) + "px";
divTexto.appendChild(textoPunto);
document.getElementById('contenedorejes').appendChild(divTexto);
}
</script>
</head>
<body onload="ejes_cartesianos(200,200,40)">
<div id="contenedorejes" class="contenedorejes" onmouseOver="initPulsar(event)" onmouseOut="cancelar()"></div>
</body>
</html>
