如何使按钮在图像的位置可点击？

Question

I have a button which has an image, but that the button is not clickable in the place of image. It is clickable only in the outside place of the image (in the image name)

Below is my tags

 .btn { border: 0px solid white; background: transparent; color: black; font-size: 12px; border-radius: 20px; }.default:hover { background: #e7e7e7; }

 <button type="button" name="search" class="btn default"> <img src="https://placekitten.com/g/100/100" style="border-radius: 50%;" /> image name here </button>

How can I make that button to be clickable in the place of an image?

Answer 1

It's working perfectly.

 <button type="button" name="search" class="btn default" onclick=console.log("clicked")><img src="http://graph.facebook.com/00000000/picture" style="border-radius: 50%;"/>image name here</button>

Answer 2

Just addpointer-events: none; to the img tag.

 .btn { border: 0px solid white; background: transparent; color: black; font-size: 12px; border-radius: 20px; }.default:hover { background: #e7e7e7; }.btn img { pointer-events: none }

 <button type="button" name="search" class="btn default"><img src="http://graph.facebook.com/00000000/picture" style="border-radius: 50%;"/>image name here</button>

Answer 3

This works as expected -but I modified your code a little to make it more semantically correct. I put the image inside a figure element and the name inside a figcaption element to give better image structure - then an event listener on the button anda console to check - and it is all fine.

 const button = document.querySelector('button'); button.addEventListener('click', clicked); function clicked(){ console.log('I was clicked'); }

 .btn { border: 0px solid white; background: transparent; color: black; font-size: 12px; border-radius: 20px; }.btn img { border-radius: 50%; }.default:hover { background: #e7e7e7; }.btn:hover, .btn:focus { outline: none }

 <button type="button" name="search" class="btn default"> <figure> <img src="https://i.pinimg.com/originals/3e/6b/cd/3e6bcdc46881f5355163f9783c44a985.jpg" width="50"/> <figcaption> fluffy kitten </figcaption> </figure> </button>

Answer 4

This can be done in three ways

1. Image as input

    <input type="image" name="Name of image button" src="Path of the Image file? border="Specfiy Image Border " alt="text">

2. By using css style

<button onclick="myFunction()"><img src="your image name here.png"></button>

3. using `onclick` javascript function

 <button onclick="myFunction()"><img src="your image name here.png"></button>

Answer 5

Using Onclick:

 function clickedButton(){ alert("I am clicked;"); }

 .btn { border: 0px solid white; background: transparent; color: black; border-radius: 20px; width: 150px; height: 30px; cursor: pointer; outline: none; background: url("https://picsum.photos/150/30") no-repeat scroll 0 0 transparent; }.btn:active{ border: 2px solid #111; }.default:hover { background: #e7e7e7; }

 <button onclick="clickedButton()" type = "button" name = "search" class = "btn default" > <img src="">image name here </button>https://stackoverflow.com/posts/67031752/edit#

Using Add Listener

 document.getElementById("button").addEventListener("click", clickedButton); function clickedButton() { alert("I as clicked;"); }

 .btn { border: 0px solid white; background: transparent; color: black; border-radius: 20px; width: 150px; height: 30px; cursor: pointer; outline: none; background: url("https://picsum.photos/150/30") no-repeat scroll 0 0 transparent; }.btn:active { border: 2px solid #111; }.default:hover { background: #e7e7e7; }

 <button id="button" type="button" name="search" class="btn default"> <img src="">image name here </button>

Add with onclick

 .btn { border: 0px solid white; background: transparent; color: black; border-radius: 20px; width: 150px; height: 30px; cursor: pointer; outline: none; background: url("https://picsum.photos/150/30") no-repeat scroll 0 0 transparent; }.btn:active{ border: 2px solid #111; }.default:hover { background: #e7e7e7; }

 <button type = "button" name = "search" class = "btn default" > <img src="">image name here </button>

Something like this should help!