Annotation of ECHO_content/ECHO_draw.zpt, revision 1.1.1.1
1.1 casties 1: <html>
2: <head>
3: <script type="text/javascript">
4: <!--
5:
6: var
7: Selection,
8: Coords,
9: Red,
10: Img,
11: state, p1, p2;
12:
13: function Init() {
14: Selection = -1;
15: state = 0;
16: Coords = new Array();
17: Red = new getObj("red");
18: Img = new getObj("overview");
19: installHandlers();
20: }
21:
22: function installHandlers() {
23: // event handler für Img installieren
24: // Img.obj.addEventListener("mousemove", onMouseMove, true);
25: Img.obj.addEventListener("mousedown", Click, true);
26: // event handler für Red installieren
27: // Red.obj.addEventListener("mousemove", onMouseMove, true);
28: Red.obj.addEventListener("mousedown", Click, true);
29: };
30:
31: function calcX(obj) {
32: if (!obj) { obj = this.obj };
33: var curleft = 0;
34: if (obj.offsetParent) {
35: while (obj.offsetParent) {
36: curleft += obj.offsetLeft;
37: obj = obj.offsetParent;
38: };
39: }
40: else if (obj.x) { curleft += obj.x; };
41: return curleft;
42: }
43:
44: function calcY(obj) {
45: if (!obj) { obj = this.obj };
46: var curtop = 0;
47: if (obj.offsetParent) {
48: while (obj.offsetParent) {
49: curtop += obj.offsetTop;
50: obj = obj.offsetParent;
51: };
52: }
53: else if (obj.y) { curtop += obj.y; };
54: return curtop;
55: }
56:
57: function getObj(name) {
58: if (document.getElementById) {
59: this.obj = document.getElementById(name);
60: this.style = document.getElementById(name).style;
61: }
62: else if (document.all) {
63: this.obj = document.all[name];
64: this.style = document.all[name].style;
65: }
66: else if (document.layers) {
67: this.obj = document.layers[name];
68: this.style = document.layers[name];
69: };
70: this.getX = calcX;
71: this.getY = calcY;
72: this.x = this.getX();
73: this.y = this.getY();
74: this.w = this.obj.offsetWidth;
75: this.h = this.obj.offsetHeight;
76: this.area = this.w * this.h;
77: }
78:
79: function ShowRedFrame(spot, img, fx, fy, fw, fh) {
80: with (spot.style) {
81: left = img.x + fx * img.w;
82: top = img.y + fy * img.h;
83: width = fw * img.w;
84: height = fh * img.h;
85: visibility = 'visible';
86: };
87: }
88:
89: function NoRedFrame(spot) {
90: with (spot.style) {
91: left = 0;
92: top = 0;
93: width = 0;
94: height = 0;
95: visibility = 'hidden';
96: };
97: }
98:
99:
100: function Point(event) {
101: this.pageX = parseInt(event.pageX);
102: this.pageY = parseInt(event.pageY);
103: this.x = this.pageX - parseInt(Img.x);
104: this.y = this.pageY - parseInt(Img.y);
105: return this;
106: }
107:
108: function DrawFrame() {
109: with (Red.style) {
110: left = Math.min(p1.x, p2.x) + Img.x;
111: top = Math.min(p1.y, p2.y) + Img.y;
112: width = Math.abs(p1.x - p2.x);
113: height = Math.abs(p1.y - p2.y);
114: visibility = 'visible';
115: };
116: }
117:
118: function CoordsStr() {
119: var imW = Img.w;
120: var imH = Img.h;
121: var cx = Math.min(p1.x, p2.x)/imW;
122: var cy = Math.min(p1.y, p2.y)/imH;
123: var cw = Math.abs(p1.x - p2.x)/imW;
124: var ch = Math.abs(p1.y - p2.y)/imH;
125: return (
126: cx.toFixed(4) + ',' +
127: cy.toFixed(4) + ',' +
128: cw.toFixed(4) + ',' +
129: ch.toFixed(4) );
130: }
131:
132: function Move(event) {
133: p2 = new Point(event);
134: DrawFrame();
135: }
136:
137: function Click(event) {
138: if (state == 0) {
139: state = 1;
140: p1 = new Point(event);
141: p2 = p1;
142: Red.obj.addEventListener("mousemove", Move, true);
143: Img.obj.addEventListener("mousemove", Move, true);
144: } else {
145: state = 0;
146: p2 = new Point(event);
147: Red.obj.removeEventListener("mousemove", Move, true);
148: Img.obj.removeEventListener("mousemove", Move, true);
149: }
150: DrawFrame();
151: document.form.coordstr.value = CoordsStr();
152: }
153:
154: function Coord(name, element, cx, cy, cw, ch) {
155: // berechnet aus DIGLIB Koordinaten (0.0 - 1.0) Pixel-Koordinaten relativ zum tag "element"
156: var OW = element.obj.offsetWidth;
157: var OH = element.obj.offsetHeight;
158: this.element = element;
159: this.link = new getObj(name);
160: this.linkname = name;
161: this.linkstyle = this.link.style;
162: this.cx = cx;
163: this.cy = cy;
164: this.cw = cw;
165: this.ch = ch;
166: this.x = cx * OW;
167: this.y = cy * OH;
168: this.w = cw * OW;
169: this.h = ch * OH;
170: this.area = this.h * this.w;
171: return this;
172: }
173:
174: function inCoords(coord, p) {
175: // liegt Punkt "p" im Rechteckfeld "coord"?
176: with (coord) {
177: return (
178: (p.x >= x) &&
179: (p.y >= y) &&
180: (p.x <= x + w) &&
181: (p.y <= y + h));
182: };
183: }
184:
185: function Highlight(coords, nr, high) {
186: // selektiert/delektiert Rechteckfeld und Link im Array "coords", Index "nr"
187: if (nr == -1) { NoRedFrame(Red); return };
188: with (coords[nr]) {
189: if (high) {
190: ShowRedFrame(Red, element, cx, cy, cw, ch);
191: linkstyle.backgroundColor = '#f0dfdf';
192: }
193: else { linkstyle.backgroundColor = ''; };
194: };
195: }
196:
197: function getCoords(event, element, coords) {
198: // "mousemove" event handler; berechnet kleinstes Rechteckfeld unter dem Mauszeiger
199: // setzt "Selection" als Index in das Array "coords"
200: var p = new Point(event, element);
201: var AR = element.area;
202: var i = 0;
203: Highlight(coords, Selection, undefined); // unselect last index
204: Selection = -1;
205: while (i < coords.length) {
206: var coord = coords[i];
207: if (inCoords(coord, p)) {
208: var ar = coord.area;
209: if (ar < AR) { AR = ar; Selection = i };
210: }
211: i += 1;
212: };
213: Highlight(coords, Selection, 1); // select new index
214: }
215:
216: function Link() {
217: // Datensatz des selektierten Rechteckfelds in den Browser laden
218: if (Selection != -1) {
219: window.location.href = Coords[Selection].linkname;
220: };
221: }
222:
223:
224: function onMouseMove(event) {
225: getCoords(event, Img, Coords);
226: }
227:
228:
229:
230:
231: //-->
232: </script>
233: </head>
234: <body onload="Init()">
235: <form id="form" name="form" method="post" action="ECHO_enterCoords">
236: <input type="text" id="coordstr" name="coordstr">
237: <input type="submit">
238: </form>
239: <span tal:repeat="coord python:here.coords" tal:replace="coord"/>
240: <img id="overview" tal:attributes="src python:here.aq_parent.overview.getId()">
241: <div id="red" style="position: absolute; top: 0; left: 0; width: 0; height: 0; background: url(red.gif); visibility: visible;">
242: </div>
243: </body>
244: </html>
FreeBSD-CVSweb <freebsd-cvsweb@FreeBSD.org>
![[BACK]](/cvs/cvsweb/icons/back.gif){kind=icon}
Return to ECHO_draw.zpt CVS log ![[TXT]](/cvs/cvsweb/icons/text.gif){kind=icon}
![[DIR]](/cvs/cvsweb/icons/dir.gif){kind=icon}
Up to [Repository] / ECHO_content