Color Change onClick

Color Change onClick

This a code sniplet for showing a shirt size selection by color change on mouse click in the size

<script language=”javascript”>

function set_selection(divid) {

document.getElementById(divid).style.backgroundColor = “red”;

document.getElementById(divid).style.color = “white”;

for(i=1;i<6;i++) {

if(i != divid) {

document.getElementById(i).style.backgroundColor = “white”; document.getElementById(i).style.color = “black”; }

}

} </script>

<table>

<tr> <th colspan=”5″>Select your Shirt Size</th> </tr>

<tr>

<td><div id=1 onclick=”set_selection(1)” style=”border: solid black 1px;width:35px;text-align:center”><b>S</div></td>

<td><div id=2 onclick=”set_selection(2)” style=”border: solid black 1px;width:35px;text-align:center”><b>M</div></td>

<td><div id=3 onclick=”set_selection(3)” style=”border: solid black 1px;width:35px;text-align:center”><b>L</div></td>

<td><div id=4 onclick=”set_selection(4)” style=”border: solid black 1px;width:35px;text-align:center”><b>XL</div></td>

<td><div id=5 onclick=”set_selection(5)” style=”border: solid black 1px;width:35px;text-align:center”><b>2XL</div></td> </tr>

</table>

Leave a Reply


All material @ copyrighted by chrisranjana.com. If you want to link to this article you are welcome to do so. Unauthorized publication is strictly prohibited. This developer tutorial website contains articles by Php programmers , Software developers, Mysql programmers and asp c# programmers. This website also contains ajax tutorials and advanced mysql sql stored procedures and functions tutorials and sample codes.