How to specify html button tag

Question

I am wondering if there is a way to specify an HTML button tag, <button> image, so that the image is clickable on my web page. That way, when users click on an image, I may have other things.

It doesn’t work, and it was interesting whether it is even possible

HTML code -

 <button> <img src="images/dagger.png" width="10%" height="10%" id="dagger" /> </button> 

Answer 1

Not quite sure what you are trying to achieve, but perhaps this example helps.

HTML

 <button> <img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_32.png" id="dagger" /> </button> 

Javascript

 $(function(){ $("#dagger").click(function(){ alert("click"); }); }); 

Answer 2

You can set the image as a button background

 button { background-image:url('images/dagger.png'); } 

Answer 3

I had similar problems, and I thought that I would drop this message to anyone who sees this stream.

In my opinion, you do not want BUTTONS, but a clickable image that acts like a button. Here is what I did:

HTML:

 <img src="images/dagger.png" width="10%" height="10%" id="dagger" /> 

JavaScript / jQuery:

 <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script> $("#dagger").click(function(){ // what you wanted your button to do when user clicks it }); </script> 

By doing this, you get rid of the usual “button” image, and you can use any image you want as a clickable button. In addition, you get the same functionality that you want from a button, and it opens up many other ways to achieve your goals.

Hope this helps!

---

The other method that I use simply puts the onclick event in img to call the function.

HTML:

 <img src="images/dagger.png" width="10%" height="10%" id="dagger" onclick="myFunction()" /> 

JS:

 <script> myFunction() { // what I want to happen if user clicks image } </script> 

Depending on what you are doing and what you are trying to manipulate, all the examples on this page will provide you with the best / worst ways to do this. Using the onclick event in the img tag, you can pass the variables / information to the function you want to use, and then use the relay function for your PHP / ASP / etc. Also, if you were dealing with a form, you may have information about the function / subordination of your function, rather than the default view that the form uses. Use your imagination with the problems you are facing and decide which method works best. Never settle for learning just one way to do something.

Answer 4

Usually you won’t use a button that you can simply bind the click event to the image using JavaScript.

But if you have a button, you can style the button with CSS and the background-image property.