image selection process

[cr-ispinternet]

Hi All,

 

Ive got a small piece of java script code which basically gives me a status

when the image is checked and another status when the image is un checked.

 

I need 8 images in total with 8 different status, ive got the code working ok

but something i cant do as im not that offay with javascript is make sure

that if one image is selected, when another image is selected the origianl image

which was selected is returned to its previosu state..

 

<script type="text/javascript">

function toggleButtonV1() {
    var value = document.getElementById('Viewing1').value;
    if(value == 'on') {
        document.getElementById('Viewing1').value = 'off';
        document.getElementById('toggleButtonImgV1').src = 'archive/images/pressed/viewing/pressed-1.jpg';
        document.getElementById('buttonValueViewing').innerHTML = '1'; 

    } else {
        document.getElementById('Viewing1').value = 'on';
        document.getElementById('toggleButtonImgV1').src = 'archive/images/viewing/index_09.png';
        document.getElementById('buttonValueViewing').innerHTML = '0';
    }
}

function toggleButtonV2() {
    var value = document.getElementById('Viewing2').value;
    if(value == 'on') {
        document.getElementById('Viewing2').value = 'off';
        document.getElementById('toggleButtonImgV2').src = 'archive/images/pressed/viewing/pressed-1.jpg';
        document.getElementById('buttonValueViewing').innerHTML = '2'; 

    } else {
        document.getElementById('Viewing2').value = 'on';
        document.getElementById('toggleButtonImgV2').src = 'archive/images/viewing/index_11.png';
        document.getElementById('buttonValueViewing').innerHTML = '0';
    }
}

</script>

<!-- Debug Start -->
<font face="Tahoma" style="font-size: 8pt">Value: </font> <span id="buttonValueViewing"> </span>
<!-- Debug Finish -->

<!-- Mysql Query Start -->
if($row->status == "invisible" ) {           
echo <<<END
END;                
}else if ($row->status == "active" ) {
echo <<<END  
    <img src="$row->image_location" onclick="toggleButtonV2();" id="toggleButtonImgV2">
    <input type="hidden" name="Viewing2" id="Viewing2" value="on">
END;
}else{
echo <<<END
<img src='$row->image_disabled'>
END;
}    
}

<!-- Mysql Query Finish -->

 

thats the bsisc code ( no hero on that side but it works to a degree, im hoping once ive

figured it all out i can tidy it all up.

 

Does any one know how i can make sure that only one image at a time selected

as i cant and dont need multiple images selected at any one time.

 

any help would be appreciated

 

Kind Regards

 

Alan