highlight td border when checkbox event is fired

[barnes]

A table consist 4 trs,in each tr we have 2 tds in each td i am putting templates as a image.below of each image we have one check box.when i clicking on a checkbox.i want to highlight the perticular td(image) border..
any help....

[datropics]

Barnes,
instead of trying to put a border on a TD, why not put a border on the image? I believe you will have an easier time doing it that way. Example:

<style>
.imgNotchecked { border:0px;}
.imgChecked {border:1px solid red;}
</style>

<img class='imgNotchecked' id='image001' src='yada.jpg' width='100' height='75'>

<input type='checkbox' onclick="if (this.checked) { document.getElementById('image001').className='imgChecked';}">

[barnes]

many thanks good advice datropics..

[barnes]

one more thing..how to get deactivate the image border if we deselecting checkbox....

[barnes]

i got it.i modified like this..
<style type="text/css">
.imgNotchecked { border:0px;}
.imgChecked {border:1px solid red;}
</style>

<img class='imgNotchecked' id='image001' src='custom-gifts-banner.jpg' width='100' height='75'>
<form name="frmAddress">
<input type="checkbox" name='address' onclick="javascript:activate()">
</form>
<script language="javascript">
function activate()
{
if(document.frmAddress.address.checked == true)
{
document.getElementById('image001').className='imgChecked';
}
else
{
document.getElementById('image001').className='imgNOtChecked';
}
}
</script>

[barnes]

is it possible with out form tag.if possible please help me..

[datropics]

Sure!
<input type="checbox" name="address" id="address" onclick="javascript:activate(this.id,'image001');">

<script ...>
function activate(who,whichimage)
{
document.getElemtnById(whichimage).className = (document.getElementById(who).checked == true) ? 'imgNotChecked' : 'imgChecked';
}
</script>

Doing it this way - you don't need to edit the function itself at all and you can then call it multiple times.

Hope this Helps

[barnes]

<style type="text/css">
.imgNotchecked { border:0px;}
.imgChecked {border:1px solid red;}
</style>

<img class='imgNotchecked' id='image001' src="happybirthday_image.jpg" width='100' height='75'>
<input type="checkbox" name="address" id="address" onclick="javascript:activate(this.id,'image001');">


<script language="javascript">

function activate(who,whichimage)
{
document.getElemtnById(whichimage).className = (document.getElementById(who).checked == true) ? 'imgChecked'

:'imgNotChecked' ;
}
</script>
i didn't get the result through this code.event is not working yaar..

[datropics]

HA HA HA HA HA HA HA HA HA

I had spelt incorrectly!

Original:

document.getElemtnById(whichimage).className = (document.getElementById(who).checked == true) ? 'imgChecked' : 'imgNotChecked'


What it should be:

document.getElementById(whichimage).className = (document.getElementById(who).checked == true) ? 'imgChecked' : 'imgNotChecked';

[barnes]

many many thanks datropics..may i know about you..you are from ?

[barnes]

actually i am working on search engine optimization.i know basics of programming languages.i am in learning stage.ur website is looking good.but ur using frame.that's negative impression for ur site according to seo.it's only suggestion.
r u from westindies..

[datropics]

LOL HAHAHAHAHAH

I am not using frames but rather CSS - but glad to see you checked my site - I need to update it though

Glad you got through with your project. If there are any others you need assistance on let me know