Link part of a photo to another html page

Question

I want to link part of a photo on an html page to redirect to another html page I'm making. What's the easiest way?

<div class="large-8 columns">
    <div style="background-image: url('../BackgroundGrid.png')>
        <div class="layer-wrapper">
            ...
        </div>
    </div>
</div>

So redirect a corner of the BackgroundGrid image to a separate html page. Any ideas?

Answer 1

You can create a transparent

<a href="http://google.com" target="_blank"> 

on top of your photo with css in this way (say you want the half top part to be clickable and link to google):

.parent-wrapper{
  position: relative;
}

.photo-click-area {
   position: absoulte;
   top: 0;
   left: 0;
   height: 50%;
   background: transparent;
   display: block;
   cursor: pointer;
   z-index: 9;
}

So your code could look like this:

<div class="large-8 columns parent-wrapper">
    <a class="photo-click-area" href="http://google.com" target="_blank" />
    <div style="background-image: url('../BackgroundGrid.png')>
        <div class="layer-wrapper">
            ...
        </div>
    </div>
</div>