Member Avatar for venus_me11 
<html>
<head>
<script language="JavaScript">
	var bgcolorSelected = "#cc3333";	
	var bgcolorNotSelected = "#ffffff";
	
	function HighLightTR_a(el){
		if (document.myform.s23.checked == true) {
			el.bgColor=bgcolorSelected;
		} else {
			el.bgColor=bgcolorNotSelected;
		}						
	}
</script>
</head>
<body>
<form name="myform" action="" method="POST">	
<table border="0" cellspacing="1" cellpadding="4" bgcolor="#F2F2F2" >
     <tr align="center"  bgcolor="#FFFFFF">
		<td height="50" width="50" onClick="HighLightTR_x(this);" <?php echo $c[23];?>>
		<input type="checkbox" name="s23" value="x" <?php echo $s[23];?>><br>X
               <img src="images/upuan.jpg" width="50" height="50" name="s22">
</td>
				
	</tr>
</table>
<input type="submit" name="submit" value="Reserve">
</form>
</body>
</html>

i have a table here with a checkbox in it with a picture.

what i want is when a user click the image, the table row will change color and when i click the reserve button, the value of the image will display in the page..

i've tried it but nothing happens..

please help me...

tnx..

  • 2 Contributors
  • 4 Replies
  • 153 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by saiprem
Member Avatar for saiprem

Hi, are you looking like this.....

<script language="JavaScript">
	var bgcolorSelected = "#cc3333";	
	var bgcolorNotSelected = "#ff00dd";
	
	function HighLightTR_x(el){
	var check = 'check_'+el;
	var ima = 'image_'+el;
		if(document.getElementById(check).checked == true)
		{
			alert(document.getElementById(ima).src);
			document.getElementById(el).style.background=bgcolorSelected;
		}
		else
		{
			document.getElementById(el).style.background=bgcolorNotSelected;
		}
	}
</script>

<form name="myform" action="" method="POST">	
<table border="1" cellspacing="1" cellpadding="4">
     <tr align="center" id="td_id1" >
		<td height="50" width="150" onClick="javascript:HighLightTR_x('td_id1');">
			<input type="checkbox" id="check_td_id1" name="check_td_id1" value="x">
               <img src="DT.gif" id="image_td_id1" width="50" height="50">
		</td>
	</tr>
	
	<tr align="center" id="td_id2" >
		<td height="50" width="150" onClick="javascript:HighLightTR_x('td_id2');">
			<input type="checkbox"  id="check_td_id2" name="check_td_id2" value="x">
               <img src="DT.gif" id="image_td_id2" width="50" height="50">
		</td>
	</tr>
</table>
<input type="submit" name="submit" value="Reserve">
</form>
Edited by saiprem because: n/a
Member Avatar for venus_me11

The idea is just like that..

but if its possible not to have a checkbox.. instead its only images...

Im going to use it for bus reservation where a passenger choose a seat.

it looks like a more realistic bus seats...

pls. help me

Member Avatar for venus_me11

i've tried to manipulate the codes that you gave me.. but when i remove the checkbox, the table row doesnt change image

Member Avatar for saiprem

i've tried to manipulate the codes that you gave me.. but when i remove the checkbox, the table row doesnt change image

What do you want onclick on the image it should show one color and onclicking on the image again it show show old color, am I right? and there should not be any check boxes....isn't it.

If you are looking for that just get this and try.....I have given in 2 different ways, which one is good for you use it...

<script language="JavaScript">
	var bgcolorSelected = "#cc3333";	
	
	function HighLightTR_x(el){
	
		if(document.getElementById(el).style.background == '')
		{
			document.getElementById(el).style.background = bgcolorSelected;
		}
		else
		{
			document.getElementById(el).style.background = '';
		}
	}
</script>

<form name="myform" action="" method="POST">	
<table border="1" cellspacing="1" cellpadding="4">
     <tr align="center" >
		<td height="50" width="150" id="td_id1" onClick="javascript:HighLightTR_x('td_id1');">
			<input type="checkbox" id="check_td_id1" name="check_td_id1" value="x">
               <img src="DT.gif" id="image_td_id1" width="50" height="50">
		</td>
	</tr>
	
	<tr align="center"  >
		<td height="50" width="150" id="td_id2" onclick="if(this.style.background==''){this.style.background='#ff6669';} else { this.style.background=''; }">
			<input type="checkbox"  id="check_td_id2" name="check_td_id2" value="x">
               <img src="DT.gif" id="image_td_id2" width="50" height="50">
		</td>
	</tr>
</table>
<input type="submit" name="submit" value="Reserve">
</form>
Edited by saiprem because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.