我是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>
答案 0 :(得分:2)
使用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>
标签或标签来了解更多的号召性用语。