Search the archives!
[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[Javascript] An easy one for the experts :-)
- From: javascript@xxxxxxxxxx (javascript@xxxxxxxxxx)
- Subject: [Javascript] An easy one for the experts :-)
- Date: Fri, 21 Dec 2001 20:01:15 -0100
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@xxxxxxxxxx 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@xxxxxxxx> >To: <javascript@xxxxxxxxxx> >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@xxxxxxxxxx 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@xxxxxxxx> >| >To: <javascript@xxxxxxxxxx> >| >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@xxxxxxxxxx said: >| >| >I wasn't sure to have understood what you intend to do :-) >| >| > >| >| >-----Message d'origine----- >| >| >De : brian@xxxxxxxx [mailto:brian@xxxxxxxx] >| >| >Envoyé : jeudi 20 décembre 2001 17:17 >| >| >À : javascript@xxxxxxxxxx >| >| >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@xxxxxxxxxx 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@xxxxxxxx [mailto:brian@xxxxxxxx] >| >| >>Envoyé : jeudi 20 décembre 2001 16:39 >| >| >>À : javascript@xxxxxxxxxx >| >| >>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@xxxxxxxxxx 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@xxxxxxxx [mailto:brian@xxxxxxxx] >| >| >>>Envoyé : jeudi 20 décembre 2001 16:27 >| >| >>>À : javascript@xxxxxxxxxx >| >| >>>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@xxxxxxxxxx >| >| >>>https://lists.LaTech.edu/mailman/listinfo/javascript >| >| >>>_______________________________________________ >| >| >>>Javascript mailing list >| >| >>>Javascript@xxxxxxxxxx >| >| >>>https://lists.LaTech.edu/mailman/listinfo/javascript >| >| >>> >| >| >>_______________________________________________ >| >| >>Javascript mailing list >| >| >>Javascript@xxxxxxxxxx >| >| >>https://lists.LaTech.edu/mailman/listinfo/javascript >| >| >>_______________________________________________ >| >| >>Javascript mailing list >| >| >>Javascript@xxxxxxxxxx >| >| >>https://lists.LaTech.edu/mailman/listinfo/javascript >| >| >> >| >| >_______________________________________________ >| >| >Javascript mailing list >| >| >Javascript@xxxxxxxxxx >| >| >https://lists.LaTech.edu/mailman/listinfo/javascript >| >| >_______________________________________________ >| >| >Javascript mailing list >| >| >Javascript@xxxxxxxxxx >| >| >https://lists.LaTech.edu/mailman/listinfo/javascript >| >| > >| >| _______________________________________________ >| >| Javascript mailing list >| >| Javascript@xxxxxxxxxx >| >| https://lists.LaTech.edu/mailman/listinfo/javascript >| >| >| > >| >_______________________________________________ >| >Javascript mailing list >| >Javascript@xxxxxxxxxx >| >https://lists.LaTech.edu/mailman/listinfo/javascript >| > >| _______________________________________________ >| Javascript mailing list >| Javascript@xxxxxxxxxx >| https://lists.LaTech.edu/mailman/listinfo/javascript >| > >_______________________________________________ >Javascript mailing list >Javascript@xxxxxxxxxx >https://lists.LaTech.edu/mailman/listinfo/javascript >
- References:
- [Javascript] An easy one for the experts :-)
- From: Peter Brunone
- [Javascript] An easy one for the experts :-)
- Prev by Date: [Javascript] Click on link to generate text in a textarea?
- Next by Date: [Javascript] ADMIN: Unsubscribe, changing settings reminder.
- Previous by thread: [Javascript] An easy one for the experts :-)
- Next by thread: [Javascript] An easy one for the experts :-)
- Index(es):