Changing border colour on click?

[cmcdermo]

I want to change the colour of a border around an image when a user clicks on the image.

Not sure how to go about this, i have tried a few things but it doens't seem to work.

here is my image.

<img src="images/canvas_colours/images/canvas_taupe_sm all.gif" alt="Taupe" name="taupe_sma ll" id="taupe_small " style="cursor:h and;border-Style:solid;bor der-Width:2px;borde r-Color:white">

This is what I tried.

<img src="images/canvas_colours/images/canvas_taupe_sm all.gif" alt="Taupe" name="taupe_sma ll" id="taupe_small " style="cursor:h and;border-Style:solid;bor der-Width:2px;borde r-Color:white;" onclick="border-Color:red;">

Any help would be great.

Thanks.

[Logician]

This is what I tried.

<img src="images/canvas_colours/images/canvas_taupe_sm all.gif" alt="Taupe" name="taupe_sma ll" id="taupe_small " style="cursor:h and;border-Style:solid;bor der-Width:2px;borde r-Color:white;" onclick="border-Color:red;">

Try:

onclick="this.style.borderColor='red'"

What does clicking the image do? If there's any other script associated with clicking the image, there may be a problem.

[cmcdermo]

That works, problem I have now is that I have 4 clickable images that now change the border colour on click.

Probem being that when I lets say click on image 1 the border colour changes and if i click on image 2 the border colour changes as well.

I only want one image to be highlighted with the border colour, so when if image 1 has the border colour highlighted and i click image 2 i want image 2 to have the border colour and image one to go back to white.

<img src="images/canvas_colours/images/canvas_taupe_sm all.gif" alt="Taupe" name="taupe_sma ll" id="taupe_small " style="cursor:h and; border-Style:solid; border-Width:2px; border-Color:white;" onClick="this.s tyle.borderColo r='#336699'; "/>
<img src="images/canvas_colours/images/canvas_pink_sma ll.gif" onClick="this.s tyle.borderColo r='#336699'; " style="cursor:h and; border-Style:solid; border-Width:2px; border-Color:white;" alt="Pink" name="pink_smal l" id="pink_small " />

[gits]

hi ...

you may use the following method:

[HTML]
<script>
function toggle_highligh t(id, color) {
var images = document.getEle mentsByTagName( 'image');

for (var i = 0; i < images.length; i++) {
var image = images[i];

image.style['border-color'] = image.id == id ? color : '';
}
}
</script>


<img src="images/canvas_colours/images/canvas_taupe_sm all.gif" name="taupe_sma ll" id="taupe_small " style="cursor:h and; border-Style:solid; border-Width:2px; border-Color:white;" onclick="toggle _highlight(this .id, #336699');"/>
<img src="images/canvas_colours/images/canvas_pink_sma ll.gif" onclick="toggle _highlight(this .id, '#336699');" style="cursor:h and; border-Style:solid; border-Width:2px; border-Color:white;" name="pink_smal l" id="pink_small "/>
[/HTML]

solves the problem ;)

kind regards ...

[gits]

and ... of course you may improve it the folowing way:

[HTML]
<script>
var highlight_color = '#336699';

function toggle_highligh t(id) {
var images = document.getEle mentsByTagName( 'image');

for (var i = 0; i < images.length; i++) {
var image = images[i];

image.style['border-color'] = image.id == id ? highlight_color : '';
}
}
</script>


<img src="images/canvas_colours/images/canvas_taupe_sm all.gif" name="taupe_sma ll" id="taupe_small " style="cursor:h and; border-Style:solid; border-Width:2px; border-Color:white;" onClick="toggle _highlight(this .id);"/>

<img src="images/canvas_colours/images/canvas_pink_sma ll.gif" onClick="toggle _highlight(this .id);" style="cursor:h and; border-Style:solid; border-Width:2px; border-Color:white;" name="pink_smal l" id="pink_small "/>
[/HTML]

declaring the highlight-color avoids to pass it to the function whereever you have to call it ... and you've got only ONE point to change it, in case you have to!

kind regards ...

[ronnil]

does all of your four images have the same id? (taupe_small) if so that might be the case why all of your images change color at once.

[gits]

does all of your four images have the same id? (taupe_small) if so that might be the case why all of your images change color at once.

no ... that seems to be ok ... the ids of his example are distinct. with the first solution the border of every image changes onclick and he wants to highlight the clicked one only ...

but of course: ids always have to be distinct ... and it is a good point to mention it ... sometimes there are mistakes with that ... especially when creating elements dynamically and setting ids ... but with getElementById this is easy to debug ...

kind regards ...

[cmcdermo]

Thanks for the reply.

I get javascript errors with that.

I put that in a single page to test and it says line 32 object expected.

<script>

function toggle_higlight (id, color) {

var images = document.getEle mentsByTagName( 'image');
for (var i = 0; i < images.length; i++) {

var image = images[i];

image.style['border-Color'] = image.id == id ? color : '';

}

}
#
</script>

<body>



<img src="images/canvas_colours/images/canvas_taupe_sm all.gif" name="taupe_sma ll" id="taupe_small " style="cursor:h and; border-Style:solid; border-Width:2px; border-Color:white;" onclick="toggle _highlight(this .id, '#336699');"/>

<img src="images/canvas_colours/images/canvas_pink_sma ll.gif" onclick="toggle _highlight(this .id, '#336699');" style="cursor:h and; border-Style:solid; border-Width:2px; border-Color:white;" name="pink_smal l" id="pink_small "/>

[gits]

there were typos ... i've corrected them ... try again ... (have a look at the function-name and the function-call) - do you see it? :) ...

[cmcdermo]

yes noticed it now (spelling mistake).

Problem is now, it doesn't change the border colour ?????

[cmcdermo]

this is what i have put in a page to test

<script language="javas cript">

function toggle_highligh t(id, color) {

var images = document.getEle mentsByTagName( 'image');
for (var i = 0; i < images.length; i++) {

var image = images[i];

image.style['border-Color'] = image.id == id ? color : '';

}

}

</script>

<body>



<img src="imagescanv as/canvas_taupe_sm all.gif" name="taupe_sma ll" id="taupe_small " style="cursor:h and; border-Style:solid; border-Width:2px; border-Color:white;" onclick="toggle _highlight(this .id, '#336699');"/>

<img src="imagescanv as/canvas_pink_sma ll.gif" name="pink_smal l" id="pink_small " style="cursor:h and; border-Style:solid; border-Width:2px; border-Color:white;" onclick="toggle _highlight(this .id, '#336699');" />

[gits]

yes noticed it now (spelling mistake).

Problem is now, it doesn't change the border colour ?????

did you mix the 2 solutions? they work in distinct ways ...

kind regards ...

[cmcdermo]

ah, noticed you have changed the script.

i will test it

[cmcdermo]

this is what i have now (doesn't change the border colour)

<script language="javas cript">

var highlight_color = '#336699';

function toggle_highligh t(id) {

var images = document.getEle mentsByTagName( 'image');

for (var i = 0; i < images.length; i++) {

var image = images[i];
image.style['border-Color'] = image.id == id ? highlight_color : '';

}

}

</script>







<body>



<img src="imagescanv as/canvas_taupe_sm all.gif" name="taupe_sma ll" id="taupe_small " style="cursor:h and; border-Style:solid; border-Width:2px; border-Color:white;" onClick="toggle _highlight(this .id);"/>

<img src="imagescanv as/canvas_pink_sma ll.gif" onClick="toggle _highlight(this .id);" style="cursor:h and; border-Style:solid; border-Width:2px; border-Color:white;" name="pink_smal l" id="pink_small "/>

[gits]

ah, noticed you have changed the script.

i will test it

ok ... more typos ... replace: var images = document.getEle mentsByTagName( 'image'); with var images = document.getEle mentsByTagName( 'img'); of course ...