<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ejes coordenados</title>
<style type="text/css">
body{
background-color : black;
}
DIV.contenedor {
border: 1px solid black;
width: 402;
height : 402;
position : relative;
left : 0px;
top : 0px;
}
DIV.ejeX{
width : 2px;
height : 3px;
clear : left;
position : absolute;
font-size : 0px;
background-color : yellow;
}
DIV.ejeXcompleto{
clear : left;
position : absolute;
font-size : 0px;
background-color : yellow;
}
DIV.ejeY{
width : 3px;
height : 2px;
clear : left;
position : absolute;
font-size : 0px;
background-color : yellow;
}
DIV.ejeYcompleto{
clear : left;
position : absolute;
font-size : 0px;
background-color : yellow;
}
</style>
</head>
<body>
<div style="float:left"><a href="javascript:ejes_cartesianos(0,150,20)">Ejemplo 1</a>
<a href="javascript:ejes_cartesianos(115,150,30)">Ejemplo 2</a>
<a href="javascript:ejes_cartesianos(250,250,50)">Ejemplo 3</a>
<a href="javascript:ejes_cartesianos(0,400,15)">Ejemplo 3</a>
</div>
<div style="float:right">
<div id="contenedor" class="contenedor">
</div>
</div>
<script type="text/javascript">
function ejes_cartesianos(origenX,origenY,pixelunid){
document.getElementById('contenedor').innerHTML = "";
if(navigator.appVersion.indexOf("MSIE") != -1) var IE = true;
// ancho y alto del contenedor
var ancho = 400;
var alto = 400;
// origenes de coordenadas
var x0 = origenX;
var y0 = origenY;
// longitud unidades x
var unid_long_x_p = pixelunid;
var unid_long_x_n = pixelunid;
// longitud unidades y
var unid_long_y_p = pixelunid;
var unid_long_y_n = pixelunid;
// numero de unidades eje x+
if (unid_long_x_p != 0){
var num_unids_x_p = (ancho-x0)/unid_long_x_p;
}
else num_unids_x_p = 0;
// numero de unidades eje x-
if (unid_long_x_n != 0){
var num_unids_x_n = x0/unid_long_x_n;
}
else num_unids_x_n = 0;
// numero unidades eje y+
if (unid_long_y_p != 0){
var num_unids_y_p = y0/unid_long_y_p;
}
else num_unids_y_p = 0;
// numero unidades eje y-
if (unid_long_y_n != 0){
var num_unids_y_n = (alto-y0)/unid_long_y_n;
}
else num_unids_y_n = 0;
// 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('contenedor').appendChild(punto);
// eje x +
for(i=0;i<=num_unids_x_p;i++){
x = x0 + i*unid_long_x_p;
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('contenedor').appendChild(punto);
}
// eje x-
for(i=0;i<=num_unids_x_n;i++){
x = x0 - i*unid_long_x_n;
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('contenedor').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('contenedor').appendChild(punto);
// eje y+
for(i=0;i<=num_unids_y_p;i++){
x = x0;
y = y0 - i*unid_long_y_p;
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('contenedor').appendChild(punto);
}
// eje y-
for(i=0;i<=num_unids_y_n;i++){
x = x0;
y = y0 + i*unid_long_y_n;
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('contenedor').appendChild(punto);
}
}
</script>
</body>
</html>
