[Javascript] An easy one for the experts :-)
brian at schau.dk
brian at schau.dk
Fri Dec 21 15:01:15 CST 2001
Yeah, I know. Much like a chess board. Unfortunately, the background
is a marble board with each square kinda engraved. Ofcourse, I could split
it up into individual squares and then do some preloading ...
I don't know ... I'm considering doing it in java instead :-)
On Fri, 21 Dec 2001 10:50:07 -0600, javascript at LaTech.edu said:
>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
>|
>
>_______________________________________________
>Javascript mailing list
>Javascript at LaTech.edu
>https://lists.LaTech.edu/mailman/listinfo/javascript
>
More information about the Javascript
mailing list