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

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"> <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> 

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;">
            <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>
 
   
 
  

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";
    });
}