[Javascript] An easy one for the experts :-)

Thu Dec 20 07:54:08 CST 2001

I don't have the time to test more but this source should work as is

<html><head><title>Test</title>
<script>
function position(NSevent)
{
	if ( document.all ) // IE
	{
        document.all["mydiv"].pixelTop=
		document.all["myboard"].pixelTop+window.event.( one of
the coords property : x,offsetX );
	}
	else // NS
	{
		document.layers["mydiv"].top =
document.layers["myboard"].top + NSevent.( one of the coords property :
x,offsetX )
	}
}
</script>
</head>
<body>
<div id=myboard name=myboard style"position:absolute; top:150; left:150;
visibility:visible"><a href="#" onclick=position;><img id="board"
width="320" height="320" src="board.gif"></a></div>
<div id=mydiv name=mydiv style"position:absolute; top:15; left:15;
visibility:visible">
<img id="cursor" src="cursor.gif">
</div>
</body>
</html>

-----Message d'origine-----
De : brian at schau.dk [mailto:brian at schau.dk]
Envoyé : jeudi 20 décembre 2001 16:39
À : javascript at LaTech.edu
Objet : RE: [Javascript] An easy one for the experts :-)

Hello,

Ok - could you give me a simple example, please?  Just the
bare essentials.   I did try at one time to wrap the images
into a div container - but I didn't have much luck :(

Kind regards,
Brian

On Thu, 20 Dec 2001 14:35:04 +0100, javascript at LaTech.edu said:
>for cross browser solution, don't use IE dom programming.
>So use a href around your image and a div to locate your image
>on the window.
>
>-----Message d'origine-----
>De : brian at schau.dk [mailto:brian at schau.dk]
>Envoyé : jeudi 20 décembre 2001 16:27
>À : javascript at LaTech.edu
>Objet : [Javascript] An easy one for the experts :-)
>
>
>
>Hi,
>
>I have searched the manuals .. on google .. in archives ... without
>luck.
>
>Consider this piece of code:
>
><html><head><title>Test</title>
><script>
>function position(event)
>{
>        cursor.style.posLeft=board.style.posLeft+event.x;
>        cursor.style.posTop=board.style.posTop+event.y;
>}
></script>
></head>
><body>
><p><img id="board" width="320" height="320" src="board.gif"
>style="position:relative;" onClick="position(event)">
><img id="cursor" src="cursor.gif" style="position:absolute">
></body>
></html>
>
>Purpose:
>
>- whenever a mouse click is detected on board move the cursor to this
>position.
>
>Problem:
>
>- although the code works (!) the cursor is misaligned.  That is, it is
>positioned something like 5 pixels to the left of the click and 5
pixels
>above the click.    I've tried to use pageXOffset and pageYOffset to
>adjust the cursor - but I guess they're only good when scrollbars are
>involved.
>
>
>How do I solve this?   I know I can set position:absolute et al on the
>board, but this is not acceptable ...
>
>I'm mainly targeting IE but, if at all possible, would like to see a
>cross-browser solution :-)
>
>
>Merry Christmas,
>
>Brian
>_______________________________________________
>Javascript mailing list
>Javascript at LaTech.edu
>https://lists.LaTech.edu/mailman/listinfo/javascript
>_______________________________________________
>Javascript mailing list
>Javascript at LaTech.edu
>https://lists.LaTech.edu/mailman/listinfo/javascript
>
_______________________________________________
Javascript mailing list
Javascript at LaTech.edu
https://lists.LaTech.edu/mailman/listinfo/javascript