Annotation of ECHO_content/ECHO_content_overview.dtml, revision 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