Question

当我逐个选择图像时我有图像，同时选择我使用border:2px solid #b404ae;突出显示图像但是我想在选择图像时将勾号图像放在图像的底部但是不成功可以告诉任何人我怎么做（即它没有显示图像，只显示无聊的颜色）

css：

 .highlighted {
             border:2px solid #b404ae;
             background-image: url(image/tick.png);

           }

的javascript：

 <script type="text/javascript">


           var ImageSelector = function() {
              var imgs = null;
              var selImg = null;

              return {
                 addImages: function(container) {
                    imgs = container.getElementsByTagName("img");
                    for(var i = 0, len = imgs.length; i < len; i++) {
                       var img = imgs[i];
                       img.className = "normal";
                       img.onclick = function()  {
                          if(selImg)   {
                             selImg.className = "normal";
                          }
                          this.className = "highlighted";
                          selImg = this;
                       };
                    }
                 }
              };
           }();

          </script>

<script type="text/javascript">

              var div = document.getElementById("textbox");
              ImageSelector.addImages(div);

          </script>

Answer 1

您可以在图片旁边添加范围标记，并将其放置在图像上方。此外，在范围内使用html代码（✔）作为刻度线。我已经写了一个小功能的修改。

JSFiddle示例代码：http://jsfiddle.net/hz8q9z17/3/

var ImageSelector = function() {
  var imgs = null;
  var selImg = null;
  return {
    addImages: function(container) {
      imgs = container.getElementsByTagName("img");
      for (var i = 0, len = imgs.length; i < len; i++) {
        var img = imgs[i];
        img.className = "normal";
        img.nextSibling.className = "normal";
        img.onclick = function() {
          if (selImg) {
            selImg.className = "normal";
            selImg.nextSibling.className = "normal";
          }
          this.className = "highlighted";
          this.nextSibling.className = "highlighted";
          selImg = this;
        };
      }
    }
  };
}();
var div = document.getElementById("textbox");
ImageSelector.addImages(div);

.highlighted {
    border:2px solid #b404ae;
    background-image: url(image/tick.png);
}
#textbox span {
    bottom: 4px;
    color: #0f0;
    left: -15px;
    position: relative;
    display:none;
    border:none;
}
#textbox span.highlighted {
    display:inline;
    
}

<div id="textbox">
    <img src="http://www.flags.net/images/smallflags/CHIN0001.GIF" /><span class="tickmark">&#10004;</span><br />
  <img src="http://www.flags.net/images/smallflags/UNST0001.GIF" /><span class="tickmark">&#10004;</span><br />
  <img src="http://www.flags.net/images/smallflags/INDA0001.GIF" /><span class="tickmark">&#10004;</span><br />
  <img src="http://www.flags.net/images/smallflags/UNKG0001.GIF" /><span class="tickmark">&#10004;</span><br />
</div>

希望这有帮助。

Answer 2

＆＃13;

           var ImageSelector = function() {
              var imgs = null;
              var selImg = null;
              return {
                 addImages: function(container) {

                    imgs = container.getElementsByTagName("img");
                    for(var i = 0, len = imgs.length; i < len; i++) {
                       var img = imgs[i];

                       img.className = "normal";
                       img.onclick = function()  {
                          if(selImg)   {
                             selImg.className = "normal";
                            selImg = null;
                           }
                            this.className = "highlighted";
                            selImg = this;
                        

                         
                          
                       };
                    }
                 }
              };
           }();

              var div = document.getElementById("textbox");
              ImageSelector.addImages(div);

＆＃13;

.highlighted {
  border: 2px solid #b404ae;
}

img {
 height: 40px;
  width: 122px; 
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="textbox">
    <img src="https://www.google.com/chrome/assets/common/images/chrome_logo_2x.png">
    <img src="https://www.google.com/chrome/assets/common/images/chrome_logo_2x.png">
    <img src="https://www.google.com/chrome/assets/common/images/chrome_logo_2x.png">
    <img src="https://www.google.com/chrome/assets/common/images/chrome_logo_2x.png">
  </div>
</body>
</html>

＆＃13;

如何在选择图像时显示刻度图像

2 个答案: