Javascript Page Jump

**joetank0** · 02-03-2009, 03:27 PM

Hello All,

*EDIT* Considering the lack of responses, I've cleaned up the HTML / Java as much as possible.

I have a code that when you click on a part of an image map it brings up a menu that also contains sub-menus. To close a menu you simply double click on it. The issue I'm having is that if you click anywhere on the image map that is not on the upper left of the image (for example, a link on the lower right) the browser immediately scrolls to the upper left.

The code is a little long... I attached the image for the image map (test.jpg).

Code:

<html>
<head>
<style type="text/css"> table { font-size: 16; text-align: center; } </style>

<script type="text/javascript" language="JavaScript">
<!-- var cX = 0; var cY = 0; var rX = 0; var rY = 0;
function UpdateCursorPosition(e){ cX = e.pageX; cY = e.pageY;}

function UpdateCursorPositionDocAll(e){ cX = event.clientX; cY = event.clientY;}

if(document.all) { document.onmousemove = UpdateCursorPositionDocAll; }
else { document.onmousemove = UpdateCursorPosition; }

function AssignPosition(d) {
if(self.pageYOffset) {
	rX = self.pageXOffset;
	rY = self.pageYOffset;
	}
else if(document.documentElement && document.documentElement.scrollTop) {
	rX = document.documentElement.scrollLeft;
	rY = document.documentElement.scrollTop;
	}
else if(document.body) {
	rX = document.body.scrollLeft;
	rY = document.body.scrollTop;
	}
if(document.all) {
	cX += rX; 
	cY += rY;
	}
d.style.left = (cX+1) + "px";
d.style.top = (cY+1) + "px";
}

function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}

function ShowContent(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
dd.style.display = "block";
}

function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
if(dd.style.display == "none") { dd.style.display = "block"; }
else { dd.style.display = "none"; }
}

//-->
</script>
</head>

<body bgcolor=white text=black>
<center>

<img src="test.jpg" usemap="#test" alt="" style="border-style:none" /><map id="test" name="test">

<area shape="rect" alt="BOX_ONE" coords="105,45,464,287" title="BOX_ONE"
    onclick="ShowContent('mmBOX_ONE'); return true;"
    />

<div
   ondblclick="HideContent('mmBOX_ONE'); return true;"
   id="mmBOX_ONE"
   style="display:none; 
      position:absolute; 
      border-style: solid; 
      background-color: white; 
      padding: 5px;">
<p><u><font color=red size=+2>BOX_ONE</u></font>
<table border=0 cellpadding=3 cellspacing=4>
<tr><td><a><u>Box ONE Field #1</u></a></td></tr>
<tr><td><a><u>Box ONE Field #2</u></a></td></tr>
</table>
</div>

<area shape="rect" alt="BOX_TWO" coords="1216,933,1577,1197" title="BOX_TWO"
    onmousedown="ShowContent('mmBOX_TWO'); return true;"
    />

<div
   ondblclick="HideContent('mmBOX_TWO'); return true;"
   id="mmBOX_TWO"
   style="display:none; 
      position:absolute; 
      border-style: solid; 
      background-color: white; 
      padding: 5px;">

<p><u><font color=red size=+2>BOX_TWO</u></font>
<table border=0 cellpadding=3 cellspacing=4>
<tr><td><a><u>Box TWO Field #1</u></a></td></tr>
<tr><td><a><u>Box TWO Field #2</u></a></td></tr>
</table>
</div>
</body>
</html>

Any help would be greatly appreciated!
-Joe

**joetank0** · 02-03-2009, 08:24 PM

Fixed!
The issue was that there was a "href=#" inside.
The browser treats that as opening up a new page which opens at the upper left.

Oops!

Thread: Javascript Page Jump

Thread Tools

Search Thread

Javascript Page Jump

Bookmarks

Bookmarks

Posting Permissions