Как в html сделать кнопку с картинкой: Кнопка-изображение и кнопка С изображением в HTML

Leave a Comment / Html / By /

javascript — HTML ссылка-картинка, прямо на ней еще и кнопка. Как сделать чтобы при нажатии на кнопку не срабатывала ссылка?

Задать вопрос

Вопрос задан

Изменён 1 год 2 месяца назад

Просмотрен 696 раз

Есть такой код:

<a href="https://sample.photohost/398821.jpg">
  <img src="https://sample.photohost/398821.jpg">
  <button type="button"> Copy link </button>
</a>

CSS’ом кнопка поставлена поверх картинки.

При нажатии на кнопку срабатывает кнопка и еще и открывается картинка.

Как сделать чтобы картинка открывалась по картинке, а по кнопке не открывалась?

  • javascript
  • html
  • css

1 

. wrap {
 width: 200px;
  height: 200px;
  position: relative;
  z-index: 1;
}
a{
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}
a img{
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  
button {
  position: absolute;
  bottom: 50px;
  z-index: 1;
  left: 0;
  right: 0;
  margin: auto;
  width: 80px
}
<div>
  <a href="https://sample.photohost/398821.jpg">
      <img src="https://sample.photohost/398821.jpg">
  </a>
  <button type="button"> Copy link </button>
</div>

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Создание кнопки в HTML

После того как разобрались с еще одним элементом формы textarea мы переходим, наверное, к последнему часто используемому элементу формы – это к кнопкам. Существует пять видов кнопок для формы:

1. Кнопка для отправки формы. Это самый часто используемый вид кнопки, после нажатия, на которую происходит обращение к обработчику формы, который указан в атрибуте action=«formdata.php» и уже ему передаются данные из элементов формы.

2. Это кнопка для очистки после нажатия на которую происходит очистка всех полей (элементов) в форме. То есть все возвращается к первоначальному виду формы.

3. Третий вид кнопки это кнопка картинка. Часто бывает такое, что нужно применить кнопку необычного вида, например это кнопка типа img — изображение.

4. Четвертый вид кнопки это просто кнопка. Эта кнопка, в целом, и не относится к формам, так как она не отправляет данные и не очищает форму, это просто кнопка. Такая кнопка может использоваться в любом месте страницы и не обязательно в форме. Она используется при программировании на языке JavaScript. На такую кнопку можно повесить различные действия, которые будут происходить после нажатия на нее.

5. Пятый вид так же кнопка для отправки формы, после нажатия на которую так же происходит обращение к обработчику формы action=«formdata.php», и уже ему передаются данные из элементов формы. При условии, что такая кнопка находится внутри тегов <form> </form>

Итак, мы разберем все эти четыре вида кнопки и первое это разберем кнопку для отправки данных формы.

Создание кнопки «Отправить».

Такая кнопка создается с помощью тега <input> и обязательного атрибута type со значение

submit, который и указывает, что это кнопка для отправки submit, что в переводе означает подтвердить или отправить. Так же желательно задать имя для кнопки через уже известный атрибут name=«submit», ну и конечно же, чтобы появилась какая-то надпись на кнопке используем атрибут value=«Отправить». Если все это собрать в кучку у нас получится следующий вид:

HTML


После нажатия на такую кнопку, как выше уже было написано, будет происходить обращение к обработчику формы, который находится в атрибуте action=«formdata.php». А мы переходим к следующему виду кнопки.

Создание кнопки «Очистки формы».

Кнопка для очистки полей создается, так же как и для отправки, за исключением того что нужно изменить тип кнопки в атрибуте

type, указав значение reset. Остальное повторяем, задаем имя кнопки name=«reset» и чтобы появилась надпись на кнопке, используем атрибут value=«Очистить». В результате получаем:

HTML


Теперь, после нажатия на эту кнопку, все значения введенные в поля и выбранные в других элементах формы будут возвращается к исходному состоянию.

Создание кнопки «Отправить в виде картинки».

Для начала, изображение вашей кнопки, помещаем в уже ранее созданную папку images, которая находится на одном уровне с файлом index.html. Создается такая кнопка все также, за исключением все того же атрибута type, указав ему значение image, указывающее тип кнопки «картинка». Только, раз это картинка то нужно указать, где она лежит. Указывается путь к картинке через атрибут

src=«images/batton.png». Зададим еще имя кнопке name= «imageBatton» и вот и все. Текст для кнопки в атрибуте value не нужен, так как на кнопке уже все есть.

HTML


Нажимая на кнопку-картинку, будет также происходить обращение к обработчику action=«formdata.php» для отправки данных формы, то есть такая кнопка работает так же как и кнопка типа submit. И рассмотрим последний вид кнопки.

Создание обычной кнопки.

Такая кнопка создается также просто, как и все раннее рассмотренные, меняется только тип кнопки type=«button». Все остальное также: указываем имя для кнопки name=«button»; указываем, через атрибут

value=«Кнопка», надпись, которая будет отображается на кнопке. После нажатия на такую кнопку никаких действий не происходит. Такая кнопка может использоваться как в рамках формы, так и за ее пределами. Такая кнопка часто используется в сочетании с языками JavaScript и JQery.

HTML


Создание кнопки, используя тег button.

Такая кнопка создается с помощью тега <button> </button>. Ее так же можно создать, как на базе картинки, так и в стандартном виде, указав текст кнопки. На такой кнопке можно разместить различные элементы HTML, например картинку, так же к такой кнопке можно применять определенные стили: изменить размер, цвет фона, шрифт текста и др. Такая кнопка может, размещается как внутри <form> </form> так и за ее приделами. Однако если после нажатия на такую кнопку требуется отправить данные обработчику, то такая кнопка должна обязательно находится внутри тега

<form> </form>.

HTML

Вот в целом рассмотрели все виды кнопок и общая картина должны получится следующая.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Первая HTML страница</title>
</head>
<body>

</body>
</html>

Так создаются кнопки HTML. Смотрите результат в Демо. У Вас должна была получится такая же картина. А мы переходим к следующему уроку.

<<< Предыдущий материал

Следующий материал >>>


Просмотреть демо: Демо

Скачать исходник: Скачать

HTML-тег

Тег HTML с его содержимым между начальным и конечным тегами. Содержимое действует как метка кнопки (т. е. все, что написано между начальным и конечным тегами, отображается на кнопке). Элемент

Примеры

Использование базового тега

Здесь мы используем автономную кнопку (т.е. не прикрепленную к форме). Мы упрощаем задачу, используя JavaScript для отображения окна предупреждения, когда пользователь нажимает кнопку.

Кнопка, вложенная в форму

Здесь мы вкладываем кнопку в элемент, делающий кнопку частью формы.

Имя:
Фамилия:

Кнопка, связанная с формой

Здесь мы связываем кнопку с , используя атрибут формы (т.е. мы вставляем форму id в качестве значения). Делая это, нам не нужно вкладывать элемент

Об элементах, связанных с формой

Некоторые элементы HTML могут иметь «владельца формы». Это означает, что элемент связан с формой и может использоваться так, как если бы он был частью этой формы. Это может быть удобно, если у вас есть одна или несколько форм на странице, и элемент не вложен ни в одну из них.

Следующие элементы HTML являются «элементами, связанными с формой»:

  • кнопка
  • полевой набор
  • вход
  • кейген
  • этикетка
  • объект
  • выход
  • выбрать
  • текстовая область
  • изображение

Возможность связать элемент управления формы с формой может решить проблему отсутствия поддержки вложенных элементов . Хотя вложенные элементы не поддерживаются в спецификации HTML, вполне возможно, что скрипт может манипулировать DOM таким образом, что это приводит к вложенным 9 элементам.0003 <форма> элемента. Спецификация HTML5 признает эту ситуацию и, по-видимому, учитывает ее, предупреждая о несоответствии вложенных элементов .

Кнопка с изображением

Вы можете включить элемент внутрь элемента

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *