[英]Can this inaccessible area be made link, only with CSS?
I have to manage a website witch have the following situation: 我要管理一个网站巫婆有以下情况:
We have a banner system on the website, but the banners are clickable only on small area. 我们的网站上有横幅广告系统,但是横幅广告只能在很小的区域内单击。 I want to make them all clickable, but there are some limitations. 我想让它们全部都可点击,但是有一些限制。
I don`t have access to php files and I can manage HTML after certain level. 我没有访问php文件的权限,可以在达到一定级别后再管理HTML。 Currently I can manage only small area which is marked on the image. 目前,我只能管理图像上标记的小区域。 Example of the area 该地区的例子
Every code that I write is placed only in this marked area. 我编写的每个代码都仅放置在该标记区域中。 There is no way to make whole banner clickable, because there is no that kind of option on GUI. 由于GUI上没有这种选项,因此无法使整个横幅都可单击。 I think that I can target with CSS classes that are above that area, but can`t edit the HTML. 我认为我可以使用该区域上方的CSS类作为目标,但是不能编辑HTML。
Is there an option to make all this area clickable without messing everything up? 是否有一个选项可以使所有区域都可单击,而不会弄乱所有内容?
Here is the full HTML code of one banner: 这是一个横幅的完整HTML代码:
<li class="flex-active-slide" style="width: 1583px; float: left; display: block;"> <div class="image-flexslider-content-left clearfix"> <div class="views-field views-field-field-slider-image"> <div class="field-content"><img typeof="foaf:Image" src="/example-image.png" alt="" draggable="false" style="margin-left: -84.25px; height: 510px;"></div> </div> </div> <div class="white"> <div class="logo-big mobile-logo"> <h1 class="logo"> <a href="/" title="Lorem"></a> </h1> </div> </div> <div class="wrapper-container white"> <div class="logo-big"> <h1 class="logo"> <a href="/" title="Lorem"></a> </h1> </div> <div class="slide-cover flexslider-content-left"> <div class="views-field views-field-title"> <span class="field-content"></span> </div> <div class="views-field views-field-body"> <div class="field-content"> <a href="/something/more/"> <div class="double-container"> <p class="double-blue-head larger-head" style="font-size: 2.4rem !important; font-weight: bold;">Line of text 1</p> </div> <div class="double-container"> <p class="double-blue-head larger-head" style="font-size: 2.4rem !important; font-weight: bold;">Line of text 2</p> </div> </a> <div class="double-container blue-responsive double-blue-head larger-head myt-margin" style="padding: 10px 12px 15px 20px; margin-top: 40px;"> <a href="/something/more/"> <img src="/images/example.png" style="width:100% !Important; max-width:435px !Important; margin-top: 10px; height:auto !important;" draggable="false"></a> </div> </div> </div> <div class="views-field views-field-contextual-links"> <span class="field-content"></span> </div> </div> </div> </li>
You could move the tag outside of the entire div class="field-content" 您可以将标签移到整个div class =“ field-content”之外
<a href="/something/more/">
<div class="field-content">
<div class="double-container">
<p class="double-blue-head larger-head" style="font-size: 2.4rem !important; font-weight: bold;">Line of text 1</p>
</div>
<div class="double-container">
<p class="double-blue-head larger-head" style="font-size: 2.4rem !important; font-weight: bold;">Line of text 2</p>
</div>
<div class="double-container blue-responsive double-blue-head larger-head myt-margin" style="padding: 10px 12px 15px 20px; margin-top: 40px;">
<a href="/something/more/"> <img src="/images/example.png" style="width:100% !Important; max-width:435px !Important; margin-top: 10px; height:auto !important;" draggable="false"></a>
</div>
</div>
</a>
With JavaScript, you can add an event handler to make any element on the page clickable. 使用JavaScript,您可以添加事件处理程序以使页面上的任何元素都可单击。 So for example, if you want to make one of the <div class="field-content">
elements clickable, you would add an event handler like this (assuming you want to make the first one clickable for this example): 因此,例如,如果要使<div class="field-content">
元素之一可点击,则可以添加这样的事件处理程序(假设在此示例中,您希望使第一个元素可点击):
document.querySelectorAll("div.field-content")[0].addEventListener('click', function() {
// your code here; whatever you want to happen when they click
});
You can apply event handlers to any of the HTML elements on your page. 您可以将事件处理程序应用于页面上的任何HTML元素。 If you apply it to a parent element, then it will also be triggered when a child element is clicked, so you can make your whole banner clickable just by adding an event handler to the banner's outer element. 如果将其应用于父元素,则在单击子元素时也会触发该事件,因此只需在横幅的外部元素上添加事件处理程序,即可使整个横幅可点击。
UPDATE: To apply the click handler to an entire class, use a for
loop, like this: 更新:要将单击处理程序应用于整个类,请使用for
循环,如下所示:
var banners = document.getElementsByClassName("field-content");
for (var i = 0; i < banners.length; i++) {
banners[i].addEventListener('click', function() {
location.href = "yourURL";
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.