Change icon if a div has an specific background color

Question

Hi i hope you could help me, i have a progress bar whith some PNG pin icons that have to change from active pin image to inactive pin image depending of the color of another div here is what im doing, but it doesnt seem to work, i learning JavaScript and Jquery so i don't know if im doing something wrong.

Thanks :)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <style>
    .quadrant {
      border-radius: 5px;
      border: .5px solid #d8d8d6;
      padding: 10px;
      margin-bottom: 20px;
    }

   .quadrant > p {
      text-align: center;
      font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
      font-size: 20pt;
      color: #ffffff;
      font-weight: 700;
    }

    img {
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 10px;
      margin-top: 10px;
    }

    .progress {
      width: 100%;
      height: 25px;
      background-color: #F1F1F1;
      box-shadow: 1px 1px 1px 1px #d8d8d6;
    }

    .bar {
      width: 25%;
      height: 25px;
      background-color: #003E8B;
    }

    .number {
      border-radius: 10px;
      border: 5px solid #ffffff;
      height: auto;
      margin-left: auto;
      margin-right: auto;
      color: #ffffff;
      font-weight: 700;
      text-align: center;
      margin-top: 10px;
      padding-top: 15px;
    }

    .number:hover {
      opacity: 0.8;
    }

    .number > p {
      font-size: 12px;
    }

    .color-pin {
      float: right;
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="row">
      <div class="col-lg-4 col-md-4 col-sm-12 col--xs-12">
        <div class="row">
          <h3>Diagnostico en</h3>
        </div>
        <br><br>
        <div class="row">
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <div class="quadrant" style="background-color: #009BF3;">
              <img src="icons/instutucional.png" alt="Desarrollo Institucional para un Buen Gobierno" class="img-responsive" />
              <p>20%</p>
            </div>
          </div>
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <div classs="quadrant">
              <div class="quadrant" style="background-color: #007305;">
                <img src="icons/economico.png" alt="Desarrollo Institucional para un Buen Gobierno" class="img-responsive" />
                <p>40%</p>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <div classs="quadrant">
              <div class="quadrant" style="background-color: #EA8C1C;">
                <img src="icons/economico.png" alt="Desarrollo Institucional para un Buen Gobierno" class="img-responsive" />
                <p>40%</p>
              </div>
            </div>
          </div>
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <div classs="quadrant">
              <div class="quadrant" style="background-color: #21AAA0;">
                <img src="icons/economico.png" alt="Desarrollo Institucional para un Buen Gobierno" class="img-responsive" />
                <p>40%</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
        <div class="row">
          <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
            <!---<img src="icons/pin_insitucional.png" class="color-pin" id="institucional">--->
          </div>
          <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
            <img src="icons/pin_inactivo_economico.png" class="color-pin" id="economico">
          </div>
          <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
            <img src="icons/pin_inactivo_social.png" class="color-pin" id="social">
          </div>
          <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
            <img src="icons/pin_inactivo_naturaleza.png" class="color-pin" id="naturaleza">
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="progress">
              <div class="bar">
              </div>
            </div>
          </div>
        </div>
        <hr>
        <div class="row">
          <h2>Consejos de Uso</h2>
          <p>Comienza por contestar primero todas las variables y después sube las evidencias conforme las obtengas.</p>
        </div>
        <div class="row">
          <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 number" style="background-color: #d8d8d6; cursor: pointer;" id="btn-institucional">
            <p>1</p>
            <img src="icons/institucional.png" width="50%">
            <p>Desarrollo Institucional para un Buen Gobierno</p>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 number" style="background-color: #007305; cursor: pointer;">
            <p>2</p>
            <img src="icons/economico.png" width="50%">
            <p>Desarrollo Económico Sostenible</p>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 number" style="background-color: #EA8C1C; cursor: pointer;">
            <p>3</p>
            <img src="icons/social.png" width="50%">
            <p>Desarrollo Social Incluyente</p>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 number" style="background-color: #21AAA0; cursor: pointer;">
            <p>4</p>
            <img src="icons/natural.png" width="50%">
            <p>Desartrollo Ambiental Sostenible</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
          crossorigin="anonymous"></script>

  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
          crossorigin="anonymous"></script>

  <script>
    var color= $"btn-institucional");
        if( color.css('background-color') == "rgb(216,216,214)"){
        document.getElementById("institucional").src="icons/pin_inactivo_insitucional.png";
      } else {
        document.getElementById("institucional").src = "icons/pin_insitucional.png";
      }
  </script>
</body>
</html>

Your code looks OK. Make sure that the script is located just before the closing `body` tag so that by the time it runs, the HTML will have been parsed into memory. — Scott Marcus, Mar 24 '18 at 00:42
Please post the whole html to check if there are any other issues — Hussein Salman, Mar 24 '18 at 00:45
Check your developer's console (F12). You have at least one error: `var color= $"btn-institucional");` — Scott Marcus, Mar 24 '18 at 00:53

Eric · Accepted Answer · 2018-03-24T01:03:18.987

0

Two issues I found:

You forgot to add the id institucional to your img dom. It should be:
document.getElementById("btn-institucional").style.backgroundColor gives you the color in rgb, not in hex. In your code, the value it returns is rgb(216, 216, 214)

You can use a rgb2hex utility function:

function rgb2hex(rgb) {
    if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;

    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

source

Here's an example:

console.log(document.getElementById("btn-institucional").style.backgroundColor); // returns rgb(216, 216, 214)

function rgb2hex(rgb) {
    if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;

    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

let backgroundColor = rgb2hex(document.getElementById("btn-institucional").style.backgroundColor)

if( backgroundColor == "#d8d8d6") {
 document.getElementById("institucional").src = "http://www.ptahai.com/wp-content/uploads/2016/06/Best-Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg";
}

    <div class="row">

        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 number" style="background-color: #d8d8d6; cursor: pointer;" id="btn-institucional">

            <p>1</p>

            <img id="institucional" src="institucional" src="https://www.w3schools.com/howto/img_fjords.jpg" width= "50%">

            <p>Desarrollo Institucional para un Buen Gobierno</p>   



        </div>

edited Mar 24 '18 at 01:03

answered Mar 24 '18 at 00:51

Eric

2,635
6
26
66

This should be a comment. – Scott Marcus Mar 24 '18 at 00:54
Whoa! Thanks for your answer it worked! :D, but as im new in this if you have the time can you please explain me why is it working? How did you did that? Thanks :D!! – Tania Martínez Mar 24 '18 at 01:07
I fixed the two issues that I explained in my answer, and it worked :) – Eric Mar 24 '18 at 01:10
Basically, to re-state what I mentioned in my answer, 1. because you did not set `id` for the img tag, `document.getElementById("institucional")` cannot find the target `img` DOM. 2. because document.getElementById("btn-institucional").style.backgroundColor gives you the color in rgb (there are multiple ways to express color values. `rgb` is one of them, `hex` is another. you should do a google search for both) Because it is expressed in rgb, but you are comparing it with the same color, but expressed in `hex` ('#d8d8d6'), they didn't match and the statement inside if didn't get executed. – Eric Mar 24 '18 at 01:13
oh ok and how can i make it for each of the pins and the buttons so that they change when the btn color changes? – Tania Martínez Mar 24 '18 at 01:20
Not sure what you mean, but I guess you want to make the color of one thing react to a change in another thing? You would want to attach an event listener on the event you want to listen to. I would recommend reading up on event listener. – Eric Mar 24 '18 at 01:30
For event listeners, start with something simple such as `onclick`. Find and try some `onclick` examples from online. Like https://www.w3schools.com/jsref/event_onclick.asp or https://api.jquery.com/click/ – Eric Mar 24 '18 at 01:31

score 0 · Answer 2 · answered Mar 24 '18 at 00:58

.style.backgroundColor returns an rgb( string, not a #xxxxxx string. You'll have to parse the rgb( string's numbers and turn them into the appropriate hex string, like so:

const rgb = document.getElementById("btn-institucional").style.backgroundColor;
const rgbNums = rgb.match(/\((.+)\)/)[1].split(', ');
const rgbHex = rgbNums.map(num => {
  const numStr = Number(num).toString(16);
  if (numStr.length === 1) return '0' + numStr;
  return numStr;
});
const hexStr = '#' + rgbHex.join('');
console.log(hexStr);

if(hexStr == "#d8d8d6"){ 
  console.log('set src');
  document.getElementById("institucional").src="icons/pin_inactivo_insitucional.png";     
}

<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
    <img src="icons/pin_insitucional.png" class="color-pin" id="institucional">
</div>

<div class="row">
  <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 number" style="background-color: #d8d8d6; cursor: pointer;" id="btn-institucional">     
  <p>1</p>          
  <img src="icons/institucional.png" width= "50%">
  <p>Desarrollo Institucional para un Buen Gobierno</p> 
</div>

score 0 · Answer 3 · answered Mar 24 '18 at 01:08

You have a syntax error here: var color= $"btn-institucional");.

It should be: var color= $("btn-institucional");.

And, when you get the background-color CSS property value, it comes back as an rgb string with spaces after each comma:

// Notice that there will be spaces after each comma in the result
console.log($("div").css("color")); // rgb(255, 255, 0)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="color:#ff0;">test</div>

You can either adjust the rgb string you are comparing it to or simply extract the value of the style attribute, which will come back as the hex value it was written into the HTML with:

// This is a bit longer, but shows that you can get the original hex value

// Get the "style" attribute, split its value where the colon is and return the second part of the 
// resulting array.
console.log($("div").attr("style").split(":")[1]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="color:#ff0;">test</div>

Change icon if a div has an specific background color

3 Answers3