Want simple script to reveal parts of picture when clicked.

scphillipp1 · Joined: 17 Nov 2009 Posts: 9

Please be kind, I am a newbee.
I am trying to make a simple HTML code which will allow me to click on any one of 16 squares in a table (4x4) - each time allowing more of the background image to appear (i.e. the button pressed becomes clear)
This is what I have so far: it draws a nice table the way I want it, but I don't know what to put in the function to make the buttons clear. (maybe my approach to this is all wrong and there is a simpler way -- I am open to suggestions) This is my code:

<html>
<script>
function clearblock() {
}
</script>
</head>
<center>
<table border=0 cellpadding=0 cellspacing=0><tr><td>
<center>
<form SELECT METHOD="post"

<table border="0">

<td background="/Users/Steve/Desktop/123.jpg">
<table style="text-align: left; width: 640px; height: 440px;"

<tr>
<td><button type=submit style="height: 125; width: 170;" onClick="clearblock()">
<font face="arial" size="8">1</font></button></td>

<td><button type=submit style="height: 125; width: 170;" onClick="">
<font face="arial" size="8">2</font></button></td>

<td><button type=submit style="height: 125; width: 170;" onClick="">
<font face="arial" size="8">3</font></button></td>

<td><button type=submit style="height: 125; width: 170;" onClick="">
<font face="arial" size="8">4</font></button></td>

</tr><tr>
<td><button type=submit style="height: 125; width: 170;" onClick="">
<font face="arial" size="8">5</font></button></td>

<td><button type=submit style="height: 125; width: 170;" onClick="">
<font face="arial" size="8">6</font></button></td>

<td><button type=submit style="height: 125; width: 170;" onClick="">
<font face="arial" size="8">7</font></button></td>

<td><button type=submit style="height: 125; width: 170;"onClick="">
<font face="arial" size="8">8</font></button></td>

</tr><tr>
<td><button type=submit style="height: 125; width: 170;"onClick="">
<font face="arial" size="8">9</font></button></td>

<td><button type=submit style="height: 125; width: 170;" onClick="">
<font face="arial" size="8">10</font></button></td>

<td><button type=submit style="height: 125; width: 170;"onClick="">
<font face="arial" size="8">11</font></button></td>

<td><button type=submit style="height: 125; width: 170;"onClick="">
<font face="arial" size="8">12</font></button></td>

</tr><tr>
<td><button type=submit style="height: 125; width: 170;"onClick="">
<font face="arial" size="8">13</font></button></td>

<td><button type=submit style="height: 125; width: 170;" onClick="">
<font face="arial" size="8">14</font></button></td>

<td><button type=submit style="height: 125; width: 170;"onClick="">
<font face="arial" size="8">15</font></button></td>

<td><button type=submit style="height: 125; width: 170;" onClick="">
<font face="arial" size="8">16</font></button></td>

</tr></tbody></table></td></tr></tbody></table>

PayneLess Designs · Joined: 28 Feb 2007 Posts: 4289 Location: MS

Can't deal with your code as paths are relative, but is this something that would be better?

http://www.cssplay.co.uk/menu/old_master
http://www.cssplay.co.uk/menu/enlarge
http://www.cssplay.co.uk/menu/image_magnifier

scphillipp1 · Joined: 17 Nov 2009 Posts: 9

Thank you. I will study those and see if I can learn something from their code.

PayneLess Designs · Joined: 28 Feb 2007 Posts: 4289 Location: MS

I wasn't sure whether the effect is what you were after or not. Post back if you need help with the code. You have to look at the source view for it which the author has given permission to do.

scphillipp1 · Joined: 17 Nov 2009 Posts: 9

Actually, the effect that I am looking for, is found at the following web site
(Its where I got the code which I posted - stripped down:

http://www.aplusmath.com/cgi-bin/games/addpicture

But I was trying to make it so any square I clicked on revealed the picture behind it (.i.e. nothing to do with the math) --

I tried downloading this web site using SiteSucker, but once localized, it broke the app and it would no longer work.

My goal is to have the app running, as a family game on Thanksgiving, to have them try to race to guess the picture behind. Corny I know.

PayneLess Designs · Joined: 28 Feb 2007 Posts: 4289 Location: MS

Sorry. That game is a little more complex than just a simple script. It is done with a server-side script. Probably PHP. More than likely it is a games module installed in the cgi-bin of their site.

Don't know if you can use these instead so you can be ready for the Holiday...

Slax modules
Game Modules
Games
Game Modules 2

This might be similar to what you want:

ADA concentration or ADA concentration 2.80

Memory Game Concentration

Click 'N Slide

I know you prefer to code your game, but not sure you could get it done and de-bugged in time.

scphillipp1 · Joined: 17 Nov 2009 Posts: 9

Ok I've simplified things -- one hurdle at a time.

This script displays 2 buttons (1 and 2) when I click on either one of them I'd like it to display something -- later I will make it display as I want, but for now just as a test. But I am doing something wrong. When I click on one of the buttons (either one) it does nothing. Where have I screwed up?

Here is my code:
<html>
<head>
<script type="text/javascript">
function clearblock()
{
document.getElementById("bt1"). alert(test1)
document.getElementById("bt2"). alert(test2)
}
</script>
</head>
<button name="bt1" type=button id="bt1" style="height: 125; width: 170;" onclick="clearblock()">
<font face="arial" size="7">1</font>
</button>
<button name="bt2" type=button id="bt1" style="height: 125; width: 170;" onclick="clearblock()">
<font face="arial" size="7">2</font>
</button>

</html>

Thanks for your help.
PS. Its not that I am running right to here for help, -- honest to God, I have been trying and trying to get this - scouring the web I got notes EVERY where on my desktop. I am about 5 hours into this and refuse to give up.

Straystudio · Joined: 14 Apr 2008 Posts: 297 Location: Nord Italy

Surely the thing at aplusmath.com is made with a server-side script: on the Browser's status-bar at bottom screen, you can see page reloading on everytime you click the right-sum button.

Straystudio · Joined: 14 Apr 2008 Posts: 297 Location: Nord Italy

I'll be employing .getElementById to connect JS instructions with proper Elements in the BODY so, every BUTTON has its unique ID.
Only very old Browsers as old as IExplorer 4 and Netscape 4 do not support .getElementById

opacity property would be worth larger a talk, yet let me submit quickly this pattern at first, which wants to be close to your aim:

scphillipp1 · Joined: 17 Nov 2009 Posts: 9

Everyone who has helped me with this project all I can say is wow. Thanks very much.
Unfortunately, Straystudio, something is still wrong with the code, I get a lot of gibber at the top of the screen, and a lot of \\\\ all over the output. The output at the top is:

{\rtf1\ansi\ansicpg1252\cocoartf1038\cocoasubrtf250 {\fonttbl\f0\fmodern\fcharset0 Courier;} {\colortbl;\red255\green255\blue255;\red0\green99\blue10;\red250\green250\blue250;\red207\green214\blue219; } \margl1440\margr1440\vieww9000\viewh8400\viewkind0 \deftab720 \itap1\trowd \taflags0 \trgaph108\trleft-108 \trbrdrt\brdrnil \trbrdrl\brdrnil \trbrdrt\brdrnil \trbrdrr\brdrnil \clvertalc \clcbpat3 \clwWidth10520\clftsWidth3 \clmart10 \clmarl10 \clmarb10 \clmarr10 \clbrdrt\brdrs\brdrw20\brdrcf4 \clbrdrl\brdrs\brdrw20\brdrcf4 \clbrdrb\brdrs\brdrw20\brdrcf4 \clbrdrr\brdrs\brdrw20\brdrcf4 \clpadt60 \clpadl60 \clpadb60 \clpadr60 \gaph\cellx8640 \pard\intbl\itap1\pardeftab720\ql\qnatural \f0\fs22 \cf2 \ \ \ \ \ \ \

I tried it in Safari, Firefox, and Explorer - all with same result.

Unfortunately, tomorrow is my get together, so I will not have time to try to figure this all out, so I am going to be doing the same thing using paper and cutouts over the picture, which I will remove as answers are given - BUT -- I still would like to get this figured out 1. To learn and 2. I plan on another gathering at christmas time, and maybe can use it then. Smile

Again thank you all -- I'll be back to pest yous after Thanksgiving. Wink

PayneLess Designs · Joined: 28 Feb 2007 Posts: 4289 Location: MS

I am also interested in solution and I am so thankful that Straystudio has made several good attempts at this. If anyone can get it working, Straystudio should be the one.

Sorry I didn't have more time to spend with this.

A very happy Thanksgiving to all.

Straystudio · Joined: 14 Apr 2008 Posts: 297 Location: Nord Italy

PayneLess Designs · Joined: 28 Feb 2007 Posts: 4289 Location: MS

Oh, WOW, Straystudio!!!!! That code worked beautifully for me. That is a JOB WELL DONE!!

So GLAD to have you back to help out here. We can really use more coders for PHP/ASP, etc.. Between fighting the spam here and my own job I can not devote the time to coding or troubleshooting more involved posts.

Thank you for any help you can give.

scphillipp1 · Joined: 17 Nov 2009 Posts: 9

You guys are the best!! I almost got this.
One more step and I am ready for my next party!!

I am attempting to create a button which when clicked will pick the next picture as a background image.
I tried
If A=1 then use "picture1" else if A=2 then use "picture2" .... etc..
but that didn't work (I didn't think it would)

How could I do this? I thought I would have a sub folder with all the pictures as backgrounds in them, named picture1, picture2 etc...

Here is my code so far: (I know the reveal portion is sloppy programming, but it works!)

[<html>
<head>
<script type="text/javascript">
a = 1
function clearblock(which)
{
document.getElementById(which).style.opacity=0;
}
return
function newgame(g1)
{
alert('New Game Button Pressed');
}
function reveal(g2)
{
document.getElementById('bt1').style.opacity=0;
document.getElementById('bt2').style.opacity=0;
document.getElementById('bt3').style.opacity=0;
document.getElementById('bt4').style.opacity=0;
document.getElementById('bt5').style.opacity=0;
document.getElementById('bt6').style.opacity=0;
document.getElementById('bt7').style.opacity=0;
document.getElementById('bt8').style.opacity=0;
document.getElementById('bt9').style.opacity=0;
document.getElementById('bt10').style.opacity=0;
document.getElementById('bt11').style.opacity=0;
document.getElementById('bt12').style.opacity=0;
document.getElementById('bt13').style.opacity=0;
document.getElementById('bt14').style.opacity=0;
document.getElementById('bt15').style.opacity=0;
document.getElementById('bt16').style.opacity=0;
}

</script>
</head>
<body>
<center><br>

<table>
<tr>
<td background="..//Reveal Picture Game/pictures/reindeer.jpg">
<table style="width: 800px; height: 640px;">
<td>
<button id="bt1" style="height: 160; width: 200; border: 5px solid black" onclick="clearblock('bt1')">
<font face="arial" size="7">1</font></button></td>
<td>
<button id="bt2" style="height: 160; width: 200; border: 5px solid black" onclick="clearblock('bt2')"> <font face="arial" size="7">2</font></button></td>
<td>
<button id="bt3" style="height: 160; width: 200; border: 5px solid black" onclick="clearblock('bt3')"> <font face="arial" size="7">3</font></button></td>
<td>
<button id="bt4" style="height: 160; width: 200; border: 5px solid black" onclick="clearblock('bt4')">
<font face="arial" size="7">4</font></button></td></tr>
<tr><td>
<button id="bt5" style="height: 160; width: 200; border: 5px solid black" onclick="clearblock('bt5')"> <font face="arial" size="7">5</font></button></td>
<td>
<button id="bt6" style="height: 160; width: 200; border: 5px solid black" onclick="clearblock('bt6')">
<font face="arial" size="7">6</font></button></td>
<td>
<button id="bt7" style="height: 160; width: 200; border: 5px solid black" onclick="clearblock('bt7')">
<font face="arial" size="7">7</font></button></td>
<td>
<button id="bt8" style="height: 160; width: 200; border: 5px solid black" onclick="clearblock('bt8')">
<font face="arial" size="7">8</font></button></td></tr>
<tr><td>
<button id="bt9" style="height: 173; width: 200; border: 5px solid black" onclick="clearblock('bt9')">
<font face="arial" size="7">9</font></button></td>
<td>
<button id="bt10" style="height: 173; width: 200; border: 5px solid black" onclick="clearblock('bt10')"> <font face="arial" size="7">10</font></button></td>
<td>
<button id="bt11" style="height: 173; width: 200; border: 5px solid black" onclick="clearblock('bt11')">
<font face="arial" size="7">11</font></button></td>
<td>
<button id="bt12" style="height: 173; width: 200; border: 5px solid black" onclick="clearblock('bt12')">
<font face="arial" size="7">12</font></button></td></tr>
<tr><td>
<button id="bt13" style="height: 173; width: 200; border: 5px solid black" onclick="clearblock('bt13')">
<font face="arial" size="7">13</font></button></td>
<td>
<button id="bt14" style="height: 173; width: 200; border: 5px solid black" onclick="clearblock('bt14')">
<font face="arial" size="7">14</font></button></td>
<td>
<button id="bt15" style="height: 173; width: 200; border: 5px solid black" onclick="clearblock('bt15')">
<font face="arial" size="7">15</font></button></td>
<td>
<button id="bt16" style="height: 173; width: 200; border: 5px solid black" onclick="clearblock('bt16')">
<font face="arial" size="7">16</font></button></td></tr></table><br>
<button id="g1" onclick="newgame('g1')"> <font face="arial" size="2">New Game</font></button>
<button id="g2" onclick="reveal('g2')"> <font face="arial" size="2">Reveal Puzzle</font></button>

</body>
</html>

][/code]

Straystudio · Joined: 14 Apr 2008 Posts: 297 Location: Nord Italy

Nice to see you here again, and enjoying the matter, too.

Get rid of that return right above the newgame function, as it being outside of any context, blocks the whole script.

There is no problem having every block-button listed in the reveal function but it is time to have a look at what the "for" loop is designed for: