Все статьи из текущего раздела

Карты изображений на основе CSS

Создание карты изображения на основе CSS является одной из интересных возможностей HTML, позволяющей пользователю привязывать ссылки на другие документы к отдельным частям изображений. Щелкая мышью на отдельных частях изображения, пользователь может выполнять те или иные действия, переходить по той или иной ссылке на другие документы и т.п.

Карта изображений (image map) состоит из нескольких областей щелчка (hotspots), работающих как гиперссылки. В рассматриваемом примере используется фотография актрисы Жанны Эплле с подругой.

При наведении указателя на персонаж фотографии, появляется прямоугольная рамка и подсказка. Щелчок в рамке запускает загрузку сайта, принадлежащего указанному персонажу.

Наводим мышкой на лицо актрисы, читаем подсказку и если желаем, то переходим на её сайт (но не забываем, вернутся обратно на базу).

Ну а теперь можно рассмотреть как это работает.


Создадим два файла: index.php и style.css

Первый файл index.php выглядит так:

<?php
<head
<
title>Карты изображений на основе CSS</title
<
link rel="stylesheet" type="text/css" href="/style.css"
</
head
<
body
<
div id="photo"
<
class="epple"><a href="http://www.epple.ru"  title="Жанна Эппле. При 
нажатии переход на её сайт."
></a></p
<
class="helpmate"><a href="http://www.#"  title="Если у человека нет
сайта, можно в подсказке оставить небольшой комментарий, как этот."
>
</
a><p
</
div
</
body

Тег <head> открывает заголовок документа. Заголовок страницы заключён между тегами <head> и </head>, и содержит информацию, невидимую для посетителя (за исключением title). Сюда я поместил тег <link>, с его помощью я задаю ссылку на таблицу стилей CSS, представляющую собой отдельный файл (наш второй файл), указанный с помощью href.

С помощью тега <div> установим размер контейнера шириной: 350px; и высотой: 438px;, равным размерам изображения.

Перед тем как создать файл style.css, создадим папку images, и поместим в неё фото Ж.Эппле. Width: 350px; height: 438px; (имеем два файла и одну папку).

Создаём файл style.css

<?php
#photo { 
  
width350px/*ширина контейнера*/ 
  
height438px/*высота контейнера*/ 
  
positionrelative/*относительное позиционирование*/  
  
backgroundurl(images/epple.jpgno-repeat/*фоновое изображение без повторений*/

#photo a { 
  
positionabsolute/*абсолютное позиционирование*/  
  
width100px/*ширина контейнера гиперссылки*/
  
height130px/*высота контейнера гиперссылки*/
  
text-indent: -1000em;  /*отрицательный отступ*/ 

#photo a:hover { 
  
border1px solid #663300;  /*рамка контейнера гирерссылки*/ 

#photo .epple a { 
    
top:35px/*позиционирование гиперссылки*/ 
    
left185px/*позиционирование гиперссылки*/ 

#photo .helpmate a { 
  
top12px/*позиционирование гиперссылки*/ 
  
left60px/*позиционирование гиперссылки*/ 
}

Смотрим как работает стилевой файл. Определяем ширину и высоту контейнера. Помещаем в него изображение как фоновое без его повторения (no-repeat).
Свойству position элемента div присвоим значение relative, что позволит позиционировать вложенные гиперссылки относительно границ элемента div, т.е. относительно изображения.

Теперь стилизуем гиперссылки. Задав абсолютное позиционирование, мы расположили все гиперссылки в левом верхнем углу контейнера div. Устанавливаем высоту и ширину гиперссылкам. Чтобы текст гиперссылок был не видим скроем его с помощью достаточно большого отрицательного отступа (text-indent).

Задаём толщину, цвет и непрерывный стиль (solid) рамки гиперссылки. Затем позиционируем каждую гиперссылку на конкретном персонаже, благодаря чему образуются области щелчка.

скачать index.php; style.css; images;
Размер - 27.1кБ


ПОЛЕЗНЫЕ ССЫЛКИ: