Html кнопка с картинкой: Кнопка-изображение и кнопка С изображением в HTML

Кнопка для загрузки картинки. Справка

sources

fileType

multipleSelect

Создание кнопок, оформление текста и картинок, а также добавление отзывчивых классов в Bootstrap 3

Обновлено 28 сентября 2021 Просмотров: 142761 Автор: Дмитрий Петров

1. Стилевое оформление текста
2. Отзывчивые классы в Бутстрап 3 (hidden и visible)
3. Создание и оформление кнопок
4. Как поменять цвет кнопок в файле собственных стилей
5. Добавляем картинкам отзывчивость и другие стили Bootstrap

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Это уже четвертая статья в данной рубрике:

1. В первой мы познакомились с основами отзывчивого дизайна и в подробностях изучили вопрос подключения фреймворка Бутстрам к Html страничкам (веб-документам).
2. Во второй статье мы в подробностях и на конкретных примерах рассмотрели устройство и работу сеточной системы в Bootstrap 3 (она существенно отличается от предыдущих версий этого фреймворка).
3. Ну, а в третьей статье мы узнали про ряд приемов верстки сайта на Бутстрап, которые могут пригодиться вам в дальнейшем.

Сегодня же мы поговорим про возможности стилевого оформления текста средствами Бутстрапа и про использование отзывчивых классов, позволяющих скрывать или показывать элементы веб-страницы при изменении ширины экрана. Также мы посмотрим, как средствами этого фреймворка можно создавать кнопки и как их можно настраивать. Ну и в самом конце мы посмотрим, как в Bootstrap 3 сделать картинки отзывчивыми (меняющими размер при изменении ширины экрана) и какие классы к ним можно добавить для дополнительной стилизации.

Стилевое оформление текста и отзывчивые классы в Bootstrap

С фреймворком Бутстрап 3 в комплекте идет множество встроенных стилей, некоторые из которых вы наверняка сочтете полезными. Все многообразие встроенных стилей вы можете обозреть на вкладке CSS. На открывшейся странице в правой колонке вы найдете множество вкладок, которые вам позволят посмотреть на стили, используемые при оформлении текста, кода, создания таблиц, кнопок, форматирования изображений и встраивании глиф-иконок. Давайте поговорим обо всем этом по порядку.

Начнем с типографики, или же другими словами — оформления текста. Из приведенных на официальной странице фреймворка данных вы поймете, как будут оформлены теги заголовков от h2 до H6, еще узнаете, что размер шрифта по умолчанию на сайте будет равен 14 пикселям, а высота строк будет браться равной 20 пикселям. Ну, а при использовании тега абзаца «P» будет задаваться внизу отступ высотой в полстроки.

Чтобы чего-то поменять используются классы. Например, довольно часто первый абзац в тексте статьи набирают более крупным шрифтом, чтобы повысить вероятность прочтения его посетителями и вовлечения их в дальнейшее знакомство с материалами. В Бутстрапе для реализации этого будет достаточно в тег «P» добавить класс со значением LEAD — class="lead".

В приведенном примере я просто добавил в тег выделенного абзаца данный класс:

<p>

Этот скриншот и все последующие я буду снимать с уже созданного нами в предыдущих статьях макета некой вебстраницы. Вам нужно будет лишь скопировать файлик sait-4.html (для этого кликните по ссылке правой кнопкой мыши и выберите из контекстного меню пункт «Сохранить по ссылке как…»). Если этот файлик вы напрямую откроете в браузере (кликнув по приведенной ссылке левой кнопкой мыши), то ничего не получится, ибо не подключится фреймворк Бутстрап.

В плане форматирования текста Бутстрап очень похож на классический язык Html, он позволяет, например, делать следующие вещи:

Код этого фрагмента в Html файлике подключенном к Bootstrap 3 при этом выглядит так:

<ol>
	<li><code>Выделение кода в тексте с помощью тегов <code>&lt;code&gt;</code></code></li>

	<li><mark>Подсветка фрагмента текста с помощью окружения его открывающим и закрывающим тегами <code>&lt;mark&gt;</code></mark></li>
<li>	<s>Перечеркнутый текст с помощью окружения его тегами <code>&lt;del&gt;</code> либо <code>&lt;s&gt;</code> </s></li>
<li>	<u>Подчеркнутый текст с помощью окружения его тегами <code>&lt;ins&gt;</code> либо <code>&lt;u&gt;</code> </u></li>
<li><small>Уменьшение шрифта выделенного фрагмента текста с помощью его окружения тегами <code>&lt;small&gt;</code></small>	</li>
<li>Выделение <strong>жирным</strong> и <em>курсивом</em> с помощью <code>&lt;strong&gt;</code> и <code>&lt;em&gt;</code></li>
<li>Выравнивание текста в контейнере, например, по правому краю - с помощью добавления класса <code>text-right</code></li>
<li>Или по центру - с помощью добавления класса <code>text-center</code></li>
<li><blockquote>Оформление цитат с помощью тегов <code>&lt;blockquote&gt;</code></blockquote></li>
<li><blockquote>Реверсирование выравнивания текста в цитатах - с помощью добавление в тег <code>&lt;blockquote&gt;</code> класса <code><code>blockquote-reverse</code></code></blockquote></li>
	</ol>

Все остальное вы можете изучить самостоятельно на вкладке «Typography»

Отзывчивые классы в Бутстрап 3 (hidden и visible) — для чего их можно использовать?

В приведенном выше файле sait-4.html уже настроены сеточные системы, которые изменяют положение блоков с контентом нужным образом при изменении ширины экрана или окна браузера. Однако, может возникнуть ситуация, когда при просмотре страницы на малых экранах некоторые элементы дизайна окажутся лишними (совсем не актуальными, например, на смартфоне). Что я имею в виду?

В приведенном файле sait-4.html в верхней строке (напомню, что строки в Bootstrap образуются с помощью контейнеров с прописанных в них классами class="row") у нас отображается заголовок и описание сайта, а также его логотип. Так вот, при уменьшении ширины экрана мы в конце концов получаем ситуацию, когда этот самый логотип размещается под заголовком, а уже потом следует содержательная часть страницы.

В принципе, было бы уместным логотип на малых устройствах убрать (особенно, если бы он был еще большего размера), ибо никакой смысловой нагрузки он не несет и несколько дезориентирует посетителя сайта, зашедшего на него с гаджета, размер экрана которого меньше 768 пикселей по ширине. Что можно сделать? Использовать обозначенные в заголовке отзывчивые классы hidden и visible.

Однако, сразу оговорюсь, таким образом мы только скроем данный логотип, но в браузер пользователя он подгружаться все равно будет (просто будет скрыт), и общий размер страницы будет выше. Для радикального решения этой проблемы лучше подойдут методы Джава-скрипта, но мы в данной статье изучаем именно возможности Бутстрапа, поэтому их и используем.

Итак, для наглядности производимых действий перейдите на официальном сайте Bootstrap на вкладку «Responsive utilities» из левого меню, которое в свою очередь появляется при переходе по вкладке «CSS» из меню верхнего. Там вы увидите таблицу срабатывания указанных классов при различных размерах экранов, на которых будет просматриваться страница сайта:

Приведенная серия классов отвечает за отображение отдельных элементов веб-страницы при определенных размерах экрана. В них также указывается через тире размер сетки, для которой они предназначены (напомню, что размеров всего четыре — очень маленькая xs, малая sm, средняя md и большая lg).

Класс hidden как раз и позволит нам реализовать нашу задачу — спрятать элемент (логотип) при уменьшении разрешения экрана (окна браузера) ниже 768 пикселей по ширине. Т.е. нам нужно будет использовать класс hidden-xs исходя из приведенной таблицы. Как это сделать? Довольно просто. Найти в коде файла sait-4.html строку, где задается отображение картинки данного логотипа, и просто добавить в тег IMG класс class="hidden-xs":

В результате на низких разрешениях логотип будет просто пропадать, а не опускаться под заголовок сайта.

Что и требовалось реализовать. Про другие возможности использования отзывчивых классов я предлагаю вам подумать самим.

Создание кнопок с помощью классов btn в Бутстрап 3

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

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

В нашем многострадальном примере (файлик sait-4.html, который можно скачать чуть выше) есть элементы, которые так и напрашиваются, чтобы сделать их кнопками. Я говорю про ссылки «Читать далее», расположенные внизу каждого анонса.

Вообще, можно создать кнопку на основе двух элементов Html кода: button и обычной гиперссылки с тегом A. Мы будет использовать второй вариант.

Для создания кнопки нам лишь нужно будет добавить в тег A соответствующий класс. Сначала в этом классе прописывается класс btn (что само по себе никаких дополнительных свойств не придает ссылке), а уже потом дописывается один или несколько классов, задающих, например, цвет и размер кнопки (или их активность). Давайте посмотрим на примере.

Добавим к первой ссылке «Читать далее» класс дефолтной кнопки (умолчательной — class="btn btn-default"):

<a target="_blank" href="Урл">Читать далее</a>

В результате наша ссылка с успехом превратится в кнопку благодаря встроенным в Бутстрап стилям:

Классы для разных типов кнопок в Bootstrap вы можете взять из приведенных на официальном сайте примеров:

Создаваемые кнопочки реагируют на подведение к ним курсора изменением своего тона, что опять же делает работу с сайтом более понятной для посетителя (статичные кнопки могут немного озадачивать пользователя). Кнопка с дефолтным дизайном не слишком бросается в глаза, поэтому если требуется акцентирование внимания, то лучше использовать альтернативные стили (например, danger или warning). Ну и размер кнопочки можно под это дело увеличить простым добавлением класса btn-lg:

<a target="_blank" href="Урл">Читать далее</a>

Все очень просто и интуитивно понятно. По аналогии с сеточной системой, в Bootstrap имеется четыре основных размера для кнопок. Без прописывания дополнительных классов вы получите средний размер кнопочки, а при добавлении btn-lg, btn-sm и btn-xs получите большую, малую и сверхмалую кнопки, соответственно. Собственно, все довольно понятно из данного скриншота:

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

<a target="_blank" href="Урл">Читать далее</a>

Как поменять цвет кнопок с помощью файла с собственными стилями?

Другой вопрос — а что, если из представленных цветов кнопок ничего не подходит под выбранное вами стилевое оформление сайта? Выход есть, и заключается он в самостоятельном добавлении недостающих вам CSS правил, но не в файл стилей Bootstrap 3 (чтобы не потерять внесенные изменения, например, при обновлении фреймворка), а в специально созданный и подключенный к вебстранице файлик manual.css с нашими собственными стилями (читайте об этом в первой статье, ссылку на которую вы найдете в самом верху этой публикации).

До сих пор файл manual.css оставался у нас пустым, вот и пришло время его задействовать на благо сайтостроения. Итак, что такое CSS селекторы помните? А про различные CSS свойства читали? Как и что задается, в какой последовательности и как браузер расставляет приоритеты? Если нет, то можете использовать десяток моих уроков (надеюсь максимально подробных и доступных) по нелегкому делу погружения в пучины стилевой разметки веб-страниц — Справочник по использованию CSS. Мы же продолжим, не сильно останавливаясь на подробностях использования стилей.

Итак, нам нужно перекрасить кнопку, созданную с помощью классов Бутстрапа, в другой цвет. Причем, нужно будет поменять еще и цвет, который кнопка приобретает при подведении к ней курсора, но это уже вторая задача. Для примера попробуем поглумиться над кнопочками, которые показаны на предыдующем скриншоте. Вполне логично будет выполнить их все в цветовой схеме, созвучной сайту (не важно какой).

Как сейчас данные кнопки получают цвет? С помощью прописанных в тегах ссылок A классов Bootstrap 3. Например, в записи «btn btn-primary btn-block» за цвет отвечает btn-primary. Как мы уже обговорили ранее, в основном файле стилей мы менять ничего не будем, поэтому нам нужно будет дописать правило в наш файлик manual.css. Если мы хотим поменять цвет только этой кнопки, то CSS правило будет выглядеть так:

.btn-primary {
background-color: #cdae51;
border-color: #3F2B22;
color: #000000;
}

Таким образом мы задали цвет фона кнопки (background-color), цвет рамки вокруг нее (border-color) и цвет текста (color). В результате чего она действительно поменяет свой вид:

Если у вас изменений не видно, то проверьте подключение manual.css в вашем файлике sait-4.html — оно должно осуществляться после подключения основного файла Бутстрапа. Т.е. стоять ниже в коде:

Понимаете почему? Дело в том, что мы прописали сейчас CSS правило, которое дублирует такое же правило в основном файле стилей. Как же должен поступить браузер при возникновении подобного конфликта? Правильно, руководствоваться рейтингом приоритетов. Читайте об этом в статье «Приоритеты Css свойств (с important и без него)». Ну вот, а при равенстве приоритетов будет выполняться CSS правило, стоящее ниже в коде (то бишь в том файле стилей, который подключен последним). Хотя вы можете повысить приоритет свойств в файле manual.css с помощью добавления к ним !important:

.btn-primary {
 background-color: #cdae51 !important;
 border-color: #3F2B22 !important;
 color: #000000 !important;
}

Но это так, на всякий случай я рассказал — вдруг пригодится. Будем считать, что у вас без проблем получилось поменять цвет кнопки.

Да, кстати, еще один нюанс. Если вы хотите все кнопки на сайте унифицировать (маловероятно, но все же), то для этого просто замените в приведенном CSS правиле селектор .btn-primary на просто .btn. Вы уже наверное заметили, что везде к кнопкам добавляется отдельный класс btn, который как бы сам по себе ничего не меняет. Вот именно для применения каких-то стилевых свойств для всех кнопок на сайте этот самый класс и нужен. То же самое будет и при задании ряда других элементов веб-страницы с помощью Бутстрапа. Все продумано.

Ладно, нам еще одну проблемку порешать надо. Как изменить цвет кнопки, в который она окрашивается при подведении к ней курсора мыши? Очевидно, что там должны использоваться селекторы псевдоклассов или псевдоэлементов. Однако, проще всего об этом будет спросить у браузера, ибо он то уж лучше всех знает, что именно и как отображать, а также какие CSS свойства применять.

Правда, вот так за здорово живешь браузер вам ничего не скажет, но если его попытать с помощью Файербага (или встроенных в любой браузер инструментов для разработчиков, которые вызываются из меню правой кнопки мыши выбором пункта «Просмотр кода элемента» или ему подобного), то он выложит все как миленький. Ознакомиться с методами пытки браузера можно из приведенной статьи, а мы констатируем, что цвет кнопки при наведении задается в основном файле Bootstrap с помощью такого вот сборного селектора:

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary

Собственно, мы тоже не будь дураками его и пропишем себе в файлик manual.css, а к нему и нужные CSS свойства добавим, задающие цвет текста, фона и рамки:

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
 color: #ffffff;
 background-color: #3F2B22;
 border-color: #333;
}

В результате кнопка при наведении кардинально поменяет свой вид:

Дизайнер из меня, конечно же, никудышный, но вы цветовую схему сможете куда лучше подобрать. Таким образом, с помощью добавления CSS правил в manual.css, можно будет менять не только цвет кнопок, но и отступы от картинок, и цвета глиф-иконок (о них в следующей статье поговорим), а также и все остальное. Нужно только чутка подумать. Как говорится, флаг вам в руки, а барабан на шею.

Добавляем картинкам отзывчивость и другие стили Bootstrap

Несмотря на то, что сам Бутстрап является отзывчивым фреймворком (в смысле, отзывчивым на изменение ширины экрана, с которого просматривается веб-страница), картинки, которые имеют место быть на странице, отзывчивыми не являются. Т.е. они не подстраиваются под изменения ширины экрана. Собственно, это дело поправимое.

Например, в одном из наших ранее разобранных примеров (файл sait5.html — кликните по ссылке правой кнопкой мыши и выберите из контекстного меню пункт «Сохранить по ссылке как…», после чего поместите его в вашу папку с Бутстрапом) как раз наблюдался наезд картинок из соседних колонок друг на друга, в результате чего часть изображений обрезалась:

В Bootstrap 3, для придания отзывчивости картинкам на странице, нужно это дело отдельно обозначать, прописывая в теги IMG соответствующий класс — img-responsive. В нашем случае его нужно будет добавить для всех четырех изображений в каждой из колонок. Выглядеть это будет примерно так:

<img src="img/virtuemart-2-300x180.jpg" alt="">

Ну и наш макет страницы будет вести себя уже гораздо более адекватно, ибо при уменьшении ширины экрана, картинки будут уменьшаться для соответствия ширине колонок, в которых они расположены (не наезжая друг на друга):

В принципе, довольно странно, что эта возможность не встроена по умолчанию, а для ее отмены можно было дописывать специальный класс. Но разработчикам виднее. Для изображений в CSS закромах Бутстрапа имеется еще несколько вариантов их оформления с помощью специальных классов:

1. Можно картинки из прямоугольных делать круглыми. Не скруглять углы (об этом чуть ниже), а именно округлять (из квадрата получится в результате круг, а из прямоугольника — овал). Например, таким образом было бы довольно эффектно отображать портрет автора статьи. Для этого используется класс img-circle. Можно этот класс дописать прямо в уже существующий с img-responsive (если он используется для данного изображения). Выглядеть подобное безобразие может примерно так:

   <img src="img/google-analytics-300x180.jpg" alt="">

2. Описанный выше класс можно применять далеко не к каждой картинке. Зато вот обычное скругление углов может оказаться неплохим дополнением для многих изображений. Делается это с помощью добавления класса из арсенала Bootstrap 3 под названием img-rounded. Скругление получается не сильно-таки и заметным, но радующим глаз:

3. Ну и, наконец, для некоторых картинок, используемых на странице, может оказаться уместным добавить рамку. Особенно эффектно это будет смотреться на изображениях, фон которых совпадает с фоном страницы. Для этой цели используется класс img-thumbnail.

   <img src="img/virtuemart-2-300x180.jpg" alt="">

Использовать или не использовать последние три класса решать вам самим, а вот делать картинки отзывчивыми (с помощью добавления img-responsive) я бы рекомендовал в обязательном порядке, если у вас нет каких-либо веских причин этого не делать.

На сегодня все. В следующей статье мы поговорим за глиф-иконки, оформление картинок или текстовых блоков в виде галерей (превьюшек), про работу с таблицами, про создание панелей, ну и еще про многое другое, насколько хватит времени и сил.

Продолжение следует >>> (Тут можно подписаться на почтовую рассылку с анонсами новых статей)

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

HTML формы

Элементы формы такие как: текстовые поля, флажки, переключатели, кнопки и т.д., прописываются в контейнере <form>...</form>. Чаще всего элементы формы создаются при помощи тега <input>. При помощи атрибута type указывается тип элемента.

Рассмотрим следующий код:

<form>
    <p><label>Введите логин:</label> <input type="text"></p>
    <p><label>Введите пароль:</label> <input type="password"></p>
    <p><button>Войти</button></p>
</form>

В браузере получим примерно такую форму:

Здесь:

• тег <form> – является контейнером для элементов формы, в нем также можно использовать теги для разметки страницы;
• тег <label>– создает метку для элемента формы;
• тег <input> – создает элемент формы, при помощи атрибута type указывается какой именно элемент нужно отобразить:
  • <input type="text"> – создает текстовое поле;
  • <input type="password"> – создает поле для ввода пароля. Данный тег не требует закрывающего тега;
• тег <button> – создает кнопку.

Текстовая область

При помощи тега <textarea> мы можем создать текстовую область, в которой пользователь сможет вводить длинные сообщения:

<form>
    <p><label>Введите ваше сообщение:</label></p>
    <p><textarea></textarea></p>
    <p><button>Отправить</button></p>
</form>

В браузере получим:

Выпадающий список

Тег <select> создает на странице список, каждое значение из списка прописывается между тегами <option>...<option>:

<select>
    <option>Значение 1</option>
    <option>Значение 2</option>
    <option>Значение 3</option>
</select>

В данном примере вы можете выбрать только одно значение из списка:

Чтобы была возможность выбрать несколько значений из списка, то используйте атрибут multiple с таким же значением: <select multiple="multiple">:

Флажки и переключатели

Чтобы создать на странице флажки, необходимо создать поле с типом checkbox: <input type="checkbox">:

<form>
    <p><label><input type="checkbox">Значение один</label></p>
    <p><label><input type="checkbox">Значение два</label></p>
    <p><label><input type="checkbox">Значение три</label></p>
</form>

Необязательно эти поля прописывать между тегами <label>...</label>.

Чтобы создать на странице переключатели, необходимо создать поле с типом radio, и указать атрибут name с каким-нибудь значением: <input type="radio" name="rad">.

<form>
    <p><label><input type="radio" name="rad">Значение один</label></p>
    <p><label><input type="radio" name="rad">Значение два</label></p>
    <p><label><input type="radio" name="rad">Значение три</label></p>
</form>

Обратите внимание, что значение атрибута nameв группе переключателей должно быть одинаковым, иначе переключатели будут работать как флажки, т.е. можно будет выбрать сразу все.

Если вы хотите по умолчанию сделать выбранным один из пунктов, то используйте атрибут checked с таким же значением: <input type="radio" name="rad" checked="checked">. Для флажков соответственно можно указать этот атрибут у нескольких пунктов сразу.

Поле для выбора файла

Используйте тип поля file, для возможности выбора файла с компьютера: <input type="file">:

<form>
    <p><input type="file"></p>
    <p><button>Отправить</button></p>
</form>

Вид в окне браузера:

Другие варианты кнопок

• <input type="button" value="Название для кнопки"> – обычная кнопка.
• <input type="image" src="Путь к картинке"> – кнопка в виде картинки. Через атрибут src указываем путь к картинке.
• <input type="submit" value="Название для кнопки"> – кнопка для отправки данных формы.
• <input type="reset" value="Название для кнопки"> – кнопка для очистки формы от введенный в нее данных.

Эти же значения атрибута type, кроме значения image, можно применить к кнопке, созданной при помощи тега <button></button>. В отличие от кнопок, созданных через тег <input>, эту кнопку можно размещать вне контейнера <form>...</form>, это не будет считаться ошибкой. Также внутри этой кнопки можно размещать другие строчные теги.

Видео к уроку

Добавление всплывающих кнопок на изображение товара на странице категорий в virtuemart 2

Сегодня будет не совсем обычный пост про virtuemart. Данное решение применимо на любом сайте, где нужно добавить всплывающие элементы при наведении на какой-либо блок.

Уже несколько раз поступали вопросы как на странице категорий при наведении мыши на изображение товара добавить какую-то кнопку или картинку. Это может быть кнопка Купить или Подробнее, или кнопка увеличения изображения.

Чтобы сразу было понятно о чем идет речь можно посмотреть ДЕМО.

В данном примере при наведении на картинку плавно появляются 2 кнопки и слегка затемняется основное изображение.

Все реализовано без применения скриптов. Посмотреть исходный код html и css.

Единственное, чтобы убрать css трансформации до завершения загрузки страницы для тега body был добавлен дополнительный класс .preload и в код страницы вставлен скрипт

Источник решения — http://ruseller.com/lessons.php?id=1436

Не факт что эта проблема с трансформациями объектов до загрузки страницы себя проявит на вашем шаблоне.

Чтобы реализовать то же самое на странице категорий virtuemart в файле /components/com_virtuemart/views/category/tmpl/default.php перед кодом выводящим изображение

вставляем

Чтобы правильно отцентрировать положение кнопки необходимо заранее знать размеры блока с изображением и он должен быть одинаков для всех товаров.

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

в моем примере размеры блока с изображением составили 150*200px и я добавил такие стили в файл /components/com_virtuemart/assets/css/vmsite-ltr.css

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

В итоге при наведении на картинку получилось следующее

Надеюсь, что эта небольшая статья будет вам полезна 🙂

Похожие статьи :

объединение текста и изображения на Button или ImageButton Oh! Android

Я пытаюсь создать изображение (в качестве фона) на кнопке и динамически добавлять, в зависимости от того, что происходит во время выполнения, некоторый текст над / над изображением.

Если я использую ImageButton у меня даже нет возможности добавить текст. Если я использую Button я могу добавить текст, но только определить изображение с помощью android:drawableBottom и аналогичных атрибутов XML, как определено здесь .

Однако эти атрибуты объединяют только текст и изображение в x- и y-измерениях, то есть я могу нарисовать изображение вокруг моего текста, но не ниже / под моим текстом (с осью z, определяемой как выход из дисплея).

Любые предложения о том, как это сделать? Одна из идей заключалась бы в том, чтобы либо расширить Button либо ImageButton и переопределить метод draw() . Но с моим текущим уровнем знаний я действительно не знаю, как это сделать (2D-рендеринг). Может быть, кто-то с большим опытом знает решение или, по крайней мере, некоторые указатели, чтобы начать?

Вы можете вызвать setBackgroundDrawable() на Button чтобы установить фон кнопки.

Над фоном появится текст.

Если вы ищете что-то подобное в xml, есть: android:background который работает одинаково.

Для пользователей, которые просто хотят помещать Background, Icon-Image и Text в одну Button из разных файлов: Установите на фоне Button , drawableTop / Bottom / Rigth / Left и атрибуты дополнения .

 <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/home_btn_test" android:drawableTop="@drawable/home_icon_test" android:textColor="#FFFFFF" android:id="@+id/ButtonTest" android:paddingTop="32sp" android:drawablePadding="-15sp" android:text="this is text"></Button> 

Для более сложной компоновки вы также можете использовать RelativeLayout и сделать ее интерактивной.

Учебник: отличный учебник, который охватывает оба случая: http://izvornikod.com/Blog/tabid/82/EntryId/8/Creating-Android-button-with-image-and-text-using-relative-layout.aspx

Для решения этой проблемы есть намного лучшее решение.

Просто возьмите обычную Button и используйте атрибуты drawableLeft и gravity .

 <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:drawableLeft="@drawable/my_btn_icon" android:gravity="left|center_vertical" /> 

Таким образом, вы получаете кнопку, которая отображает значок в левой части кнопки и текст в правом месте значка с вертикальной ориентацией .

  <Button android:layout_width="0dp" android:layout_weight="1" android:background="@drawable/home_button" android:drawableLeft="@android:drawable/ic_menu_edit" android:drawablePadding="6dp" android:gravity="left|center" android:height="60dp" android:padding="6dp" android:text="AndroidDhina" android:textColor="#000" android:textStyle="bold" /> 

Просто используйте LinearLayout и притворитесь, что это background настройками Button и ключом:

 <LinearLayout android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@android:drawable/btn_default" android:clickable="true" android:orientation="horizontal" > <ImageView android:id="@+id/img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginLeft="5dp" android:src="@drawable/image" /> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_margin="5dp" android:text="Do stuff" /> </LinearLayout> 

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

 android:background="@drawable/icon" 

с

 android:background="@android:color/transparent" android:drawableTop="@drawable/[your background image here]" 

Izz довольно хороший трюк ..;)

Я придерживался другого подхода от заявленных здесь, и он работает очень хорошо, поэтому я хотел поделиться им.

Я использую стиль для создания пользовательской кнопки с изображением слева и текста в центре справа. Просто выполните 4 «простых шага» ниже:

I. Создайте свои 9 патчей, используя по крайней мере 3 разных файла PNG и инструмент, который у вас есть: /YOUR_OWN_PATH/android-sdk-mac_x86/tools/./draw9patch. После этого вы должны иметь:

Button_normal.9.png, button_focused.9.png и button_pressed.9.png

Затем загрузите или создайте значок 24×24 PNG.

ic_your_icon.png

Сохраните все в папке drawable / на вашем Android-проекте.

II. Создайте XML-файл с именем button_selector.xml в своем проекте в папке drawable /. Государства должны быть такими:

 <item android:state_pressed="true" android:drawable="@drawable/button_pressed" /> <item android:state_focused="true" android:drawable="@drawable/button_focused" /> <item android:drawable="@drawable/button_normal" /> 

III. Перейдите в папку values ​​/ open и создайте файл styles.xml и создайте следующий код XML:

 <style name="ButtonNormalText" parent="@android:style/Widget.Button"> <item name="android:textColor" >@color/black</item> <item name="android:textSize" >12dip</item> <item name="android:textStyle" >bold</item> <item name="android:height" >44dip</item> <item name="android:background" >@drawable/button_selector</item> <item name="android:focusable" >true</item> <item name="android:clickable" >true</item> </style> <style name="ButtonNormalTextWithIcon" parent="ButtonNormalText"> <item name="android:drawableLeft" >@drawable/ic_your_icon</item> </style> 

ButtonNormalTextWithIcon – это «дочерний стиль», потому что он расширяет ButtonNormalText («родительский стиль»).

Обратите внимание, что изменение drawableLeft в стиле ButtonNormalTextWithIcon, на drawableRight, drawableTop или drawableBottom, вы можете поместить значок в другое положение относительно текста.

Внутривенно Перейдите в макет / папку, где у вас есть XML для пользовательского интерфейса, и перейдите к кнопке, где вы хотите применить стиль, и сделайте так:

 <Button android:id="@+id/buttonSubmit" android:text="@string/button_submit" android:layout_width="fill_parent" android:layout_height="wrap_content" ></Button> 

И … вуаля! У вас есть кнопка с изображением слева.

Для меня это лучший способ сделать это! Потому что для этого вы можете управлять размером текста кнопки отдельно от значка, который вы хотите отобразить, и использовать тот же фон, который можно использовать для нескольких кнопок с разными значками, относящимися к Руководствам Android UI, используя стили.

Вы также можете создать тему для своего приложения и добавить к ней «родительский стиль», чтобы все кнопки выглядели одинаково и применяли «детский стиль» с помощью значка только там, где он вам нужен.

  <Button android:id="@+id/imeageTextBtn" android:layout_width="240dip" android:layout_height="wrap_content" android:text="Side Icon With Text Button" android:textSize="20sp" android:drawableLeft="@drawable/left_side_icon" /> 

Вы можете использовать drawableTop (также drawableLeft и т. Д.) Для изображения и задать текст под изображением, добавив gravity left|center_vertical

 <Button android:id="@+id/btn_video" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:background="@null" android:drawableTop="@drawable/videos" android:gravity="left|center_vertical" android:onClick="onClickFragment" android:text="Videos" android:textColor="@color/white" /> 

Этот код отлично работает для меня

 <LinearLayout android:id="@+id/choosePhotosView" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:gravity="center" android:clickable="true" android:background="@drawable/transparent_button_bg_rev_selector"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/choose_photo"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="@android:color/white" android:text="@string/choose_photos_tv"/> </LinearLayout> 

Наверное, мое решение подойдет многим пользователям, я надеюсь.

Я предлагаю сделать TextView с вашим стилем. Он отлично работает для меня и имеет все функции, как кнопку.

Прежде всего, давайте создадим стиль кнопки, который вы можете использовать везде … Я создаю button_with_hover.xml

  <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" > <shape android:shape="rectangle" > <corners android:radius="3dip" /> <stroke android:width="1dip" android:color="#8dbab3" /> <gradient android:angle="-90" android:startColor="#48608F" android:endColor="#48608F" /> </shape> <!--#284682;--> <!--border-color: #223b6f;--> </item> <item android:state_focused="true"> <shape android:shape="rectangle" > <corners android:radius="3dip" /> <stroke android:width="1dip" android:color="#284682" /> <solid android:color="#284682"/> </shape> </item> <item > <shape android:shape="rectangle" > <corners android:radius="3dip" /> <stroke android:width="1dip" android:color="@color/ControlColors" /> <gradient android:angle="-90" android:startColor="@color/ControlColors" android:endColor="@color/ControlColors" /> </shape> </item> </selector> 

Во-вторых, Давайте создадим кнопку текстового просмотра.

  <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="20dip" android:layout_gravity="right|bottom" android:gravity="center" android:padding="12dip" android:background="@drawable/button_with_hover" android:clickable="true" android:drawableLeft="@android:drawable/btn_star_big_off" android:textColor="#ffffffff" android:text="Golden Gate" /> 

И это результат. Затем создайте свою пользовательскую кнопку с любыми цветами или любыми другими свойствами и полями. Удачи

Вы можете использовать это:

  <Button android:id="@+id/reset_all" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="5dp" android:layout_weight="1" android:background="@drawable/btn_med" android:text="Reset all" android:textColor="#ffffff" /> <Button android:id="@+id/undo" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:layout_weight="1" android:background="@drawable/btn_med" android:text="Undo" android:textColor="#ffffff" /> 

В том, что я поставил изображение в качестве background а также добавил текст ..!

Вставить изображение в кнопку в HTML

1. Используйте тег внутри тега , чтобы встроить изображение в кнопку HTML
2. Используйте тег , чтобы Встраивание изображения в кнопку HTML

В этой статье обсуждаются несколько методов встраивания изображения в элемент в HTML. Это означает исправить или установить изображение внутри кнопки HTML.

Используйте тег

внутри тега

для встраивания изображения в кнопку HTML.

Этот тег используется для встраивания изображения на страницу HTML.Изображения буквально не помещаются на веб-страницу; изображения связаны с веб-страницами заданными путями. Этот тег создает пространство для конкретного изображения. Тег имеет два обязательных атрибута, а именно src и alt . Мы можем создать интерактивную кнопку HTML, используя тег

в HTML. Размещение тега внутри тега создает интерактивную кнопку HTML со встроенным в нее изображением.

Например, внутри тела HTML откройте тег

.Укажите тип как button . Затем откройте тег и укажите URL-адрес изображения в атрибуте src . Затем установите height и width на 80 и 100 соответственно. Наконец, закройте все ранее открытые теги в следующих строках.

В приведенном ниже примере мы создали элемент

и вставили внутри него изображение, которое будет встроено в кнопку. Мы использовали сокращатель URL-адресов, чтобы поместить короткий URL-адрес изображения в тег src .Таким образом, в HTML можно создать кнопку с изображением.

Пример кода:

Используйте тег

для встраивания изображения в кнопку HTML.

Тег определяет поле ввода, в которое мы можем вводить наши данные. В HTML разрешено множество типов ввода и виджетов управления.Некоторые из них: , , , . Мы можем установить для атрибута type значение image и установить src для вставки изображения в тип ввода. Он будет работать как кнопка.

Например, внутри тела HTML откройте тег и укажите type до image . Затем введите URL-адрес изображения в атрибуте src .Затем напишите атрибут стиля и установите границу на double . Также добавьте высоты и ширины как 80 и 170 . Затем закройте тег ввода и все ранее открытые теги.

Пример ниже иллюстрирует метод встраивания изображения на страницу HTML. Тег указывает, что мы вставляем или используем изображение в нашей работе. Мы использовали встроенный CSS для установки границы изображения , высоты и ширины .Мы сделали это, чтобы изображение больше походило на кнопку. Значение double указывает, что двойная рамка используется за пределами кнопки изображения. Высота и ширина помогают изображению получить определенный размер. Если мы не укажем высоту и ширину изображения, страница может мерцать при загрузке изображения. Таким образом, мы можем встроить изображение в кнопку HTML.

Пример кода:

Внесите свой вклад

DelftStack - это коллективная работа таких компьютерных фанатов, как вы.Если вам понравилась статья и вы хотите внести свой вклад в DelftStack, написав платные статьи, вы можете проверить страницу напишите для нас.

Как добавить кнопку к изображению с помощью CSS?

CSS предоставляет различные способы настройки веб-страницы. Как добавление кнопки к изображению. В этом руководстве мы узнаем о свойстве CSS для этого.

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

Чтобы добавить кнопку к изображению, сначала возьмите элемент