Как придать HTML-кнопке метку изображения

Question

Мне интересно, есть ли способ присвоить тэгу HTML-кнопки, <button> изображение, чтобы изображение можно было кликнуть на моей веб-странице. Таким образом, когда пользователи нажимают на изображение, у меня могут происходить другие вещи

Кажется, что это не работает, и мне было интересно, если это вообще возможно

HTML код -

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

Answer 1

Не совсем уверен, что вы пытаетесь достичь, но, возможно, этот пример поможет.

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

Вы можете установить изображение в качестве фона кнопки

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

Answer 3

У меня были похожие проблемы, и я решил оставить этот пост для всех, кто увидит эту тему в будущем.

Насколько я понимаю, вы не хотите КНОПКУ, а кликабельное изображение, которое действуеткак кнопкаВот что я сделал:

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>

Делая это таким образом, вы избавляетесь от обычной кнопки ""изображение, и вы можете использовать любое изображение, которое вы хотите, в качестве вашей кнопки.Кроме того, вы получаете ту же функциональность, что и от кнопки, и она открывает множество других путей для достижения ваших целей.

Надеюсь, это поможет!

---

Другой метод, который я использую, заключается в простом помещении события onclick в img для вызова функции.

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>

В зависимости от того, что вы делаете и чем пытаетесь манипулировать, все примеры на этой странице предоставят вам лучшие / худшие способы сделать это.Используя событие onclick внутри тега img, вы можете передать переменные / информацию в функцию для использования, а затем передать функцию в ваш PHP / ASP / и т. Д. Также, если вы имели дело сформа, вы можете иметь свою функцию обработки информации / представления, а не отправка по умолчанию, который используют формы.Используйте свое воображение с проблемами, с которыми вы сталкиваетесь, и решите, какой метод работает лучше.Никогда не соглашайтесь на изучение только одного способа сделать что-то.

Answer 4

Обычно вы бы не использовали кнопку, вы можете просто привязать событие click к изображению с помощью JavaScript.

Но если вам нужна кнопка, вы можете стилизовать кнопку с помощью CSS и свойства background-image.