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