troubleshooting Question

Not working in Netscape 6, and 7

Avatar of srakunuri
srakunuri asked on
Programming
3 Comments1 Solution161 ViewsLast Modified:
The following code relates to map zoomer. zooming thumbnail image and showing some magnified area  image. This is not working in Netscape 6 and 7.

pls. give the solution and thanks in advance

<html>
<head>
<TITLE>map zoom</TITLE>

</HEAD>
<BODY style="width:100%;overflow-x:hidden;overflow-y:scroll">

<SCRIPT>
var largeleft = 300
var largetop = 30

var clipwidth = 240
var clipheight = 160

var isNav, isIE
var offsetX, offsetY
var selectedObj

var largewidth = 0
var largeheight = 0

var thumbwidth = Math.floor(largewidth/shrinkfactor)
var thumbheight = Math.floor(largeheight/shrinkfactor)

var dragimgwidth = Math.floor(clipwidth/shrinkfactor)
var dragimgheight = Math.floor(clipheight/shrinkfactor)
var dragimgleft = thumbleft+3
var dragimgtop = thumbtop+3

var difleft= largeleft-thumbleft
var diftop= largetop-thumbtop

var clippoints

var cliptop=0
var clipbottom=cliptop+clipheight
var clipleft=0
var clipright=clipleft+clipwidth


if (parseInt(navigator.appVersion) >= 4) {
      if (navigator.appName == "Netscape") {
            isNav = true
      } else {
            isIE = true
      }
}

function setZIndex(obj, zOrder) {
      obj.zIndex = zOrder
}

function shiftTo(obj, x, y) {
      if (isNav) {
        if(x<=document.thumb.left) {x=document.thumb.left}
            if(x>=(document.thumb.left+thumbwidth-dragimgwidth-2)) {x=document.thumb.left+thumbwidth-dragimgwidth-2}
            if(y<=document.thumb.top) {y=document.thumb.top}
            if(y>=(document.thumb.top+thumbheight-dragimgheight-2)) {y=document.thumb.top+thumbheight-dragimgheight-2}
            obj.moveTo(x,y)
      } else {
            if(x<=document.all.thumb.style.posLeft) {x=document.all.thumb.style.posLeft}
            if(x>=(document.all.thumb.style.posLeft+thumbwidth-dragimgwidth-2)) {x=document.all.thumb.style.posLeft+thumbwidth-dragimgwidth-2}
            if(y<=document.all.thumb.style.posTop) {y=document.all.thumb.style.posTop}
            if(y>=(document.all.thumb.style.posTop+thumbheight-dragimgheight-2)) {y=document.all.thumb.style.posTop+thumbheight-dragimgheight-2}
            obj.pixelLeft = x
            obj.pixelTop = y
      }      
      cliptop = (y-thumbtop)*shrinkfactor
      clipbottom = cliptop+clipheight
      clipleft = (x-thumbleft)*shrinkfactor
      clipright = clipleft+clipwidth

      
      if (document.all) {
            clippoints ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
            document.all.large.style.posTop=largetop-cliptop
            document.all.large.style.posLeft=largeleft-clipleft
            document.all.large.style.clip=clippoints
      }
      if (document.layers) {
            document.large.top=largetop-cliptop
            document.large.left=largeleft-clipleft
            document.large.clip.left = clipleft
            document.large.clip.right = clipright
            document.large.clip.top = cliptop
            document.large.clip.bottom = clipbottom
      }
}

function setSelectedElem(evt) {
      if (isNav) {
            var testObj
            var clickX = evt.pageX
            var clickY = evt.pageY
            for (var i = document.layers.length - 1; i >= 0; i--) {
                  testObj = document.layers[i]
                  if ((clickX > testObj.left) && 
                        (clickX < testObj.left + testObj.clip.width) && 
                        (clickY > testObj.top) && 
                        (clickY < testObj.top + testObj.clip.height && document.layers[i].id=="dragimg")) {
                              selectedObj = testObj
                              setZIndex(selectedObj, 100)
                              return
                  }
            }
      } else {
            var imgObj = window.event.srcElement
            if (imgObj.parentElement.id.indexOf("dragimg") != -1) {
                  selectedObj = imgObj.parentElement.style
                  setZIndex(selectedObj,100)
                  return
            }
      }
      selectedObj = null
      return
}

function dragIt(evt) {
      if (selectedObj) {
            if (isNav) {
                  shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY))
            } else {
                  shiftTo(selectedObj, (window.event.clientX - offsetX), (window.event.clientY - offsetY))
                  return false
            }
      }
}

function engage(evt) {
      setSelectedElem(evt)
      if (selectedObj) {
            if (isNav) {
                  offsetX = evt.pageX - selectedObj.left
                  offsetY = evt.pageY - selectedObj.top
            } else {
                  offsetX = window.event.offsetX
                  offsetY = window.event.offsetY
            }
      }
      return false
}

function release(evt) {
      if (selectedObj) {
            setZIndex(selectedObj, 0)
            selectedObj = null
      }
}

function setNavEventCapture() {
      if (isNav) {
            document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
      }
}

function init() {
      if (document.layers) {
        var imageurl=document.large.document.largepic.src
        largewidth=document.large.document.width
            largeheight=document.large.document.height
            thumbwidth = Math.floor(largewidth/shrinkfactor)
            thumbheight = Math.floor(largeheight/shrinkfactor)
        document.thumb.document.write("<IMG NAME='thumbpic' SRC='"+imageurl+"' width="+thumbwidth+"  height="+thumbheight+">")
        document.thumb.document.close()
            document.dragimg.document.write("<IMG NAME='dragimgpic' border=2 SRC='dragimg.gif' width="+dragimgwidth+" height="+dragimgheight+">")
        document.dragimg.document.close()
            document.large.left=largeleft
            document.large.top=largetop
      
            document.thumb.left=thumbleft
            document.thumb.top=thumbtop
      
            document.dragimg.left=dragimgleft
            document.dragimg.top=dragimgtop
            
            document.large.clip.left=clipleft
            document.large.clip.right=clipright
            document.large.clip.top=cliptop
            document.large.clip.bottom=clipbottom
            document.large.visibility="visible"
            
            setNavEventCapture()
      }
      if (document.all) {
        var imageurl=document.largepic.src
            largewidth=document.all.large.offsetWidth
            largeheight=document.all.large.offsetHeight
            thumbwidth = Math.floor(largewidth/shrinkfactor)
            thumbheight = Math.floor(largeheight/shrinkfactor)
            thumb.innerHTML="<IMG NAME='thumbpic' SRC='"+imageurl+"' width="+thumbwidth+"  height="+thumbheight+">"
            dragimg.innerHTML="<IMG NAME='dragimgpic' border=2 SRC='dragimg.gif' width="+dragimgwidth+"  height="+dragimgheight+">"
      
            document.all.large.style.posLeft=largeleft
            document.all.large.style.posTop=largetop
      
            document.all.thumb.style.posLeft=thumbleft
            document.all.thumb.style.posTop=thumbtop
      
            document.all.dragimg.style.posLeft=dragimgleft
            document.all.dragimg.style.posTop=dragimgtop
            clippoints ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
            document.all.large.style.clip=clippoints
            document.all.large.style.visibility="visible"
      }
      
      document.onmousedown = engage
      document.onmousemove = dragIt
      document.onmouseup = release
}

window.onload=init
</SCRIPT>

<DIV style="position:absolute;visibility:hidden;" ID="large"><IMG NAME="largepic" SRC="testmap.jpg"></DIV>
<DIV style="position:absolute;" ID="thumb"></DIV>
<DIV style="position:absolute;" ID="dragimg"></DIV>

</DIV>

</BODY>
</HTML>

ASKER CERTIFIED SOLUTION
RomMod

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 3 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 3 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros