[Javascript] An easy one for the experts :-)
Peter Brunone
peter at brunone.com
Fri Dec 21 10:50:07 CST 2001
Brian,
If you're using just two types of square -- for example, black and
white -- then you're only loading two images. It doesn't matter how many
times you call the image in a page; it only has to load to the browser once.
The user will actually spend less time downloading because instead of a
200x200 image, he's downloading two 10x10 images. Scalability then becomes
a piece of cake as well; you can make the board any size you like, simply by
altering your arrays.
----- Original Message -----
From: <brian at schau.dk>
To: <javascript at LaTech.edu>
Sent: Friday, December 21, 2001 4:29 AM
Subject: Re: [Javascript] An easy one for the experts :-)
|
| Yeah, I know. But that would in best case mean a 7x7 board (49 squares)
and in worst case a 19x19 (!) board (361 squares).
|
| I think the average viewer wouldn't like the wait ..... :-)
|
| On Thu, 20 Dec 2001 13:00:35 -0600, javascript at LaTech.edu said:
| >
| > 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
| >|
| >
| >_______________________________________________
| >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
|
More information about the Javascript
mailing list