单击时更改边框颜色？ [英] Changing border colour on click?
问题描述
当用户点击图片时，我想更改图片边框的颜色。
不知道如何解决这个问题，我尝试了一些但是它似乎不起作用。
这是我的形象。
< img src =" images / canvas_colours / images /canvas_taupe_small.gif" ALT ="灰褐色"命名= QUOT; taupe_small" ID = QUOT; taupe_small" style =" cursor：hand; border-Style：solid; border-Width：2px; border-Color：white">
这就是我的尝试。
< img src =" images / canvas_colours / images / canvas_taupe_small.gif" ALT ="灰褐色"命名= QUOT; taupe_small" ID = QUOT; taupe_small"风格= QUOT;光标：手;边界风格：固体;边界宽度：2px的;边界颜色：白色;" onclick =" border-Color：red;">
任何帮助都会很棒。
谢谢。
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.
推荐答案
这就是我的尝试。
< img src ="图像/ canvas_colours /图像/ canvas_taupe_small.gif" ALT ="灰褐色"命名= QUOT; taupe_small" ID = QUOT; taupe_small"风格= QUOT;光标：手;边界风格：固体;边界宽度：2px的;边界颜色：白色;"的onclick = QUOT;边框颜色：红;">
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:
这有效，我现在遇到的问题是我有4个可点击的图像，现在可以改变点击时的边框颜色。
当我说点击图片1时边框颜色会改变，如果我点击图片2边框颜色也有变化。
我只希望用边框颜色突出显示一个图像，所以如果图像1的边框颜色突出显示，我点击图像2我希望图像2到有边框颜色d将图像转换为白色。
< img src =" images / canvas_colours / images / canvas_taupe_small.gif" ALT ="灰褐色"命名= QUOT; taupe_small" ID = QUOT; taupe_small"风格= QUOT;光标：手;边界风格：固体;边框宽度：2px的;边框颜色：白色;"的onClick = QUOT; this.style.borderColor =＃336699’ ; " />
< img src =" images / canvas_colours / images / canvas_pink_small.gif"的onClick = QUOT; this.style.borderColor =＃336699’ ; "风格= QUOT;光标：手;边界风格：固体;边框宽度：2px的;边框颜色：白色;" ALT ="粉红色和QUOT;命名= QUOT; pink_small" ID = QUOT; pink_small" />
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" />
嗨...
您可以使用以下方法：
[ HTML]
< script>
函数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？颜色：'''';
}
}
< / script>
< img src =" images / canvas_colours / images / canvas_taupe_small.gif"命名= QUOT; taupe_small" ID = QUOT; taupe_small"风格= QUOT;光标：手;边界风格：固体;边框宽度：2px的;边框颜色：白色;" onclick =" toggle_highlight（this.id，＃336699''）;" />
< img src =" images / canvas_colours / images / canvas_pink_small.gif" onclick =" toggle_highlight（this.id，''＃336699''）;"风格= QUOT;光标：手;边界风格：固体;边框宽度：2px的;边框颜色：白色;"命名= QUOT; pink_small" id =" pink_small" />
[/ HTML]
解决问题;）
亲切的问候......
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 ...
这篇关于单击时更改边框颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
