Tips for displaying a checkmark icon once an image has been chosen

Question

Tips for displaying a checkmark icon once an image has been chosen

When selecting images one by one and highlighting them with border:2px solid #b404ae;, I want to place a tick image at the bottom of the selected images. However, my attempt was unsuccessful as only the border color is showing. Can anyone provide me with a solution for this issue?

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>

javascript jquery html css image

Answer 1

Answer №1

One option is to place a span tag beside the image and have it positioned over the image. You can include the HTML code (✔) for a tick mark within the span. Here's a slight modification of your function.

Check out the JSFiddle sample code: 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>

I hope this solution is helpful.

Answer 2

One option is to place a span tag beside the image and have it positioned over the image. You can include the HTML code (✔) for a tick mark within the span. Here's a slight modification of your function.

Check out the JSFiddle sample code: 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>

I hope this solution is helpful.

Answer 3

Answer №2

           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);

.highlighted {
  border: 2px solid #b404ae;
}

img {
 height: 40px;
  width: 122px; 
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="textbox">
    <img src="https://www.example.com/image1.png">
    <img src="https://www.example.com/image2.png">
    <img src="https://www.example.com/image3.png">
    <img src="https://www.example.com/image4.png">
  </div>
</body>
</html>

Answer 4

           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);

.highlighted {
  border: 2px solid #b404ae;
}

img {
 height: 40px;
  width: 122px; 
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="textbox">
    <img src="https://www.example.com/image1.png">
    <img src="https://www.example.com/image2.png">
    <img src="https://www.example.com/image3.png">
    <img src="https://www.example.com/image4.png">
  </div>
</body>
</html>

Tips for displaying a checkmark icon once an image has been chosen

Answer №1

Answer №2

Similar questions

Choose specific elements based on their attribute within a class, and then either apply or remove a class

"Discover the power of Jade template engine: A guide to effortlessly setting a stunning background image

The functionality of Intersection Observer causes text to appear over the header

There was an issue with the SidebarController function being undefined, as it was expected to be a function

The problem in React arises when the event.target becomes undefined or null

The reset function is malfunctioning on the meteor entity

Obtain specific text from elements on a website

Discovering the most recently selected element in jQuery

Retain values of JavaScript variables acquired by their IDs even after a page refresh

Avoid using the JQuery IIFE outside of the document ready function as it is considered a

Should I open the Intel XDK hyperlinks in the default web browser instead of

Update the text on Bootstrap Tooltip when it is clicked

Iterating through JSON array using Jquery and making POST/GET requests

adjustable content cursor location

javascript inquiry about if statements

Using a single Angular component to dynamically load data based on the query string

Deactivate the next button on the paginator within the PrimeNG p-table

Utilize Angular, PHP, and MySQL to add data to database encountering error

JSRender: A guide on accessing variables from outside the block

Setting up server-side CORS in ExpressJS will not include the "Access-Control-Allow-Origin" header