Перейти к содержимому


Фотография
* * * * * 1 Голосов

Как создать картинку-ссылку в HTML


  • Закрытая тема Тема закрыта
Сообщений в теме: 17

#1 Оффлайн   WzGeee

    Постоялец


  • Пользователи
  • Репутация
    27
    • Cообщений: 390
    • Форум:3.4.х
    • Город:Курган

Отправлено 08 Февраль 2013 - 00:11

Подскажите код HTML чтобы сделать следующее:
У нас есть ссылка на картинку и ссылка "куда-то там". Как сделать чтобы я жал на картинку и переходил "куда-то там" и плюс ещё чтобы при наведении на картинку всплывал нужный текст, как всплывающая подсказка, типа куда будет ссылка.
 
Прошу сильно не бить и не троллить меня за такой вопрос :lol:  :nevizhu:

Скрытый текст



Заработок и обучение заработку

#2 Оффлайн   Виктор

    Постоялец


  • Пользователи
  • Репутация
    181
    • Cообщений: 200
    • Форум:3.4.х
    • Город:Санкт-Петербург

Отправлено 08 Февраль 2013 - 00:22

Код:

 

<a href="Cссылка при нажатии"><img src="адрес картинки" width="ширина картинки в пикселях" height="высота изображения" alt="текст при наведении" /></a>
 


#3 Оффлайн   WzGeee

    Постоялец


  • Пользователи
  • Репутация
    27
    • Cообщений: 390
    • Форум:3.4.х
    • Город:Курган

Отправлено 08 Февраль 2013 - 00:28

Виктор, ширина и высота зачем? Я картинку как нужно сделаю и всё. Проще получается так будет: 
<a href="Cссылка при нажатии"><img src="адрес картинки" alt="текст при наведении"/></a>
Нет?

Сообщение отредактировал WzGeee: 08 Февраль 2013 - 00:28


#4 Оффлайн   Виктор

    Постоялец


  • Пользователи
  • Репутация
    181
    • Cообщений: 200
    • Форум:3.4.х
    • Город:Санкт-Петербург

Отправлено 08 Февраль 2013 - 00:31

Виктор, ширина и высота зачем? Я картинку как нужно сделаю и всё. Проще получается так будет: 

<a href="Cссылка при нажатии"><img src="адрес картинки" alt="текст при наведении"/></a>
Нет?

Да. Ширина и высота нужны если у вас большая картинка (например, 3000 на 1500), а вам надо 1000 на 500, и тогда выставив ширину и высоту, она будет сама уменьшаться.



#5 Оффлайн   WzGeee

    Постоялец


  • Пользователи
  • Репутация
    27
    • Cообщений: 390
    • Форум:3.4.х
    • Город:Курган

Отправлено 08 Февраль 2013 - 00:35

Виктор, поставил бы лайки, да они тут зажаты  :lol:

Спасибо за помощь.



#6 Оффлайн   Law AC vs. Finch

    Гуру


  • Пользователи
  • Репутация
    887
    • Cообщений: 3 004
    • Форум:Нет

Отправлено 08 Февраль 2013 - 12:56

Виктор, ширина и высота зачем? Я картинку как нужно сделаю и всё. Проще получается так будет: 

<a href="Cссылка при нажатии"><img src="адрес картинки" alt="текст при наведении"/></a>
Нет?

Нет.
Атрибут alt у тега <img> - альтернативный текст для изображения.
Чтобы была подсказка при наведении, нужно к тегу <a> добавить атрибут title
Складываем все с учетом всех пожеланий и получаем на выходе 

 

<a href="Cссылка куда-то там" title="текст-подсказка при наведении"><img src="адрес картинки" alt="альтернативный текст" /></a>


#7 Оффлайн   WzGeee

    Постоялец


  • Пользователи
  • Репутация
    27
    • Cообщений: 390
    • Форум:3.4.х
    • Город:Курган

Отправлено 08 Февраль 2013 - 16:54

Law AC, так и знал что ты сюда заглянешь  :bravo:

Что за "альтернативный текст"?  :umnik:

P.S. Ты Finch с IPBR?


Сообщение отредактировал WzGeee: 08 Февраль 2013 - 16:57


#8 Оффлайн   WzGeee

    Постоялец


  • Пользователи
  • Репутация
    27
    • Cообщений: 390
    • Форум:3.4.х
    • Город:Курган

Отправлено 07 Март 2013 - 21:41

Нет.
Атрибут alt у тега <img> - альтернативный текст для изображения.
Чтобы была подсказка при наведении, нужно к тегу <a> добавить атрибут title
Складываем все с учетом всех пожеланий и получаем на выходе 

 



<a href="Cссылка куда-то там" title="текст-подсказка при наведении"><img src="адрес картинки" alt="альтернативный текст" /></a>

Law AC, дак что за альтернативный тест?  :smile: Без него не как? А то он меня смущает :lol: , а ссылок несколько будет, не хочу лишнего чтобы не запутаться  :burumburum: 



#9 Оффлайн   WzGeee

    Постоялец


  • Пользователи
  • Репутация
    27
    • Cообщений: 390
    • Форум:3.4.х
    • Город:Курган

Отправлено 07 Март 2013 - 23:25

Ещё +2 глупых вопроса   :spasibo:

 

Сейчас искал по htmlbook.ru, но что-то всё равно не понял... Как сделать отступ между моими картинками-ссылками если они в одну строчку? А как более широкий отступ (Если что)?

 

Я это всё спрашиваю чтобы в блок через компонент Custom Sidebar Blocks нужную инфу добавить. Странно что он <br> при сохранении блока удаляет, а <br/ > нет и всё пашет. Но, почему? :omg: Разница между этими бр'ами?  :chih:


Сообщение отредактировал WzGeee: 07 Март 2013 - 23:42


#10 Оффлайн   ๖ۣۣۜSasha™

    Активный


  • Пользователи
  • Репутация
    30
    • Cообщений: 134
    • Форум:3.4.х

Отправлено 08 Март 2013 - 01:29

Сейчас искал по htmlbook.ru, но что-то всё равно не понял... Как сделать отступ между моими картинками-ссылками если они в одну строчку? А как более широкий отступ (Если что)?

&nbsp - один пробел, если надо много, много &nbsp