Question

I have a div that contains an image with text and a button over layed on top of it. The text is positioned absolute and will cover the entire image. At the end of the text will also be a button. I am trying to get the image to be a link, but I am having problems doing so.

My current solution involves wrapping both my image and text within an a tag. This doesn’t work as when the user tries to click the button, they would click the link instead of the button. I also have tried wrapping just my img tag inside the a tag, but since my text is positioned on top, the link will never be registered as being clickable.

http://jsfiddle.net/NxtWa/

HTML:

<div class="tile">
    <a href="http://www.google.ca">
        <img src="http://www.placehold.it/480x260">
        <div class="text">
            <p>Long long paragraph</p>
            <button>Button</button>
        </div>
    </a>
</div>

CSS:

.tile { position:relative; width:480px; height:260px; }
.tile .text { position:absolute; top:0px; left:0px; width:480px; height:260px; }

Answer 1

I assume you are positioning the text and button over the image using z-index property. You will have to percolate the click event down to the image by using a suitable event-watcher/event-handler pattern so that the appropriate clicks for the text and button are handled through them and those which need to go down to the image are passed on further by the event handler for the image/button.

Related question with a possible solution: JavaScript pass mouseenter event to element that is underneath another element

On more research, this technique is called event bubbling (Sorry the term had slipped my mind earlier). Additional help on how to get this done @ https://stackoverflow.com/a/1026101/17716