Карты изображений.
Карта изображения позволяет привязывать ссылки к различным областям изображения. Например, имея карту Украины, можно создать для каждой области свою ссылку. Т. е. при щелчке мыши по определенной области откроется связанная с ней страница. Второй пример. Предположим, необходимо сделать навигацию нестандартного вида на сайте. В этом случае без карты изображений обойтись невозможно. Но использование карт изображений имеет недостаток. Если в браузере отключены картинки, то визуально невозможно будет определить, где какая область и на что необходимо щелкнуть. Карты изображений дают возможность выделять на изображениях области в форме: 1. Окружности (circle). 2. Прямоугольника (rect). 3. Многоугольника (poly). Для создания карты изображения необходимо: 1. В теге img, соответствующему необходимому изображению указати имя карты в параметре usemap: <img src=“images/nav.jpg” alt=”Нестандартная навигация” usemap= ”#имя карты” /> 2. Где-нибудь в теге body (лучше всего сразу поле тега img) разместить тег map: <map name=”имя карты”> … </map> 3. В теге map разместить описание областей-ссылок, представивши их координаты при помощи тегов area: <area shape=”фигура” alt=”комментарий” coords=”координаты” href=”ссылка” /> Тег area имеет такие параметры: · shape – форма области (circle, rect, poly); · alt – комментарий (нигде не отоблажается); · coords – координаты области; · href – адрес ссылки для области; Синтаксис описания круга (задается координатами центра и радиусом): <area shape=”circle” alt=”комментарий” coords=”x,y,радиус” href=”ссылка”/> Синтаксис описания прямоугольника (задается координатами верхнего левого и нижнего правого угла): <area shape=”rect” alt=”комментарий” coords=”x1,y1,x2,y2” href=”ссылка” /> Синтаксис описания многоугольника (задается координатами вершин): <area shape=”poly” alt=”комментарий” coords=”x1,y1,…,xn,yn,x1,y1” href=”ссылка” /> Пример: <html> К сожалению, карты изображений имеют как преимущества, так и недостатки. Поэтому прежде чем их применять следует взвесить все «за» и «против». Преимущество карт-изображений: 1. Нет необходимости разрезать изображение на части для того, что бы поставить ссылку на отдельную его часть, в результате не надо заботится о «состыковке» изображений. 2. Можно задать любую форму области (аппроксимация набором прямых отрезков). Недостатки: 1. Нельзя установить всплывающую подсказку для отдельной части изображения. Если в браузере отключены рисунки, то определить, где какая область невозможно, поскольку будет отображен лишь пустой прямоугольник. 2. Представления сложных фигур влечет за собой значительное увеличение (X)HTML-кода. Фреймы Фрейм – это отдельный элемент веб-страницы, позволяющий в него отобразить другой (X)HTML-документ. Фреймы позволяют разделить окно браузера на несколько частей прямоугольной формы и отображать в каждой из них отдельный (X)HTML-документ.
Использование фреймов имеет такие преимущества: 1. При помощи фреймов очень просто реализовать каркас сайта (в одном фрейме отображается шапка сайта, во втором – меню навигации, в третьем – содержимое веб-страницы. Но фреймы имеют и серьезные недостатки: 1. Невозможно записать URL на отдельную страницу сайта (можно записать URL на страницу, отображаемую в центральном фрейме, но тогда эта ссылка будет указывать на страницу без шапки и навигации). 2. Фреймы плохо обрабатываются поисковыми системами. Предположим в результате поиска был найден адрес нужного сайта. при щелчке на найденной ссылке откроется страница без шапки и навигации. 3. Фреймы могут по разному отображаться в различных браузерах. Поэтому использовать фреймы не рекомендуется. По возможности следует использовать другие альтернативы, например блочную модель CSS.
|
