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_small.gif" alt="Taupe" name="taupe_small" id="taupe_small" style="cursor:hand;border-Style:solid;border-Width:2px;border-Color:white">

This is what I tried.

<img src="images/canvas_colours/images/canvas_taupe_small.gif" alt="Taupe" name="taupe_small" id="taupe_small" style="cursor:hand;border-Style:solid;border-Width:2px;border-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_small.gif" alt="Taupe" name="taupe_small" id="taupe_small" style="cursor:hand;border-Style:solid;border-Width:2px;border-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_small.gif" alt="Taupe" name="taupe_small" id="taupe_small" style="cursor:hand; border-Style:solid; border-Width:2px; border-Color:white;" onClick="this.style.borderColor='#336699'; "/>
<img src="images/canvas_colours/images/canvas_pink_small.gif" onClick="this.style.borderColor='#336699'; " style="cursor:hand; border-Style:solid; border-Width:2px; border-Color:white;" alt="Pink" name="pink_small" id="pink_small" />

[gits]

hi ...

you may use the following method:

[HTML]
<script>
function toggle_highlight(id, color) {
var images = document.getElementsByTagName('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_small.gif" name="taupe_small" id="taupe_small" style="cursor:hand; border-Style:solid; border-Width:2px; border-Color:white;" onclick="toggle_highlight(this.id, #336699');"/>
<img src="images/canvas_colours/images/canvas_pink_small.gif" onclick="toggle_highlight(this.id, '#336699');" style="cursor:hand; border-Style:solid; border-Width:2px; border-Color:white;" name="pink_small" 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_highlight(id) {
var images = document.getElementsByTagName('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_small.gif" name="taupe_small" id="taupe_small" style="cursor:hand; border-Style:solid; border-Width:2px; border-Color:white;" onClick="toggle_highlight(this.id);"/>

<img src="images/canvas_colours/images/canvas_pink_small.gif" onClick="toggle_highlight(this.id);" style="cursor:hand; border-Style:solid; border-Width:2px; border-Color:white;" name="pink_small" 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.getElementsByTagName('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_small.gif" name="taupe_small" id="taupe_small" style="cursor:hand; border-Style:solid; border-Width:2px; border-Color:white;" onclick="toggle_highlight(this.id, '#336699');"/>

<img src="images/canvas_colours/images/canvas_pink_small.gif" onclick="toggle_highlight(this.id, '#336699');" style="cursor:hand; border-Style:solid; border-Width:2px; border-Color:white;" name="pink_small" 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="javascript">

function toggle_highlight(id, color) {

var images = document.getElementsByTagName('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="imagescanvas/canvas_taupe_small.gif" name="taupe_small" id="taupe_small" style="cursor:hand; border-Style:solid; border-Width:2px; border-Color:white;" onclick="toggle_highlight(this.id, '#336699');"/>

<img src="imagescanvas/canvas_pink_small.gif" name="pink_small" id="pink_small" style="cursor:hand; 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="javascript">

var highlight_color = '#336699';

function toggle_highlight(id) {

var images = document.getElementsByTagName('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="imagescanvas/canvas_taupe_small.gif" name="taupe_small" id="taupe_small" style="cursor:hand; border-Style:solid; border-Width:2px; border-Color:white;" onClick="toggle_highlight(this.id);"/>

<img src="imagescanvas/canvas_pink_small.gif" onClick="toggle_highlight(this.id);" style="cursor:hand; border-Style:solid; border-Width:2px; border-Color:white;" name="pink_small" id="pink_small"/>

[gits]

ah, noticed you have changed the script.

i will test it

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

[cmcdermo]

many thanks for your help . . . but still no border colour change ??

<script language="javascript">

var highlight_color = '#336699';

function toggle_highlight(id) {

var images = document.getElementsByTagName('img');

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="imagescanvas/canvas_taupe_small.gif" name="taupe_small" id="taupe_small" style="cursor:hand; border-Style:solid; border-Width:2px; border-Color:white;" onClick="toggle_highlight(this.id);"/>

<img src="imagescanvas/canvas_pink_small.gif" onClick="toggle_highlight(this.id);" style="cursor:hand; border-Style:solid; border-Width:2px; border-Color:white;" name="pink_small" id="pink_small"/>

[gits]

... and change the line

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

to:

image.style.borderColor = image.id == id ? color : 'white';

then it works ... sorry for not testing it ... i'm at the office right now ... and have little time ...

kind regards ...

[cmcdermo]

I appreciate your help.

but still not working, i wish i could fix this myself but i'm pretty novice at this.

I get 'color' is undefined.

<script language="javascript">

var highlight_color = '#336699';

function toggle_highlight(id) {

var images = document.getElementsByTagName('img');

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

var image = images[i];
image.style.borderColor = image.id == id ? color : 'white';


}

}

</script>

[gits]

... yes ... aaaaargh ... whats wrong today ;) use highlight_color instead of color in the last changed line ... color = undefined gives you that hint

kind regards

[gits]

explaination:

... have a close look at the function: it only receives an id ... the one of the image that should colorchange ... we pass it from onclick with this.id ...

the first solution received the color as well ... and set it to the image-style ... the second and the actual one uses a global variable highlight_color instead of color ... and the function doesn't know about a variable color any longer ... so javascript tells you that color is undefined ...

[cmcdermo]

sorry, but i'm completely lost.

[gits]

sorry, but i'm completely lost.

the line:

image.style.borderColor = image.id == id ? color : 'white';

has to be:

image.style.borderColor = image.id == id ? highlight_color : 'white';

[cmcdermo]

Thank you very much for you time and patience :-)

[gits]

... at last we have it ;) ... and now here is the working version:

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

function toggle_highlight(id) {
var images = document.getElementsByTagName('img');

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

image.style.borderColor = image.id == id ? highlight_color : 'white';
}
}
</script>

<img src="images/canvas_colours/images/canvas_taupe_small.gif" name="taupe_small" id="taupe_small" style="cursor:hand; border-Style:solid; border-Width:2px; border-Color:white;" onClick="toggle_highlight(this.id);"/>

<img src="images/canvas_colours/images/canvas_pink_small.gif" onClick="toggle_highlight(this.id);" style="cursor:hand; border-Style:solid; border-Width:2px; border-Color:white;" name="pink_small" id="pink_small"/>
[/HTML]