Ссылка картинка css: Изображение в качестве ссылки | htmlbook.ru

Leave a Comment / Css / By alexxlab / 23.12.1980

css — Не работает картинка-ссылка html

Вопрос задан 10 месяцев назад

Изменён 10 месяцев назад

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

Не работает картинка-ссылка на сайте, хотя написано вроде правильно и даже через инструменты разработчика можно эту ссылку увидеть.

Что странно: Ещё две ссылки-картинки на сайте тоже не работают. Работает только одна в футере. Но с планшета они почему-то работают.

ссылка на сайт: ???? (я ещё не установил нормальный сертификат безопасности, поэтому пишет предупреждение)

<div>
  <p>
    <a href="https://www.youtube.com/c/-/featured" target="_blank">
      <img src="images/-.png" alt="-">
    </a>
    <a href="https://discord.gg/9wMvRc7t5sn" target="_blank">
      <img src="images/discord.  png" alt="-">
    </a>
    <a href="https://www.-.com/members/-/projects" target="_blank">
      <img src="images/-.png" alt="-">
    </a>
  </p>
</div>

html
css

У блока с классом «sponsors» поменяйте z-index. Вы там нагородили, что другие блоки его перекрывают. Но тогда станут недоступны те ссылки что его перекрывают. Если нет желания сильно все менять, то можно сделать так:

div.sponsors img {
    margin-left: 10px;
    text-align: center;
    z-index: 1;
    position: relative;
}

Это решит проблему с нажатием ссылок и ничего не поломает

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

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

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

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

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

Почта

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

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

Почта

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

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

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

golos81

Новичок

10 Июн 2006

kruglov
Новичок
10 Июн 2006

Kickstart HTML, CSS и PHP: создание адаптивного веб-сайта
Описание
Никогда не было лучшего времени для изучения и освоения веб-разработки, чем сейчас. В этой серии вы узнаете о HTML, CSS и PHP, а также о том, как за несколько часов создать адаптивный веб-сайт с нуля.
Хотите научиться создавать красивые и отзывчивые веб-сайты и веб-разработку? если ваш ответ да, то это правильный курс для вас.
В этом пошаговом курсе вы начнете с HTML, языка, на котором работает Интернет, после изучения основ HTML вы узнаете, как украсить свой веб-сайт с помощью каскадной таблицы стилей (CSS).
Язык гипертекстовой разметки (HTML) и Каскадные таблицы стилей (CSS) — это основы, которые вам нужны, чтобы начать создавать потрясающие веб-сайты. Изучив основы HTML и CSS, мы шаг за шагом создадим адаптивный веб-сайт. .
Когда вы освоитесь с HTML и CSS , вы поднимете свои навыки на новый уровень с основами программирования на PHP. Я научу вас всему, что вам нужно знать, чтобы приступить к веб-разработке на PHP. Начиная с настройки локальной среды разработки на вашем компьютере и заканчивая пониманием тонкостей языка программирования PHP.
Это ваш первый шаг к тому, чтобы стать профессиональным веб-разработчиком. Знания, которые вы получите на этом курсе, позволят очень легко понять программирование, веб-разработку и создание систем.
Своевременная поддержка!
Если у вас возникнут какие-либо проблемы, почему стоит пройти этот курс, не волнуйтесь, я всегда здесь, чтобы помочь и провести вас.
Зарегистрируйтесь сегодня и получите навыки и знания, необходимые для успеха в качестве фрилансера. Каждая минута, которую вы пропускаете, — это деньги и возможности, которые проходят мимо вас.
Для начинающих
Любой человек, который хочет создать и отредактировать свой веб-сайт
Любой человек, который хочет стать внештатным веб-разработчиком
Что я получу?
Узнайте, как создать веб-сайт с помощью HTML и CSS
Уверенное понимание языка программирования PHP
Настройка локального веб-сервера PHP для разработки0034
Понимание и использование оператора PHP переключателя
Seperate PHP Logic and Presentation
Петли PHP
ПЛАНГИ И ПРОДОЛЖЕНИЕ
ФУНЦИАЛЬНЫЕ В ФУНКЦИИ PHP
944499933333334
.
Рекурсивная функция в PHP
Настройка VirtualHost в Windows и Mac OS
Понимание обработки веб-форм в PHP
Понимание и использование сеансов PHP и файлов cookie
Понимание и используйте операторы выбора PHP
Понимание и используйте функции массива PHP
Работа с массивом PHP
.
Понимание и тег PHP Script
Создание сайтов PHP
Понимание и использование многомерных массивов
Понимание базовых операторов if..else…elseif
Отображение выходных данных с помощью PHP
Понимание области видимости переменных в PHP
Связывание CSS с HTML-документом и использование универсального идентификатора класса
4
4 90 Селекторы в CSS.0005
Понимание и использование медиа-запросов CSS
Создание простой CSS Grid-системы
Требования
Вставить ссылку на изображение — HTML и CSS — Форумы SitePoint
1 910152 29 ноября 2012 г., 6:39
#1
Привет.
Я хотел бы знать, как можно вставить ссылку на изображение или отредактировать код html или css, чтобы получить гипертекст на изображении?
Я вставляю код своего шаблона, мне очень нужна помощь, чтобы настроить эту гиперссылку.
CSS:
#footer-upper-wrapper ul li input[type="submit"]:hover { плыть налево; фон: url('../images/button.png') repeat-x; граница: нет; отступ: 5px; поле сверху: 5 пикселей; ширина: 73 пикселя; контур: нет; поле слева: 7px; цвет: #fff; курсор: указатель;
HTML:

<дел> <метод формы="сообщение">
С уважением
Ральфм 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 г.