<html>
<head>
<script type="text/javascript">
<!--
var
Selection,
Coords,
Red,
Img,
state, p1, p2;
function Init() {
Selection = -1;
state = 0;
Coords = new Array();
Red = new getObj("red");
Img = new getObj("overview");
installHandlers();
}
function installHandlers() {
// event handler für Img installieren
// Img.obj.addEventListener("mousemove", onMouseMove, true);
Img.obj.addEventListener("mousedown", Click, true);
// event handler für Red installieren
// Red.obj.addEventListener("mousemove", onMouseMove, true);
Red.obj.addEventListener("mousedown", Click, true);
};
function calcX(obj) {
if (!obj) { obj = this.obj };
var curleft = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curleft += obj.offsetLeft;
obj = obj.offsetParent;
};
}
else if (obj.x) { curleft += obj.x; };
return curleft;
}
function calcY(obj) {
if (!obj) { obj = this.obj };
var curtop = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curtop += obj.offsetTop;
obj = obj.offsetParent;
};
}
else if (obj.y) { curtop += obj.y; };
return curtop;
}
function getObj(name) {
if (document.getElementById) {
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
}
else if (document.all) {
this.obj = document.all[name];
this.style = document.all[name].style;
}
else if (document.layers) {
this.obj = document.layers[name];
this.style = document.layers[name];
};
this.getX = calcX;
this.getY = calcY;
this.x = this.getX();
this.y = this.getY();
this.w = this.obj.offsetWidth;
this.h = this.obj.offsetHeight;
this.area = this.w * this.h;
}
function ShowRedFrame(spot, img, fx, fy, fw, fh) {
with (spot.style) {
left = img.x + fx * img.w;
top = img.y + fy * img.h;
width = fw * img.w;
height = fh * img.h;
visibility = 'visible';
};
}
function NoRedFrame(spot) {
with (spot.style) {
left = 0;
top = 0;
width = 0;
height = 0;
visibility = 'hidden';
};
}
function Point(event) {
this.pageX = parseInt(event.pageX);
this.pageY = parseInt(event.pageY);
this.x = this.pageX - parseInt(Img.x);
this.y = this.pageY - parseInt(Img.y);
return this;
}
function DrawFrame() {
with (Red.style) {
left = Math.min(p1.x, p2.x) + Img.x;
top = Math.min(p1.y, p2.y) + Img.y;
width = Math.abs(p1.x - p2.x);
height = Math.abs(p1.y - p2.y);
visibility = 'visible';
};
}
function CoordsStr() {
var imW = Img.w;
var imH = Img.h;
var cx = Math.min(p1.x, p2.x)/imW;
var cy = Math.min(p1.y, p2.y)/imH;
var cw = Math.abs(p1.x - p2.x)/imW;
var ch = Math.abs(p1.y - p2.y)/imH;
return (
cx.toFixed(4) + ',' +
cy.toFixed(4) + ',' +
cw.toFixed(4) + ',' +
ch.toFixed(4) );
}
function Move(event) {
p2 = new Point(event);
DrawFrame();
}
function Click(event) {
if (state == 0) {
state = 1;
p1 = new Point(event);
p2 = p1;
Red.obj.addEventListener("mousemove", Move, true);
Img.obj.addEventListener("mousemove", Move, true);
} else {
state = 0;
p2 = new Point(event);
Red.obj.removeEventListener("mousemove", Move, true);
Img.obj.removeEventListener("mousemove", Move, true);
}
DrawFrame();
document.form.coordstr.value = CoordsStr();
}
function Coord(name, element, cx, cy, cw, ch) {
// berechnet aus DIGLIB Koordinaten (0.0 - 1.0) Pixel-Koordinaten relativ zum tag "element"
var OW = element.obj.offsetWidth;
var OH = element.obj.offsetHeight;
this.element = element;
this.link = new getObj(name);
this.linkname = name;
this.linkstyle = this.link.style;
this.cx = cx;
this.cy = cy;
this.cw = cw;
this.ch = ch;
this.x = cx * OW;
this.y = cy * OH;
this.w = cw * OW;
this.h = ch * OH;
this.area = this.h * this.w;
return this;
}
function inCoords(coord, p) {
// liegt Punkt "p" im Rechteckfeld "coord"?
with (coord) {
return (
(p.x >= x) &&
(p.y >= y) &&
(p.x <= x + w) &&
(p.y <= y + h));
};
}
function Highlight(coords, nr, high) {
// selektiert/delektiert Rechteckfeld und Link im Array "coords", Index "nr"
if (nr == -1) { NoRedFrame(Red); return };
with (coords[nr]) {
if (high) {
ShowRedFrame(Red, element, cx, cy, cw, ch);
linkstyle.backgroundColor = '#f0dfdf';
}
else { linkstyle.backgroundColor = ''; };
};
}
function getCoords(event, element, coords) {
// "mousemove" event handler; berechnet kleinstes Rechteckfeld unter dem Mauszeiger
// setzt "Selection" als Index in das Array "coords"
var p = new Point(event, element);
var AR = element.area;
var i = 0;
Highlight(coords, Selection, undefined); // unselect last index
Selection = -1;
while (i < coords.length) {
var coord = coords[i];
if (inCoords(coord, p)) {
var ar = coord.area;
if (ar < AR) { AR = ar; Selection = i };
}
i += 1;
};
Highlight(coords, Selection, 1); // select new index
}
function Link() {
// Datensatz des selektierten Rechteckfelds in den Browser laden
if (Selection != -1) {
window.location.href = Coords[Selection].linkname;
};
}
function onMouseMove(event) {
getCoords(event, Img, Coords);
}
//-->
</script>
</head>
<body onload="Init()">
<form id="form" name="form" method="post" action="ECHO_enterCoords">
<input type="text" id="coordstr" name="coordstr">
<input type="submit">
</form>
<span tal:repeat="coord python:here.coords" tal:replace="coord"/>
<img id="overview" tal:attributes="src python:here.aq_parent.overview.getId()">
<div id="red" style="position: absolute; top: 0; left: 0; width: 0; height: 0; background: url(red.gif); visibility: visible;">
</div>
</body>
</html>
FreeBSD-CVSweb <freebsd-cvsweb@FreeBSD.org>