views:

266

answers:

4

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

+5  A: 

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

David Dorward
I understand that and normally I would do it this way but in this case its not possible!
Cool Hand Luke UK
+4  A: 

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.

rahul
This was my thought too just wanted to know if it could be done a different way! Cheers
Cool Hand Luke UK
+1  A: 

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.

Pekka
A: 

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