PDA

View Full Version : Question about positioning

stuu
08-31-2006, 05:17 AM
Hi, the following is my code. I have a MAP(50x50px) , and 4 AREAs (25x25px).
I want a mouseover event on the AREA where DIV 'd'(a 25x25px gif in different color) is shown up on the AREA. But i have problem with the positioning. I try to use the coords property, but it seens weird. It there a better way to do it. Also when i resize the browser, the image is totally out of position. Thank you for helping.

code
---------------------
function b(obj)
{
if(obj)
{
str=obj.coords.split(",")
document.getElementById('b').style.left = parseInt(str[0])+503;
document.getElementById('b').style.top = parseInt(str[1])+167;
document.getElementById('b').style.display="block";
}
else
document.getElementById('b').style.display="none";
}

<body>
<div id="b" style="position:absolute;display:none;z-index:99;">
<img src="select.gif"></div>
<p align="center">
<map name="map" id="map">
<area id="pix1" shape="rect" coords="0,0,25,25" onmouseover="b(this)" onmouseout="b()" href="1"/>
<area shape="rect" coords="25,0,50,25" onmouseover="b(this)" onmouseout="b()"href="2"/>
<area shape="rect" coords="0,25,25,50" onmouseover="b(this)" onmouseout="b()"href="3"/>
<area shape="rect" coords="25,25,50,50" onmouseover="b(this)" onmouseout="b()"href="4"/>
</map><img border="0" src="map.gif" width="50" height="50" ismap usemap="#map"></p>

</body>
vwphillips
09-01-2006, 03:55 PM
may help

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>
<HEAD>
<TITLE>Export Picture</TITLE>
<script language="JavaScript" type="text/javascript">
<!--
// by Vic Phillips (10-August-2006) http://www.vicsjavascripts.org.uk/


// To position an element over an image Hot Spot by mouseover or Select List Value.
// The element will be centered on Hot Spot.

function zxcImgPos(zxctid,zxciid){
var zxcevt=window.event||arguments.callee.caller.arguments[0];
var zxcobj=zxcEventObj(zxcevt);
var zxctar=document.getElementById(zxctid);
var zxcimg=document.getElementById(zxciid);
var zxcmap=document.getElementsByName(zxctar.getAttribute('usemap').substring(1))[0].getElementsByTagName('AREA');
if (zxcobj.tagName=='SELECT'){
zxcobj=zxcmap[parseInt(zxcobj.value)];
}
if (!zxcobj||!zxctar||!zxcimg){ return; }
zxcimg.style.left=(zxcPos(zxctar)[0]+zxcPos(zxcobj)[0]-(zxcimg.offsetWidth-zxcobj.offsetWidth)/2)+'px';
zxcimg.style.top=(zxcPos(zxctar)[1]+zxcPos(zxcobj)[1]-(zxcimg.offsetHeight-zxcobj.offsetHeight)/2)+'px';
}


function zxcPos(zxcobj){
zxclft=zxcobj.offsetLeft;
zxctop=zxcobj.offsetTop;
while(zxcobj.offsetParent!=null){
zxcpar=zxcobj.offsetParent;
zxclft+=zxcpar.offsetLeft;
zxctop+=zxcpar.offsetTop;
zxcobj=zxcpar;
}
return [zxclft,zxctop];
}


function zxcEventObj(zxce){
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
if (zxce.target) zxceobj=zxce.target;
else if (zxce.srcElement) zxceobj=zxce.srcElement;
if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
return zxceobj;
}



//-->
</script>
</HEAD>

<BODY BGCOLOR="#ffffff" TEXT="#000000">
<CENTER>
<IMG id="Tst0" BORDER="0" SRC="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" width="351" height="263" USEMAP="#ImageMap" ISMAP="ISMAP">
<IMG id="Tst1" BORDER="0" SRC="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50" style="position:absolute;z-index:10;" >
<select onchange="zxcImgPos('Tst0','Tst1');" >
<option value="" >Option 0</option>
<option value="0" >Option 1</option>
<option value="1" >Option 2</option>
<option value="2" >Option 3</option>
<option value="3" >Option 4</option>
</select>
<MAP NAME="ImageMap" onmouseover="zxcImgPos('Tst0','Tst1');" >
<AREA SHAPE=RECT HREF="" ALT="" COORDS="240,193,273,223">
<AREA SHAPE=RECT HREF="" ALT="" COORDS="31,120,144,208">
<AREA SHAPE=RECT HREF="" ALT="" COORDS="208,78,329,150">
<AREA SHAPE=RECT HREF="" ALT="" COORDS="39,29,114,82">
</MAP>

</BODY>
</HTML>