home *** CD-ROM | disk | FTP | other *** search
/ com!online 2002 May / comcd0502.iso / homepage / special / javascript / 08_01 / javascripts / utilmapzoomer / utilmapzoomer.js < prev   
Encoding:
JavaScript  |  2001-03-07  |  6.6 KB  |  216 lines
  1. // CREDITS:
  2. // MapBlaster by Urs Dudli and Peter Gehrig 
  3. // Copyright (c) 2001 Peter Gehrig and Urs Dudli. All rights reserved.
  4. // Permission given to use the script provided that this notice remains as is.
  5. // Additional scripts can be found at http://www.24fun.com
  6. // info@24fun.com
  7. // 03/07/2001
  8.  
  9. // IMPORTANT: 
  10. // If you add this script to a script-library or script-archive 
  11. // you have to add a link to http://www.24fun.com on the webpage 
  12. // where this script will be running.
  13.  
  14. // CONFIGURATION:
  15. // Go to www.24fun.com, open category 'utility' and download 
  16. // the full-version of this script as ZIP-file with
  17. // step-by-step instructions for non-programmers.
  18.  
  19. var isNav, isIE
  20. var offsetX, offsetY
  21. var selectedObj 
  22.  
  23. var largewidth = 0
  24. var largeheight = 0
  25.  
  26. var thumbwidth = Math.floor(largewidth/shrinkfactor)
  27. var thumbheight = Math.floor(largeheight/shrinkfactor)
  28.  
  29. var dragimgwidth = Math.floor(clipwidth/shrinkfactor)
  30. var dragimgheight = Math.floor(clipheight/shrinkfactor)
  31. var dragimgleft = thumbleft+3
  32. var dragimgtop = thumbtop+3
  33.  
  34. var difleft= largeleft-thumbleft
  35. var diftop= largetop-thumbtop
  36.  
  37. var clippoints
  38.  
  39. var cliptop=0
  40. var clipbottom=cliptop+clipheight
  41. var clipleft=0
  42. var clipright=clipleft+clipwidth
  43.  
  44.  
  45. if (parseInt(navigator.appVersion) >= 4) {
  46.     if (navigator.appName == "Netscape") {
  47.         isNav = true
  48.     } else {
  49.         isIE = true
  50.     }
  51. }
  52.  
  53. function setZIndex(obj, zOrder) {
  54.     obj.zIndex = zOrder
  55. }
  56.  
  57. function shiftTo(obj, x, y) {
  58.     if (isNav) {
  59.         if(x<=document.thumb.left) {x=document.thumb.left}
  60.         if(x>=(document.thumb.left+thumbwidth-dragimgwidth-2)) {x=document.thumb.left+thumbwidth-dragimgwidth-2}
  61.         if(y<=document.thumb.top) {y=document.thumb.top}
  62.         if(y>=(document.thumb.top+thumbheight-dragimgheight-2)) {y=document.thumb.top+thumbheight-dragimgheight-2}
  63.         obj.moveTo(x,y)
  64.     } else {
  65.         if(x<=document.all.thumb.style.posLeft) {x=document.all.thumb.style.posLeft}
  66.         if(x>=(document.all.thumb.style.posLeft+thumbwidth-dragimgwidth-2)) {x=document.all.thumb.style.posLeft+thumbwidth-dragimgwidth-2}
  67.         if(y<=document.all.thumb.style.posTop) {y=document.all.thumb.style.posTop}
  68.         if(y>=(document.all.thumb.style.posTop+thumbheight-dragimgheight-2)) {y=document.all.thumb.style.posTop+thumbheight-dragimgheight-2}
  69.         obj.pixelLeft = x
  70.         obj.pixelTop = y
  71.     }    
  72.     cliptop = (y-thumbtop)*shrinkfactor
  73.     clipbottom = cliptop+clipheight
  74.     clipleft = (x-thumbleft)*shrinkfactor
  75.     clipright = clipleft+clipwidth
  76.  
  77.     
  78.     if (document.all) {
  79.         clippoints ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
  80.         document.all.large.style.posTop=largetop-cliptop
  81.         document.all.large.style.posLeft=largeleft-clipleft
  82.         document.all.large.style.clip=clippoints
  83.     }
  84.     if (document.layers) {
  85.         document.large.top=largetop-cliptop
  86.         document.large.left=largeleft-clipleft
  87.         document.large.clip.left = clipleft
  88.         document.large.clip.right = clipright
  89.         document.large.clip.top = cliptop
  90.         document.large.clip.bottom = clipbottom
  91.     }
  92. }
  93.  
  94. function setSelectedElem(evt) {
  95.     if (isNav) {
  96.         var testObj
  97.         var clickX = evt.pageX
  98.         var clickY = evt.pageY
  99.         for (var i = document.layers.length - 1; i >= 0; i--) {
  100.             testObj = document.layers[i]
  101.             if ((clickX > testObj.left) && 
  102.                 (clickX < testObj.left + testObj.clip.width) && 
  103.                 (clickY > testObj.top) && 
  104.                 (clickY < testObj.top + testObj.clip.height && document.layers[i].id=="dragimg")) {
  105.                     selectedObj = testObj
  106.                     setZIndex(selectedObj, 100)
  107.                     return
  108.             }
  109.         }
  110.     } else {
  111.         var imgObj = window.event.srcElement
  112.         if (imgObj.parentElement.id.indexOf("dragimg") != -1) {
  113.             selectedObj = imgObj.parentElement.style
  114.             setZIndex(selectedObj,100)
  115.             return
  116.         }
  117.     }
  118.     selectedObj = null
  119.     return
  120. }
  121.  
  122. function dragIt(evt) {
  123.     if (selectedObj) {
  124.         if (isNav) {
  125.             shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY))
  126.         } else {
  127.             shiftTo(selectedObj, (window.event.clientX - offsetX), (window.event.clientY - offsetY))
  128.             return false
  129.         }
  130.     }
  131. }
  132.  
  133. function engage(evt) {
  134.     setSelectedElem(evt)
  135.     if (selectedObj) {
  136.         if (isNav) {
  137.             offsetX = evt.pageX - selectedObj.left
  138.             offsetY = evt.pageY - selectedObj.top
  139.         } else {
  140.             offsetX = window.event.offsetX
  141.             offsetY = window.event.offsetY
  142.         }
  143.     }
  144.     return false
  145. }
  146.  
  147. function release(evt) {
  148.     if (selectedObj) {
  149.         setZIndex(selectedObj, 0)
  150.         selectedObj = null
  151.     }
  152. }
  153.  
  154. function setNavEventCapture() {
  155.     if (isNav) {
  156.         document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
  157.     }
  158. }
  159.  
  160. function init() {
  161.     if (document.layers) {
  162.         var imageurl=document.large.document.largepic.src
  163.         largewidth=document.large.document.width
  164.         largeheight=document.large.document.height
  165.         thumbwidth = Math.floor(largewidth/shrinkfactor)
  166.         thumbheight = Math.floor(largeheight/shrinkfactor)
  167.         document.thumb.document.write("<IMG NAME='thumbpic' SRC='"+imageurl+"' width="+thumbwidth+"  height="+thumbheight+">")
  168.         document.thumb.document.close()
  169.         document.dragimg.document.write("<IMG NAME='dragimgpic' border=2 SRC='dragimg.gif' width="+dragimgwidth+" height="+dragimgheight+">")
  170.         document.dragimg.document.close()
  171.         document.large.left=largeleft
  172.         document.large.top=largetop
  173.     
  174.         document.thumb.left=thumbleft
  175.         document.thumb.top=thumbtop
  176.     
  177.         document.dragimg.left=dragimgleft
  178.         document.dragimg.top=dragimgtop
  179.         
  180.         document.large.clip.left=clipleft
  181.         document.large.clip.right=clipright
  182.         document.large.clip.top=cliptop
  183.         document.large.clip.bottom=clipbottom
  184.         document.large.visibility="visible"
  185.         
  186.         setNavEventCapture()
  187.     }
  188.     if (document.all) {
  189.         var imageurl=document.largepic.src
  190.         largewidth=document.all.large.offsetWidth
  191.         largeheight=document.all.large.offsetHeight
  192.         thumbwidth = Math.floor(largewidth/shrinkfactor)
  193.         thumbheight = Math.floor(largeheight/shrinkfactor)
  194.         thumb.innerHTML="<IMG NAME='thumbpic' SRC='"+imageurl+"' width="+thumbwidth+"  height="+thumbheight+">"
  195.         dragimg.innerHTML="<IMG NAME='dragimgpic' border=2 SRC='dragimg.gif' width="+dragimgwidth+"  height="+dragimgheight+">"
  196.     
  197.         document.all.large.style.posLeft=largeleft
  198.         document.all.large.style.posTop=largetop
  199.     
  200.         document.all.thumb.style.posLeft=thumbleft
  201.         document.all.thumb.style.posTop=thumbtop
  202.     
  203.         document.all.dragimg.style.posLeft=dragimgleft
  204.         document.all.dragimg.style.posTop=dragimgtop
  205.         clippoints ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
  206.         document.all.large.style.clip=clippoints
  207.         document.all.large.style.visibility="visible"
  208.     }
  209.     
  210.     document.onmousedown = engage
  211.     document.onmousemove = dragIt
  212.     document.onmouseup = release
  213. }
  214.  
  215. window.onload=init
  216.