Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 792
Cool Hand Luke Avatar asked Nov 13 '09 11:11

Cool Hand Luke


People also ask

How do I make part of a div clickable?

We simply add the onlcick event and add a location to it. Then, additionally and optionally, we add a cursor: pointer to indicate to the user the div is clickable. This will make the whole div clickable.

How do I make a div not take up a whole line?

Answer: Use the CSS display Property You can simply use the CSS display property with the value inline-block to make a <div> not larger than its contents (i.e. only expand to as wide as its contents).

How do I make a div text clickable?

JavaScript provides addEventListener() method to make a clickable text within <div> tag. Moreover, a simple function can also be associated with the onclick functionality of the div tag to make a div clickable. The clickable operation can be applied by accessing the id or class attribute.

How do I hide part of a div in HTML?

To hide an element, set the style display property to “none”. document. getElementById("element"). style.


3 Answers

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.

like image 116
rochal Avatar answered Sep 20 '22 16:09

rochal


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

like image 43
Quentin Avatar answered Sep 19 '22 16:09

Quentin


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.

like image 40
rahul Avatar answered Sep 23 '22 16:09

rahul