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...