How do you make the area of a div clickable? Not the whole div!

Question

If you have a background image in a div with a (drawn) button in the middle and some other drawings around it. How do you make the button clickable but not the whole div because I don't want the user to click the drawings around it, if that makes sense!? I am I wasting my time playing with padding and margins? Should I just create two divs? My boss says he has managed to make it using one div before.

Cheers

Solution 1

Put an element which is transparent and relatively positioned inside the div. Position it at the top of the button and make it the same size as the button. Make the element click able.

Solution 2

Try this code:

#container { width:200px; height:100px; position:relative }
#clicker { display:block; width:20px; height:10px; position:absolute; top:20px; left:100px; }

<div id="container">
    <a id="clicker" href="#link"></a>
</div>

Obviously change all dimensions to match the area you want to make clickable.

Solution 3

In short — you don't.

Backgrounds are backgrounds. They aren't content. They aren't interactive.

It is possible to hack around that, but you shouldn't. If you have some content for the user to interact with, then present it as content. Use an <img>.

Solution 4

You could make the div "position: relative" and then place an <a> tag on the drawing using

display: block;
width: your_width;
height: your_height;
position: absolute;
left: your_position_x;
top: your_position_y;

That would be the cleanest way.

View more solutions

Comments

[Cool Hand Luke]

This was my thought too just wanted to know if it could be done a different way! Cheers

[Cool Hand Luke]

I understand that and normally I would do it this way but in this case its not possible!