click-through options with images in a form

[GKChesterton]

I am making a chekerboard. The user can set the pieces on the board and submit her arrangement using an HTML form.

This calls for a form that includes an 8x8 table. Each cell allows the user to indicate Red, Black or (default) Empty.

Now I reach for JavaScript, because I'd like the option selection for each cell to happen by clicking. Go to the cell and click 1 for Red; click 2 for Black, click 3 to return to Empty. (Maybe you call this a three-state button.)

I have some script code that works great for setting a value and changing the background color upon mouse-click. Excerpt:

function changeCellValue()
{
    var index = getNextIndex(this.firstChild.data);
    cIndex = cells.indexOf(this);
    applyChanges(index, cIndex);
}
function applyChanges(index, cIndex)
{
    cells[cIndex].firstChild.data = values[index];
    cells[cIndex].style.backgroundColor = bgColors[index];
    cellValues[cIndex] = values[index];
}

However, I don’t want to change the background color; I want to change an image (red_piece.gif, black_piece.gif, blank.gif).

Also I’m not sure how to pass the value as an option selection when the form is submitted. Can you instruct me?

 

[vacunita]

You can have an 8 by 8 grid of hidden values each referring to a square on the board, and using Javascript alter the value of the hidden input with each click of the image.
0 for blank, 1 for red, 2 for black or something like that. And at the same time change the image to the correct one:
For example:

<script>
function SetValue(squareimge,squarename){
var myinput=document.getElementById(squarename);

if($myinput.value==0){
myinput.value=1;
squareimage.src='red_piece.gif';
}
if($myinput.value==1){
myinput.value=2;
squareimage.src='black_piece.gif';
}
if($myinput.value==2){
myinput.value=0;
squareimage.src='blank_piece.gif';
}

}

</script>
.
.
.

<img src="blank_piece.gif" onClick="SetValue('square1_1');">
<input type="hidden" value="0" id="square1_1">

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[GKChesterton]

Thanks so much for the reply. I haven't got your solution working yet. Currently there's no response to mouse-clicks. Here's the contents of a typical table cell:

<img src='presentation/red.gif' id='loc_4_1' onClick='SetValue("loc_4_1")'>
<input type='hidden' value='-1' name='loc_4_1'>

My script at this point:

function SetValue(squareimage,squarename){
    var myinput = document.getElementById(squarename);
    if($myinput.value==0){
        myinput.value=-1;
        squareimage.src='presentation/red.gif';
    }
    if($myinput.value==-1){
        myinput.value=1;
        squareimage.src='presentation/blk.gif';
    }
    if($myinput.value==1){
        myinput.value=0;
        squareimage.src='presentation/blank.gif';
    }
}

You noticed the SetValue function calls for two arguments and I'm only passing in one. I can't figure out what goes in the first argument.

I tried combining the input and image (input type='image'), but the form is submitted upon click. I tried adding return-false to prevent this but it didn't seem to help.

Do you have any more guidance for me?

 

[vacunita]

Yeah sorry I forgot to tell you I wrote this straight into the reply box, so there were bound t be some errors.

The first argument, squareimage, refers to the element that holds the image. So just set the argument to "this" without any quotes.

<img src='presentation/red.gif' id='loc_4_1' onClick='SetValue([red]this[/red],"loc_4_1")'>

Also the code uses the ID to get the element and change its value, yet your hidden input has no ID.

Give it an Id, same as its name, but it needs to be an ID



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.