How to fix this X button

Question

I am new to stackoverflow so bear with me. I will give you a quick overview of what I wish to accomplish. I have a widget and this widget has two specific properties:

The ability to hide the widget by clicking the X button
Having the learn more section as a clickable link that redirects wherever i want.

Now this is all completed as you can see with the CSS and html code below. But I cannot get the coordinates to work on the widget map and I cannot get the X to hide the widget. I have a working version of it BUT I had to do major edits because I added device detection and scaling which caused the X to move in different places, therefore I had to create containers and wrappers so it all stays put.

So if anyone can lead me into the right direction on how to get the X to close it that would be great. And if possible, if I can put all this code into one giant "container" that would be amazing too.

function myFunction() {
  var x = document.getElementById(".img-wrapper");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

.img-wrapper {
  width: 220px;
  height: 180px;
  opacity: 1;
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 98;
  class="responsive";
  /* Positioning of the membership plan image*/
}

.img-responsive {
  width: 100%;
  height: auto;
  /* Responsive Property*/
}


/* Button positioning and style properties*/

.img-overlay {
  background-color: #FFFFFF00;
  border: none;
  color: Black;
  width: 0px;
  height: 0px;
  padding: 4px 14px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;
  cursor: pointer;
  position: fixed;
  bottom: 195px;
  right: 9px;
  z-index: 99;
}

.img-overlay:before {
  content: ' ';
  display: none
  /* adjust 'height' to position overlay content vertically */
  height: 50%;
}

.btn-responsive {
  /* matches 'btn-md' */
  padding: 10px 16px;
  font-size: 16px;
  line-height: 1.3333333;
  border-radius: 6px;
}

@media (max-width:760px) {
  /* matches 'btn-xs' */
  .btn-responsive {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
  }
}

<div class="img-wrapper">
  <div id='widgetFooter'>


    <img class="img-responsive" src="https://d1l9wtg77iuzz5.cloudfront.net/assets/3593/282651/original_NSR.png?1574271404" alt="Widget" usemap="#widgetmap">


    <area shape="rect" coords="26,149,253,200" alt="widget" href="google.com" target="_blank">

    <button onclick="myFunction()" class="button22">X</button>

    </map>


  </div>
  <div class="img-overlay">

  </div>
</div>

Goran Stoyanov · Answer 1 · 2019-12-05T19:21:30.200

Use querySelector (more about it here) to select the X instead of getElementById as the latter uses only the id attribute of HTML elements.

Basically this is the change I made:

var x = document.querySelector(".img-wrapper");

And for the learn more button you've used area but it was not put inside a map container html element. You only had a closing </map> tag. I fixed this. Also, I used this website which helped me get the correct coordinates for the learn more button.

To use <area> make sure you put them inside <map> and you link the <img> and the <map> with an identical identifier. See more here.

Important note: I've fixed the image width to make it work. If you want to keep the responsiveness, check for solutions here but I guess you will probably need to handle this via Javascript.

function myFunction() {
  var x = document.querySelector(".img-wrapper");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

.img-responsive {
  width: 443px;
  height: auto;

  /* Responsive Property*/
  }
  /* Button positioning and style properties*/
  .img-overlay {
  background-color: #FFFFFF00;
  border: none;
  color: Black;
  width: 0px;
  height: 0px;
  padding: 4px 14px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;

  cursor: pointer;
  position: fixed; bottom: 195px; right: 9px; z-index: 99;

  }

  .img-overlay:before {
    content: ' ';
    display: none
    /* adjust 'height' to position overlay content vertically */
    height: 50%;


  }
  .btn-responsive {
    /* matches 'btn-md' */
    padding: 10px 16px;
    font-size: 16px;
    line-height: 1.3333333;
    border-radius: 6px; 


  }

  @media (max-width:760px) { 
      /* matches 'btn-xs' */
      .btn-responsive {
      padding: 1px 5px;
      font-size: 12px;
      line-height: 1.5;
      border-radius: 3px;

    }
  }

<div class="img-wrapper">
  <div id='widgetFooter'>


    <img class="img-responsive" src="https://d1l9wtg77iuzz5.cloudfront.net/assets/3593/282651/original_NSR.png?1574271404" alt="Widget" usemap="#widgetmap">

<map name="widgetmap">
    <area shape="rect" coords="406,295,41,213" alt="widget" href="google.com" target="_blank">
</map>


    <button onclick="myFunction()" class="button22">X</button>


  </div>
  <div class="img-overlay">

  </div>
</div>

Disclaimer: I think it's better to slice the image into HTML elements and use an anchor <a> tag or a tag for the learn more call to action.

How to fix this X button

1 Answers1