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
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.
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).
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.
To hide an element, set the style display property to “none”. document. getElementById("element"). style.
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.
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>
.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With