Html
Материал из SysadminWiki.ru
Примеры
Интерактивное изображение по середине экрана
- Интерактивное изображение (изображение карта), помещается в таблицу, заполняющую всё свободное место.
- Для изображения определяются интерактивные области, щёлкая по которым переходим по гиперссылке.
- Фоном ставим изображение, увеличивая без искажения по размеру окна.
<html> <head> <meta content="text/html; charset=utf-8" http-equiv="content-type"> <title>Заголовок страницы</title> <style> body { background: url(background.jpg); background-size: cover; } </style> </head> <body LANG="ru-RU"> <table width=100% height=100%> <tr> <td width=100% height=100% valign=center> <div align="center"> <p><IMG SRC="interactive_pic.png" NAME="Название изображения" usemap="#pic map" WIDTH=627 HEIGHT=501 BORDER=0></p> </div> </td> </tr> </table> <map name="pic map"> <area shape="rect" title="Сайт СисадминВики" coords="64, 105, 235, 283" href="http://sysadminwiki.ru"> <area shape="rect" title="Всплывающая подсказкa: Посмотреть PDF файл" coords="260, 176, 430, 453" href="http://domain.ru/file.pdf"> </map> </body> </html>
- Пометки:
- в тэге <IMG> свойство ALIGN=center может не работать, поэтому оборачиваем изображение в тэг .
Полезные ссылки
- http://htmlbook.ru/ - Всё о HTML формате на русском языке: описание тэгов, примеры, советы, полезные ссылки.
- Создание интерактивного изображения (карты-изображения) с отдельными областями, являющимися активными ссылками - пошаговая инструкция
- в тэге <IMG> свойство ALIGN=center может не работать, поэтому оборачиваем изображение в тэг
