Can this inaccessible area be made link, only with CSS? - php

Question

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.
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.
I think that I can target with CSS classes that are above that area, but can`t edit the HTML.
Is there an option to make all this area clickable without messing everything up?
Here is the full HTML code of one banner:
<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">
</h1>
</div>
</div>
<div class="wrapper-container white">
<div class="logo-big">
<h1 class="logo">
</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;">
<img src="/images/example.png" style="width:100% !Important; max-width:435px !Important; margin-top: 10px; height:auto !important;" draggable="false">
</div>
</div>
</div>
<div class="views-field views-field-contextual-links"> <span class="field-content"></span> </div>
</div>
</div>
</li>

Answer 1

You could move the tag outside of the entire 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;">
<img src="/images/example.png" style="width:100% !Important; max-width:435px !Important; margin-top: 10px; height:auto !important;" draggable="false">
</div>
</div>
</a>

Answer 2

With JavaScript, you can add an event handler to make any element on the page clickable. 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):
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. 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:
var banners = document.getElementsByClassName("field-content");
for (var i = 0; i < banners.length; i++) {
banners[i].addEventListener('click', function() {
location.href = "yourURL";
});
}