更改图像边框颜色onclick

时间:2012-10-11 05:16:04

标签: javascript jquery css image border

我有一个页面,用户需要为T恤选择一种颜色。

当用户选择颜色时,我希望图像的边框颜色变为绿色。

如果用户点击其他颜色,则需要恢复默认边框颜色并更改所单击的新图像的边框颜色。

Here正是我想要做的。

知道我该怎么做吗?

2 个答案:

答案 0 :(得分:3)

假设您的图片使用img标记显示如下:

  <img name="img01" id="img01" src="image.gif" border="2" bordercolor="#000000">

实现onClick fnction fnChangeBorder,如下所示

   function fnChangeBorder(){
      document.getElementById("img01").style.borderColor="#00FF00";
   }

   function fnChangeBorder(){
      var imgElement = document.getElementById("img01");
      imgElement.setAttribute("style:borderColor", "#00FF00");
   }

或者你可以定义一个样式类,并且可以这样做:

   function fnChangeBorder(){
      document.getElementById("img01").style.className="greenClass";
   }

编辑:

对于具有索引id的多个图像,我们可以将onclick函数中的索引传递为:

  <img name="img1" id="img1" src="image.gif" border="2" bordercolor="#000000"
        onclick="javascript:fnChangeBorder(1);">

  <img name="img2" id="img2" src="image.gif" border="2" bordercolor="#000000"
        onclick="javascript:fnChangeBorder(2);">

并将fnChangeBorder更新为:

   function fnChangeBorder(index){
      document.getElementById("img"+index).style.className="greenClass";
   }

对于具有非索引ID的多个图像,我们可以在onclick函数中传递id

  <img name="imgabc" id="imgabc" src="image.gif" border="2" bordercolor="#000000"
        onclick="javascript:fnChangeBorder('imgabc`);">

  <img name="imgxyz" id="imgxyz" src="image.gif" border="2" bordercolor="#000000"
        onclick="javascript:fnChangeBorder('imgxyz');">

并将fnChangeBorder更新为:

   function fnChangeBorder(imageId){
      document.getElementById(imageId).style.className="greenClass";
   }

答案 1 :(得分:1)

使用您的样式创建一个类。例如

.selected{
   border : 1px solid green;
}

然后在点击该项目时应用className。避免使用setAttribute设置项的类名。它有一些问题。然后单击图像,删除所有项目上的选定类名,然后将选择的类名应用于目标图像。