View Full Version : how to change the image of a particular cell in a table

03-18-2004, 07:17 PM
Hello all,
I have five images as buttons and what I am trying to do is when I click on any of these buttons a corresponding image will be loaded in a cell of a table.
Those five images are also stored in five table cells.
Now the problem here is just to change that particular image on response of a click.

03-18-2004, 07:48 PM
Well it'd be nice to see some code, but I'm going by this example:

So if you change this line:

<INPUT type=image name="search" src="graphics/searchgo.gif" border="0">


<INPUT type=image name="search" src="graphics/searchgo.gif" border="0" onClick="changeImage(this)">

Then you'd need the javascript function:

function changeImage(inputImage) {
if(inputImage.src == "somePic1.jpg") {
inputImage.src = "newPic1.jpg";
else if(inputImage.src == "somePic2.jpg") {
inputImage.src = "newPic2.jpg";

Hopefully that give you a good idea.


03-20-2004, 06:18 PM
thanks for ur reply.
<INPUT type=image name="search" src="graphics/searchgo.gif" border="0" onClick="changeImage(this)">
In the src="graphics/searchgo.gif" whats the graphics means here?
its a path or anything else ?

03-22-2004, 05:49 AM
Yes. graphics/ is a directory holding the searchgo.gif file.

If your picture file is in the same directory as yourhtml file, then you can omit the "graphics/" part.


03-22-2004, 07:28 AM
input type=image is a submit button (just like input type=submit)
To cancel the form submission, you should return false to the onclick handler.

<input type="image" name="search" src="graphics/searchgo.gif" border="0" onclick="changeImage(this);return false" />


<input type="image" name="search" src="graphics/searchgo.gif" border="0" onclick="return changeImage(this);" />

function changeImage(inputImage){
return false;//last statement