js/mapper.js

   1 function cacheMap(url)\r
   2 {\r
   3         var mapper = $('mapper');\r
   4         ajaxCacheHtml(mapper,url);\r
   5 }\r
   6 \r
   7 function areaSelect(element)\r
   8 {\r
   9         var mapper = $('mapper');\r
  10         var url = 'ajax.php'+element.value;\r
  11         if (!my_AJAX.isCached(url))\r
  12                 outLoadingText('mapperarea');\r
  13         my_AJAX.GETupload(url, function (text) {mapper.innerHTML = text;});\r
  14 }\r
  15 \r
  16 // Объявим функцию для определения координат мыши\r
  17 function defPosition(event) {\r
  18         var x = y = 0;\r
  19         if (document.attachEvent != null) { // Internet Explorer & Opera\r
  20                 x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;\r
  21                 y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;\r
  22         }\r
  23         if (!document.attachEvent && document.addEventListener) { // Gecko\r
  24                 x = event.clientX + window.scrollX;\r
  25                 y = event.clientY + window.scrollY;\r
  26         }\r
  27         return {x:x, y:y};\r
  28 }\r
  29 \r
  30 function outText(out)\r
  31 {\r
  32         return '<div style=\"position: absolute; left: -1px; top: -1px; white-space: nowrap; color: black;">' + out + '</div>' +\r
  33                 '<div style=\"position: absolute; left: -1px; top:  0px; white-space: nowrap; color: black;">' + out + '</div>' +\r
  34                 '<div style=\"position: absolute; left: -1px; top:  1px; white-space: nowrap; color: black;">' + out + '</div>' +\r
  35                 '<div style=\"position: absolute; left:  0px; top: -1px; white-space: nowrap; color: black;">' + out + '</div>' +\r
  36                 '<div style=\"position: absolute; left:  0px; top:  1px; white-space: nowrap; color: black;">' + out + '</div>' +\r
  37                 '<div style=\"position: absolute; left:  1px; top: -1px; white-space: nowrap; color: black;">' + out + '</div>' +\r
  38                 '<div style=\"position: absolute; left:  1px; top:  0px; white-space: nowrap; color: black;">' + out + '</div>' +\r
  39                 '<div style=\"position: absolute; left:  1px; top:  1px; white-space: nowrap; color: black;">' + out + '</div>' +\r
  40                 '<div style=\"position: absolute; left:  0px; top:  0px; white-space: nowrap; color: white;">' + out + '</div>';\r
  41 }\r
  42 \r
  43 function outLoadingText(div_id)\r
  44 {\r
  45         var txt = $(div_id);\r
  46         if (txt)\r
  47         {\r
  48             var div = insertElement(txt, 'DIV', 'loading');\r
  49         var s = div.style;\r
  50                 s.position='absolute';\r
  51         s.left= (txt.offsetWidth/2 - 30) + 'px';\r
  52         s.top = '10px';\r
  53                 div.innerHTML = outText('Loading...');\r
  54         }\r
  55 }\r
  56 \r
  57 function outMouseCoords(div, event, field)\r
  58 {\r
  59         var mpos = defPosition(event || window.event);\r
  60         var vbound = getBounds(div);\r
  61         var x = 100 * (mpos.x - vbound.left) / vbound.width;\r
  62         var y = 100 * (mpos.y - vbound.top) / vbound.height;\r
  63 \r
  64         var txt = $(field);\r
  65         if (txt)\r
  66                 txt.innerHTML = outText("(" + x.toFixed(1) + ", " + y.toFixed(1) + ")");\r
  67 }\r
  68 \r
  69 function cleanMouseCoords(field)\r
  70 {\r
  71         $(field).innerHTML = "";\r
  72 }\r
  73 \r
  74 /*\r
  75  * New mapper functions\r
  76  */\r
  77 \r
  78 var mapData=0;\r
  79 var scale = 1;\r
  80 var lastsel = 0;\r
  81 var lastId  = 0;\r
  82 \r
  83 function setMapData(newData)\r
  84 {\r
  85   mapData = newData;\r
  86 }\r
  87 \r
  88 function setScale(newscale)\r
  89 {\r
  90   scale = newscale;\r
  91 }\r
  92 \r
  93 function changeSelect(newsel)\r
  94 {\r
  95         if (newsel == lastsel)\r
  96                 return false;\r
  97         renderInstance(lastId, newsel);\r
  98         return false;\r
  99 }\r
 100 \r
 101 function changeScale(newscale)\r
 102 {\r
 103         if (scale == newscale)\r
 104                 return false;\r
 105         scale = newscale;\r
 106         renderInstance(lastId, lastsel);\r
 107         return false;\r
 108 }\r
 109 function setBestScale(width)\r
 110 {\r
 111         var bestScale = 640 / width;\r
 112         if      (bestScale > 0.00 && bestScale < 0.40) scale = 0.25;\r
 113         else if (bestScale > 0.40 && bestScale < 0.62) scale = 0.50;\r
 114         else if (bestScale > 0.62 && bestScale < 0.87) scale = 0.75;\r
 115         else if (bestScale > 0.87 && bestScale < 1.5)  scale = 1.00;\r
 116         else scale = 2.00;\r
 117 }\r
 118 function renderInstance(elementid, selected)\r
 119 {\r
 120         lastId  = elementid;\r
 121         lastsel = selected;\r
 122 \r
 123         var mapper = $(elementid);\r
 124         if (mapper == 0)\r
 125                 return;\r
 126         var text;\r
 127         var map = eval(mapData);\r
 128 \r
 129         map.width  = map.imageX*scale;\r
 130         var rect = getBounds(mapper.offsetParent);\r
 131         map.height = map.imageY*scale;\r
 132         var rect = getBounds(mapper.offsetParent);\r
 133         text =\r
 134         '<table class="map" border=1 width=' + (map.width + 10) + 'px>' +\r
 135         '<tbody><tr><td class=mapname id=mappername>' + map.header +'</td></tr>' +\r
 136         '<tr><td width=' + map.width + 'px height=' + (map.height + 4) + 'px align=left valign=top>' +\r
 137         '<div id=mapperarea style="font-size: 10px; position: relative; left: 0px; top: 0px;">' +\r
 138         '<img src=' + map.image + ' width=' + map.width + 'px height=' + map.height + 'px>\n';\r
 139 \r
 140         var count = 0;\r
 141         if (map.points)\r
 142                 count = map.points.length;\r
 143         for (var i = 0; i < count; i++)\r
 144         {\r
 145                 var img  = map.points[i].image;\r
 146                 var imgX = map.points[i].icenterx;\r
 147                 var imgY = map.points[i].icentery;\r
 148                 if (map.points[i].id == selected)\r
 149                 {\r
 150                         img  = map.selImg;\r
 151                         imgX = map.selImgX;\r
 152                         imgY = map.selImgY;\r
 153                 }\r
 154                 else if (img == 0)\r
 155                 {\r
 156                         img  = map.defImg;\r
 157                         imgX = map.defImgX;\r
 158                         imgY = map.defImgY;\r
 159                 }\r
 160                 var x = map.points[i].x * map.width / 100 - imgX;\r
 161                 var y = map.points[i].y * map.height / 100 - imgY;\r
 162                 var tip = '';\r
 163                 if (map.points[i].tooltip!=0)\r
 164                         tip = 'onmouseover = "Tip(\'' + map.points[i].tooltip + '\')"';\r
 165                 if (map.points[i].href!=0)\r
 166                         text +='<a href=' + map.points[i].href + '>';\r
 167                 text +='<img src="' + img + '" style="position: absolute; border: 0px; left: ' + x.toFixed(0) + 'px; top: ' + y.toFixed(0) + 'px;" ' + tip + '>\n';\r
 168                 if (map.points[i].href)\r
 169                         text +='</a>';\r
 170         }\r
 171         text+=\r
 172         '<div class=m_scale>' +\r
 173         outText('25%<br>50%<br>75%<br>100%<br>200%') +\r
 174         '<div style=\"position: absolute; left:  0px; top:  0px; white-space: nowrap;">' +\r
 175         '<a href=# onclick="return changeScale(0.25);">25%</a><br>' +\r
 176         '<a href=# onclick="return changeScale(0.50);">50%</a><br>' +\r
 177         '<a href=# onclick="return changeScale(0.75);">75%</a><br>' +\r
 178         '<a href=# onclick="return changeScale(1.00);">100%</a><br>' +\r
 179         '<a href=# onclick="return changeScale(2.00);">200%</a></div>' +\r
 180         '</div>' +\r
 181         '</div>' +\r
 182         '</td></tr></tbody>' +\r
 183         '</table>';\r
 184         mapper.innerHTML = text;\r
 185 }\r