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

Thu Dec 20 13:00:35 CST 2001

    Why not have an array of squares using one of two pictures, and just do
an image rollover?  You'd have to make a few extra images, but the centering
would all be done for you.

----- Original Message -----
From: <brian at schau.dk>
To: <javascript at LaTech.edu>
Sent: Thursday, December 20, 2001 10:36 AM
Subject: RE: [Javascript] An easy one for the experts :-)


|
| Ok, a deeper explanation ...
|
| board.gif is as the name implies is a visual representation of
| a board, squared, 9 x 9.
|
| When the viewer clicks on the board, I'd like to place a 'move-from'
| cursor in that square ... (and when the user clicks again a 'move-to'
| cursor will be placed).
|
| So, the right algo is:
|
| cursor.x = ((window.event.x - board.left)/squaresize) * squaresize;
| cursor.y = ((window.event.y - board.top)/squaresize) * squaresize;
|
| .. well, something like that :-)    It's the (board.left, board.top)
values I am unable to retrieve ...
|
|
| Kind regards,
| Brian
|
|
|
| On Thu, 20 Dec 2001 15:24:44 +0100, javascript at LaTech.edu said:
| >I wasn't sure to have understood what you intend to do :-)
| >
| >-----Message d'origine-----
| >De : brian at schau.dk [mailto:brian at schau.dk]
| >Envoyé : jeudi 20 décembre 2001 17:17
| >À : javascript at LaTech.edu
| >Objet : RE: [Javascript] An easy one for the experts :-)
| >
| >
| >
| >Hmmm ... it doesn't quite work the way I want it.  But you've
| >wet my teeth - I'll experiment a bit :-)
| >
| >Thanks.
| >
| >On Thu, 20 Dec 2001 14:54:08 +0100, javascript at LaTech.edu said:
| >>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
| >>_______________________________________________
| >>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
| >
| _______________________________________________
| Javascript mailing list
| Javascript at LaTech.edu
| https://lists.LaTech.edu/mailman/listinfo/javascript
|