Как в css сделать картинку ссылкой: Как сделать картинку ссылкой? | WebReference — Независимое театральное объединение "Зрительские симпатии"

Содержание

Как сделать ссылку на картинку в css? | PHPClub

golos81

Новичок

10 Июн 2006

<!—
location.href = ‘http://www.google.com’;
//—>
</script>
Или
<td><a href=»http://www.google.com/»><div></div></a></td>
или ещё куча вариантов.
Вот только зачем?!

SelenIT
IT-лунатик 🙂

11 Июн 2006

В веб можно условно разделить ссылки на два типа, это текстовые и графические. В этой статье мы разберем как сделать картинку ссылкой в html с помощью обычного изображения, а так же в том случае если картинка в элементе будет в качестве фона.
Есть ситуации когда картинка вставляется на страницу не с помощью html тега img , а с помощью css свойства background или background-image . Пользователь визуально может и не отличить как именно была добавлена картинка, но браузер увидит разницу. В таком случае мы тоже можем сделать изображение ссылкой. Давайте рассмотрим пример как это сделать.
Добрый день. Примерно год назад, я написал статью: — «Как сделать флешь баннер?». В данной статье я решил продолжить эту тему, но в более простом виде. Поговорим мы не про создание баннера, а просто о том, как сделать картинку ссылкой. Например, картинка вверху является ссылкой, ведущей на мой партнерский курс «Как снять фильм». Можете кликнуть, и убедиться, как это работает!
а) К примеру, у вас имеется красивая картиночка замечательного товара. Вы создаете из нее ссылку, вставляете её на определенный ресурс. Человек заходит на данный сайт, видит картинку, кликает по ней, и попадает в интернет-магазин, где находится этот товар!
Достаточно скопировать изображения его товара, поместить скриншот на сайт, а картинку сделать ссылкой. Это будет чем-то вроде баннера, но с меньшей нагрузкой на сайт. На мой взгляд, очень удобно и красиво. Тем более, если вы красиво рисуете (или знаете того, кто может вам красиво нарисовать определенный баннер). Делаете из этой картинки баннера ссылку и опять-таки кликабельность по данной картинке баннеру повышается.
Это изображение, находящееся на постороннем ресурсе, которое ваш сайт запрашивает вовремя загрузки одной из своих страниц. Суть тут в том, что время этого запроса может значительно различаться, от долей секунды, до нескольких секунд.
Например, у меня раньше на сайте стоял статический баннер от одной известной компании. Баннер был красивым, с постоянно меняющимися картинками. Но суть в том, что он очень сильно тормозил время загрузки сайта. Время загрузки доходило до 50 секунд. Это очень много!
Как только я удалил данный баннер, мой блог стал загружаться в разы быстрее (сайт начал загружаться за 1.5 секунды, а не за 50!)! То есть, можно создать скриншот данного баннера, в скриншот вставить ссылочку и время его загрузки будет не несколько секунд, а доли секунды! Хотя, конечно, не так красиво. Он не будет меняться, но время загрузки сайта дороже!
г) Я думаю, что не удивлю веб. мастеров, если скажу, что часть ваших баннеров пользователи элементарно не видят. В браузерах таких людей стоит расширение «Анти-блок» или «Adguard». Данные расширения элементарно блокируют рекламу. В том числе и часть баннеров.
Если же у вас будет стоять картинка ссылка, анти блок подобный баннер воспримет воспринимать как обычное изображение, и ни какой блокировки. Например, у меня стоял определенное время баннер «живые картинки», но по нему было мало кликов. Я в начале не понимал в чем дело, потом увидел, что «Adguard» его просто блокирует.
Я зашел на сайт производителя, сделал скриншот понравившейся мне части материала, создал из картинки ссылку и результат налицо, не один блокиратор его больше не блокирует. Причем, копия вышла даже более красивой, чем оригинал, и отлично работает, можете убедиться сами!
д) Еще одной причиной, почему лучше сделать из баннера просто картинку, я бы назвал то, что поисковики, особенно Гугл, не любят, когда много рекламы на сайте. А вашу картинку ссылку, они станут воспринимать, просто как еще одно изображение, а не как рекламу. Удобно? Думаю, да! Но, давайте вернемся к сути нашего вопроса.
Как узнать адрес вашего изображения? Щёлкните по нему мышкой и в новом окошке вверху вы увидите вашу ссылочку. Или, войдя в админ панель, выбираем «Медиафайлы» — «Библиотека» и просматриваете все ваши изображения на сайте.
Это относится к сайтам на движках WordPress. Здесь все также довольно просто. Картинка уже загружена на ваш сайт. Вносим её в текст. Выделяем картиночку левой кнопочкой мышки. Далее, нажимаем на знак ссылки в верху «Визуальной панели».
Друзья, если вы любите смотреть видео, я советую делать это на отличных мониторах. У меня стоит монитор 27 дюймов. В начале, он показался мне огромным, сейчас кажется обычным, даже средним. Но, факт в том, что смотреть компьютер с обычным монитором мне уже не привычно. Поэтому, я вам советую приобрести монитор на АлиЭкспресс ASUS VC279N. Дизайном, он похож на мой. Приобрести его можно по ссылке… . Очень удобная вещь (если судить по моему).
Вообще, вы можете зайти на страницу с мониторами, и выбрать понравившийся. Так мониторы с разным диаметром, ценой и производителем. Но, я вам рекомендую всё же взять один из них с диаметром 27 дюймов! Ссылка на мониторы… 27 дюймов, это отлично, можете не сомневаться, он у меня уже лет 7 и работает на 5+ !

<дел> <метод формы="сообщение">
С уважением
Ральфм 29 ноября, 2012, 8:26
#2
Привет, бинго105. Добро пожаловать на форумы.

Этот CSS, который вы разместили, не относится к изображению в HTML, поэтому не совсем уверен, какое изображение вы имеете в виду. В любом случае, чтобы сделать изображение в HTML интерактивным как ссылку, просто сделайте следующее:
[COLOR="#FF0000"][/COLOR][COLOR="#FF0000"][/COLOR]
Вам также нужно указать путь ссылки (внутри href=»»), но это основная идея.
бинго105 29 ноября 2012 г., 8:28

#3
Я имею в виду изображение button.png, которое находится в css.
На это изображение я хотел бы добавить гиперссылку, но я нигде не видел пути для этого.
ральф 29 ноября 2012 г. , 8:39
#4
Вы немного смешиваете вещи. Это не может быть вход для отправки формы и ссылка одновременно. Чего вы на самом деле пытаетесь достичь с помощью этого кода? Похоже, что форма здесь не тот элемент, который следует использовать. Вы хотите, чтобы кто-то мог нажать кнопку, чтобы написать вам по электронной почте? В этом случае просто настройте ссылку так, чтобы она выглядела как кнопка, если вы хотите, чтобы на кнопке был эффект наведения, а если нет, просто поместите изображение в HTML, как я предлагал ранее, и оберните ссылку вокруг него. Это будет выглядеть примерно так:

Мы можем помочь больше, если точно знаем, что вам нужно. Если вам нужен эффект наведения, изображение должно остаться в CSS, а ссылке будут просто заданы размеры и фоновое изображение.

бинго105 29 ноября 2012 г., 8:53
#5
Это не контактная форма. Я бы попытался добавить гиперссылку на изображение, чтобы оно перенаправлялось на другой сайт.
Как я сейчас вижу в css, он настроен на эффект наведения.
ральф 29 ноября 2012 г., 9:02

#6
ОК, по ссылке, которую вы мне прислали, я вижу, что на кнопке написано «Свяжитесь с нами» (переведено). Так что просто уточнить:
вы хотите ссылку на другой сайт?
Если да, то вам точно нужна не форма, а просто ссылка, например:

Теперь вы можете оформить эту ссылку так, чтобы она выглядела как кнопка. Вы можете сделать это с помощью CSS и без изображения. Мы можем помочь вам в этом.
Ради интереса, зачем вам внешняя ссылка для контактов?
бинго105 29 ноября 2012 г., 9:07
#7
Да, я бы хотел, чтобы при нажатии на кнопку или текст в кнопке попадал на другой сайт.
Потому что это целевая страница.
Итак, какой код я должен использовать и где (css или html) для правильной работы?
ральф 29 ноября 2012 г., 9:16
#8
Итак, первое, что вам нужно сделать, это ваш дизайн. У вас есть большая форма внизу страницы, которая вам не нужна. Все, что вам нужно, это ссылка, поэтому вы можете немного изменить дизайн. Во всяком случае, ссылка может быть примерно такой:
Замените всю форму следующим:
Связаться с нами
CSS:
#footer-lower-wrapper a { фон: url('../images/button_hover.png') repeat-x; отступ: 5px 20px; белый цвет; тень текста: #D2D1D0 0px 1px 0px; вес шрифта: полужирный; курсор: указатель; } #footer-lower-wrapper a:hover, #footer-lower-wrapper a:focus { фон: url('../images/button.png') repeat-x; }
бинго105 29 ноября, 2012, 9:26
#9
Не работает… Код удалил, но футер с графикой пропал, а кнопка осталась, но без перенаправления (ссылка).
Другое решение?
ральф 29 ноября 2012 г. , 9:29
#10
Ваша страница мне кажется такой же. Я не вижу никаких изменений. Однако, как я уже сказал, вам нужно будет внести некоторые изменения в дизайн, если вы удалите форму. Может быть, div-контейнер полной ширины?
система закрыто 8 октября 2014 г., 3:18
#11
Использование плавающих элементов CSS со ссылками на изображения
Использование плавающих элементов CSS было распространенным методом для разработчиков для размещения содержимого на веб-странице. Согласно спецификации W3C CSS 2, раздел 9.5, «плавающий элемент — это блок, сдвинутый влево или вправо в текущей строке». Обеспечение визуальной индикации фокуса клавиатуры может быть сложной задачей для плавающих ссылок на изображения.
Критерий успеха WCAG 2.4.7 гласит, что на всех активных элементах должен быть визуальный индикатор фокуса. Без визуального индикатора фокуса у зрячих пользователей, использующих только клавиатуру, возникнут трудности с определением элемента, находящегося в фокусе. Часто разработчики добавляют CSS layout:0; объявление, которое удаляет индикацию фокуса. Плавающие ссылки на изображения также могут скрывать визуальную индикацию фокуса от пользователя.
Например, на рисунках 1 и 2 продукт, отображаемый на странице, позволяет пользователям активировать его для просмотра сведений об этом продукте. Справа может быть еще один элемент, такой как обзор рейтинга или контактная ссылка. Хотя CSS-схемы может и не быть: 0; или контур: нет; объявления для позиционированных ссылок на изображения, фокус визуальной клавиатуры все еще может быть скрыт. Проблема в том, что изображение плавает вместо родительского элемента привязки.
Пример кода HTML:

pantheonsite.io">

Не- совместимый пример CSS:

Рисунок 1. Индикация фокуса визуальной клавиатуры неуместна в Firefox 32.

Рисунок 2. В Internet Explorer 11 не отображается визуальный фокус. установить дисплей: встроенный блок; к родительскому элементу привязки (рис. 3). Это позволит всему разделу иметь визуальный контур фокуса клавиатуры.
Пример соответствия CSS №1

Рисунок 3. Контур фокуса визуальной клавиатуры окружает всю ссылку на изображение как для Internet Explorer, так и для Firefox.
Для ссылок на изображения, которые расположены с другими элементами на странице, разрешение может быть не таким простым, как добавление объявления отображения на родительском изображении. Например, когда несколько элементов позиционируются с помощью плавающего элемента, ссылка на изображение все еще может быть потеряна (рис. 4).
Рисунок 4. Появится фокус, чтобы пропустить ссылку на изображение группы SSB BART и перейти к ссылке «Контакты» pantheonsite.io" >

Свяжитесь с группой SSB BART

Как сделать ссылку на картинку в css? | PHPClub

golos81

Новичок

kruglov

Новичок

golos81

Новичок

BlackSabbath

Новичок