<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
i = 0;
function changeimage() {
images = new Array("1.png", "2.png", "3.png", "4.png");
if (i<images.length) {
document.getElementById('myimage').src = images[i];
}
else {
i = 0;
document.getElementById('myimage').src = images[i];
}
i++;
}
</script>
</head>
<body>
<script type="text/javascript">
document.write('<table cellspacing="1" cellpadding="5" border="1">');
for (var i = 0; i < 10; i++) {
document.write('<tr>');
for (var j = 0; j < 5; j++) {
document.write('<td> <img alt=":P" id="myimage" onclick="changeimage()" border="0" src="1.png" width="30" height="30" /> </td>');
}
document.write('</tr>');
}
document.write('</table>');
</script>
</body>
</html>
The pics are attached !
I want the pic in the cell to change when I click on it, but here only the first cell is being affected when I do so. Clicking on any other cell is also affecting only the first cell.
What should I do so that only that cell is affected on which I click ???
Please help !