Question

我是stackoverflow的新手，所以请多多包涵。我将简要概述我希望完成的工作。我有一个小部件，此小部件具有两个特定的属性：

通过单击X按钮隐藏小部件的功能
将“了解更多信息”部分作为可点击的链接，该链接可重定向到我想要的任何地方。

现在，这一切都已完成，如下面的CSS和html代码所示。但是我无法使坐标在小部件地图上工作，也无法获得X来隐藏小部件。我有它的工作版本，但我必须进行大量编辑，因为我添加了设备检测和缩放功能，这导致X在不同的位置移动，因此我必须创建容器和包装器，以使其全部放置。

因此，如果有人可以引导我朝正确的方向介绍如何使X闭合，那就太好了。如果可能的话，如果我能将所有这些代码都放入一个巨大的“容器”中，那也将是惊人的。

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>

Answer 1

使用querySelector（有关的更多信息）选择X而不是getElementById，因为后者仅使用HTML元素的id属性。

基本上这是我所做的更改：

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

对于“了解更多”按钮，您使用了区域，但未将其放置在map容器html元素内。您只有结束</map>标签。我修好了另外，我使用了此here，它有助于我为了解更多信息按钮获得正确的坐标。

要使用<area>，请确保将它们放在<map>中，并用相同的标识符链接<img>和<map>。查看更多website。

重要说明：我已固定图像宽度以使其正常工作。如果您想保持响应速度，请检查解决方案here，但我想您可能需要通过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>

免责声明：我认为最好将图像切成HTML元素，并使用锚点<a>标签或标签来了解更多的号召性用语。

如何修复此X按钮

1 个答案: