onclick?

[thejester1975]

Hello all,

First time user and new to web development, so be gentle.

I have made a basic page for my kids school for a bingo flash board. Basically it is an image with 90 numbers that are mapped. When a number is clicked, a page opens up with the corresponding number as a gif file so people can see the number displayed. When the next bingo number is called, you have to click "back" in order to click the next number and so on. While this works, I would like to make it a little more advanced and useable. Either;

1. When a number is clicked, that number pops up to fill the screen for 5 seconds, the disappears. At the same time, a circle (or similar) should be placed around the number on the main page so people know that number has been used previously.

2. When a number is clicked, that number pops up to fill the screen for 5 seconds, the disappears. At the same time, the number is placed into a table to the right of the main number page so people know that number has been used previously.

3. Any other suggestions?

Either of them should also be able to be reset (clearing table or circles) when a new game of bingo is started.

Below is the code I have so far. Remember, I am new and it might be messy according to perfectionists...:)

<div style="text-align:center; width:944px; margin-left:auto; margin-right:auto;">

<img id="Image-Map" src="bingoflash.gif" usemap="#Image-Map" border="0" width="944" height="612"/>
<map id="_Image-Map" name="Image-Map">

<area shape="rect" coords="2,3,73,63" href="1.gif"/>
<area shape="rect" coords="76,4,147,64" href="2.gif"/>
<area shape="rect" coords="152,4,223,64" href="3.gif"/>
<area shape="rect" coords="227,4,298,64" href="4.gif"/>
<area shape="rect" coords="303,5,374,65" href="5.gif"/>
<area shape="rect" coords="379,4,450,64" href="6.gif"/>
<area shape="rect" coords="455,4,526,64" href="7.gif"/>
<area shape="rect" coords="530,4,601,64" href="8.gif"/>
<area shape="rect" coords="606,5,677,65" href="9.gif"/>
<area shape="rect" coords="681,4,752,64" href="10.gif"/>
<area shape="rect" coords="3,69,73,132" href="11.gif"/>
<area shape="rect" coords="76,69,146,132" href="12.gif"/>
<area shape="rect" coords="153,70,223,133" href="13.gif"/>
<area shape="rect" coords="229,70,299,133" href="14.gif"/>
<area shape="rect" coords="304,72,374,135" href="15.gif"/>
<area shape="rect" coords="380,70,450,133" href="16.gif"/>
<area shape="rect" coords="456,72,526,135" href="17.gif"/>
<area shape="rect" coords="531,70,601,133" href="18.gif"/>
<area shape="rect" coords="607,71,677,134" href="19.gif"/>
<area shape="rect" coords="681,70,751,133" href="20.gif"/>
<area shape="rect" coords="2,137,73,201" href="21.gif"/>
<area shape="rect" coords="77,138,148,202" href="22.gif"/>
<area shape="rect" coords="152,137,223,201" href="23.gif"/>
<area shape="rect" coords="228,137,299,201" href="24.gif"/>
<area shape="rect" coords="303,138,374,202" href="25.gif"/>
<area shape="rect" coords="380,137,451,201" href="26.gif"/>
<area shape="rect" coords="455,139,526,203" href="27.gif"/>
<area shape="rect" coords="531,138,602,202" href="28.gif"/>
<area shape="rect" coords="605,139,676,203" href="29.gif"/>
<area shape="rect" coords="682,137,753,201" href="30.gif"/>
<area shape="rect" coords="1,206,73,270" href="31.gif"/>
<area shape="rect" coords="77,205,149,269" href="32.gif"/>
<area shape="rect" coords="152,207,224,271" href="33.gif"/>
<area shape="rect" coords="228,205,300,269" href="34.gif"/>
<area shape="rect" coords="303,206,375,270" href="35.gif"/>
<area shape="rect" coords="379,205,451,269" href="36.gif"/>
<area shape="rect" coords="454,207,526,271" href="37.gif"/>
<area shape="rect" coords="530,206,602,270" href="38.gif"/>
<area shape="rect" coords="605,207,677,271" href="39.gif"/>
<area shape="rect" coords="681,205,753,269" href="40.gif"/>
<area shape="rect" coords="3,273,73,338" href="41.gif"/>
<area shape="rect" coords="77,273,147,338" href="42.gif"/>
<area shape="rect" coords="153,274,223,339" href="43.gif"/>
<area shape="rect" coords="228,274,298,339" href="44.gif"/>
<area shape="rect" coords="304,274,374,339" href="45.gif"/>
<area shape="rect" coords="380,274,450,339" href="46.gif"/>
<area shape="rect" coords="456,275,526,340" href="47.gif"/>
<area shape="rect" coords="531,273,601,338" href="48.gif"/>
<area shape="rect" coords="606,275,676,340" href="49.gif"/>
<area shape="rect" coords="681,274,751,339" href="50.gif"/>
<area shape="rect" coords="4,342,73,405" href="51.gif"/>
<area shape="rect" coords="78,342,147,405" href="52.gif"/>
<area shape="rect" coords="154,343,223,406" href="53.gif"/>
<area shape="rect" coords="229,343,298,406" href="54.gif" />
<area shape="rect" coords="304,342,373,405" href="55.gif"/>
<area shape="rect" coords="381,341,450,404" href="56.gif"/>
<area shape="rect" coords="456,343,525,406" href="57.gif"/>
<area shape="rect" coords="532,343,601,406" href="58.gif"/>
<area shape="rect" coords="607,342,676,405" href="59.gif"/>
<area shape="rect" coords="681,342,750,405" href="60.gif"/>
<area shape="rect" coords="3,409,73,473" href="61.gif"/>
<area shape="rect" coords="78,409,148,473" href="62.gif"/>
<area shape="rect" coords="152,410,222,474" href="63.gif"/>
<area shape="rect" coords="228,410,298,474" href="64.gif"/>
<area shape="rect" coords="304,411,374,475" href="65.gif"/>
<area shape="rect" coords="380,410,450,474" href="66.gif"/>
<area shape="rect" coords="456,410,526,474" href="67.gif"/>
<area shape="rect" coords="530,410,600,474" href="68.gif"/>
<area shape="rect" coords="606,411,676,475" href="69.gif"/>
<area shape="rect" coords="681,410,751,474" href="70.gif"/>
<area shape="rect" coords="3,478,73,542" href="71.gif"/>
<area shape="rect" coords="77,477,147,541" href="72.gif"/>
<area shape="rect" coords="154,478,224,542" href="73.gif"/>
<area shape="rect" coords="227,477,297,541" href="74.gif"/>
<area shape="rect" coords="304,479,374,543" href="75.gif"/>
<area shape="rect" coords="380,477,450,541" href="76.gif"/>
<area shape="rect" coords="456,478,526,542" href="77.gif"/>
<area shape="rect" coords="530,478,600,542" href="78.gif"/>
<area shape="rect" coords="607,479,677,543" href="79.gif"/>
<area shape="rect" coords="681,478,751,542" href="80.gif"/>
<area shape="rect" coords="2,544,72,607" href="81.gif"/>
<area shape="rect" coords="77,544,147,607" href="82.gif"/>
<area shape="rect" coords="153,544,223,607" href="83.gif"/>
<area shape="rect" coords="227,544,297,607" href="84.gif"/>
<area shape="rect" coords="304,544,374,607" href="85.gif"/>
<area shape="rect" coords="380,544,450,607" href="86.gif"/>
<area shape="rect" coords="455,544,525,607" href="87.gif"/>
<area shape="rect" coords="530,544,600,607" href="88.gif"/>
<area shape="rect" coords="606,544,676,607" href="89.gif"/>
<area shape="rect" coords="682,544,752,607" href="90.gif"/>
 

/>
</map>
</div>
</div>

Looking forward to hearing from the geniuses...

[harrierdh]

I like your first approach best. Without images or a link to your page, it's kinda hard to reproduce the page.

[thejester1975]

The page will not be on the net, but just on a laptop for use at the school. I can mail you the pics if you want?

[almostbob]

I didnt have images, so this is just html/javascript/css
refresh the page will reset, I got lazy

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- @(#) $Id$ -->
<head>
<title>bingo Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Generator" content="almostbob" />
<meta name="Keywords" content="Bingo" />
<meta name="Description" content="Bingo" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<style type="text/css">
table {width:100%; height:100%;}
tr {font-size:2em; line-height:120%;}
td {width:6.25%; text-align:center;}
td.yellow {background:yellow;}
td.title {font-size:1.2em; font:bold;}
div.pick {width:100%; font-size:9em; text-align:center; top:0; left:0;}
</style>
</head>
<script type='text/javascript'>
function pick(thing) {
document.getElementById('pick').innerHTML = thing;
document.getElementById(thing).className = "yellow";
}
</script>
<body>
<div id='pick' class='pick'>&nbsp;</div>
<table >
<tr>
<td class='title'>B</td>
<td onclick='pick("1");' id='1'>1</td>
<td onclick='pick("2");' id='2'>2</td>
<td onclick='pick("3");' id='3'>3</td>
<td onclick='pick("4");' id='4'>4</td>
<td onclick='pick("5");' id='5'>5</td>
<td onclick='pick("6");' id='6'>6</td>
<td onclick='pick("7");' id='7'>7</td>
<td onclick='pick("8");' id='8'>8</td>
<td onclick='pick("9");' id='9'>9</td>
<td onclick='pick("10");' id='10'>10</td>
<td onclick='pick("11");' id='11'>11</td>
<td onclick='pick("12");' id='12'>12</td>
<td onclick='pick("13");' id='13'>13</td>
<td onclick='pick("14");' id='14'>14</td>
<td onclick='pick("15");' id='15'>15</td>
</tr>
<tr>
<td class='title'>I</td>
<td onclick='pick("16");' id='16'>16</td>
<td onclick='pick("17");' id='17'>17</td>
<td onclick='pick("18");' id='18'>18</td>
<td onclick='pick("19");' id='19'>19</td>
<td onclick='pick("20");' id='20'>20</td>
<td onclick='pick("21");' id='21'>21</td>
<td onclick='pick("22");' id='22'>22</td>
<td onclick='pick("23");' id='23'>23</td>
<td onclick='pick("24");' id='24'>24</td>
<td onclick='pick("25");' id='25'>25</td>
<td onclick='pick("26");' id='26'>26</td>
<td onclick='pick("27");' id='27'>27</td>
<td onclick='pick("28");' id='28'>28</td>
<td onclick='pick("29");' id='29'>29</td>
<td onclick='pick("30");' id='30'>30</td>
</tr>
<tr>
<td class='title'>N</td>
<td onclick='pick("31");' id='31'>31</td>
<td onclick='pick("32");' id='32'>32</td>
<td onclick='pick("33");' id='33'>33</td>
<td onclick='pick("34");' id='34'>34</td>
<td onclick='pick("35");' id='35'>35</td>
<td onclick='pick("36");' id='36'>36</td>
<td onclick='pick("37");' id='37'>37</td>
<td onclick='pick("38");' id='38'>38</td>
<td onclick='pick("39");' id='39'>39</td>
<td onclick='pick("40");' id='40'>40</td>
<td onclick='pick("41");' id='41'>41</td>
<td onclick='pick("42");' id='42'>42</td>
<td onclick='pick("43");' id='43'>43</td>
<td onclick='pick("44");' id='44'>44</td>
<td onclick='pick("45");' id='45'>45</td>
</tr>
<tr>
<td class='title'>G</td>
<td onclick='pick("46");' id='46'>46</td>
<td onclick='pick("47");' id='47'>47</td>
<td onclick='pick("48");' id='48'>48</td>
<td onclick='pick("49");' id='49'>49</td>
<td onclick='pick("50");' id='50'>50</td>
<td onclick='pick("51");' id='51'>51</td>
<td onclick='pick("52");' id='52'>52</td>
<td onclick='pick("53");' id='53'>53</td>
<td onclick='pick("54");' id='54'>54</td>
<td onclick='pick("55");' id='55'>55</td>
<td onclick='pick("56");' id='56'>56</td>
<td onclick='pick("57");' id='57'>57</td>
<td onclick='pick("58");' id='58'>58</td>
<td onclick='pick("59");' id='59'>59</td>
<td onclick='pick("60");' id='60'>60</td>
</tr>
<tr>
<td class='title'>O</td>
<td onclick='pick("61");' id='61'>61</td>
<td onclick='pick("62");' id='62'>62</td>
<td onclick='pick("63");' id='63'>63</td>
<td onclick='pick("64");' id='64'>64</td>
<td onclick='pick("65");' id='65'>65</td>
<td onclick='pick("66");' id='66'>66</td>
<td onclick='pick("67");' id='67'>67</td>
<td onclick='pick("68");' id='68'>68</td>
<td onclick='pick("69");' id='69'>69</td>
<td onclick='pick("70");' id='70'>70</td>
<td onclick='pick("71");' id='71'>71</td>
<td onclick='pick("72");' id='72'>72</td>
<td onclick='pick("73");' id='73'>73</td>
<td onclick='pick("74");' id='74'>74</td>
<td onclick='pick("75");' id='75'>75</td>
</tr>
</table>
</body>
</html>

its lousy code, but it works pretty much,
depending on laptop screen size you can edit the font sizes of the css to fill the screen,
or edit the 'pick' styles to overlay the whole page or something width:100% height:100%; z-index: -10; (behind) add to the pick() function to push the z-index to +10(on top) and settimeout ('document.getelementbyid("pick").style.z-index="-10"',5000) , z-index back to -10 after 5 seconds
GTG collecting ladylove at midnight

[thejester1975]

Wow Bob...that is awesome. Did you just "knock that up" in your spare time?

You know, I spent ages creating a picture, working out where each number was located for the purpose of image mapping, creating 90 individual gif files that open into a new page.

Seems I have been going about it all wrong. You have a simple page of code, no images and it works better than mine! Although mine does look pretty with colours ;)

I guess to increase the numbers from 75 to 90, I just add more of the same code?

Thanks again...very much appreciated.

[almostbob]

back from picking up ladylove,
yep, same is same same same

:( kids told me bingo is 1 -> 75, have never examined bingo before
have played bingo, just never thought about it
IDE off sourceforge, allows fill in the blank pasting Ctrl_G 1, Ctrl_G 2, Ctrl_G 75 duplicates the code lines replaces %bd%
there could be significantly better code than tables and id,
could store results of called numbers in a flat file onclick the clear button, in case there were queries later, by polling the td for class='yellow'

only takes minutes, to write,
if you dont know exactly what it is, and look at it as a layout problem
**edit** make it pretty
the css is there in the header you can style

div.pick
td.yellow
td
tr
body
table

any which way you like match the colors of the images

[almostbob]

Hello almostbob,

Thanks again for the code. Gonna really help with the bingo at school tomorrow.

I hope you don't mind if I ask one more question...ignore me if you wish.

Since I have 90 numbers in the bingo game (I have added the extras into your code), it takes up a lot of room on the page when a number is clicked on. This will mean constant scrolling up and down to click on new numbers.

Instead of the number appearing at the top of the screen, is there any way to make it appear over the top of the main screen for maybe 5 seconds? Not actually open a new page that needs to be closed, but just a temp thing that appears. I have seen on some web sites when you click on a picture, the screen goes dark (kind of like a see-through dark) and the picture is displayed in the centre of the screen. Something like that?

Thanks
Peter

If you style the div.pick element ....
and tweak the javascript a little...

<!-- from here -->
<style type="text/css">
table {width:100%; height:100%;}
tr {font-size:2em; line-height:125%;}
td {width:6.25%; text-align:center;}
td.yellow {background:yellow;}
td.title {font-size:1.2em; font-weight:bold;}
div.pick {width:100%; height:800px; font-size:15em; font-weight:bold; text-align:center; top:0; left:0; z-index:100; position:fixed; background:#000; color:#fff; display:none;}
</style>
<script type='text/javascript'>
function pick(thing) {
document.getElementById('pick').innerHTML = thing;
document.getElementById('pick').style.display='inline';
document.getElementById(thing).className = "yellow";
setTimeout('document.getElementById("pick").style.display="none";',5000);
}
</script>
<!-- to here-->

I chose black eeeww

[thejester1975]

Thanks for all your help almostbob.