Все наверняка видели в сети карты области, страны, мира, с активными ссылками. На форумах люди спрашивают, Как сделать карту со ссылками. Я хочу рассказать вам, как же это делается подробно и доступно для понимания! Надеюсь, мой совет поможет вам разобраться во всем сразу, без дополнительных вопросов!

Именно на ней мы создадим активные ссылки, например, на городах! Я возьму за основу карту Ленинградской области формата PNG, размером 600х464 пикселей. Нужную вам карту, я думаю, вы сами найдете в интернете, а сделать ее необходимого размера вам поможет любой графический редактор, я пользуюсь Photoshop. Мы будем создавать ссылки на городах Санкт-Петербург, Выборг, Сланцы, Луга, Лодейное поле, Волхов.

Приступим! Я считаю, что размещать такую карту стоит уже после размещения всего остального контента, для удобства вычисления координат. Итак, имеем карту, что делать дальше? Я за то, чтобы CSS файлы выносить за страницу в отдельном файле и предпочитаю CSS файлы делить по функционалу, например, за свойства карты у меня будет отвечать файл map.css, а за остальное содержимое WEB страницы - style.css. Как поступать вам, решайте сами! Я создал map.css и прописываю в нем следующее:

Мы будем создавать ссылки на основе неупорядоченного списка, назовем его goroda. Для того, чтобы список не был таким, как его все воспринимают, вертикальным, сбрасываем стили list-style-type: none;. Это значение мы употребим для обоих элементов списка ul и li.

Наша карта будет "сидеть" в контейнере <div>, так мы сможем точно спозиционировать все элементы нашего списка в тех местах, где нам нужно.

Задаем свойства требуемого нам отделения. Назовем его map. Итак, position: relative-указываем, как будем позиционировать элемент-отделение с нашей картой, относительно. background: url('Petersburg_region1.png')-задаем фон элемента, в нашем случае, это файл с картой. top left no-repeat-указываем, окончательно позиционирование, а именно, привязываем фон к контейнеру наверх и влево и запрещаем ему повторяться! width: 600px; height: 464px;-задаем размеры элемента, под размер карты, то бишь фона. margin: 0 auto;-позиционируем отделение относительно элемента, в который он вложен, либо относительно экрана.

Теперь укажем стиль для наших ссылок, расположенных в контейнере map, ссылок, до нажатия на них и ссылок уже посещенных. position: absolute - абсолютно позиционируем расположение ссылки, для чего-узнаете далее. font-weight: bold -выделяем их полужирным для их лучшей видимости. color: yellow - указываем цвет (до нажатия и посещенных). Я для наглядности сделал их желтыми. font-size: 11px - указываем необходимый нам размер шрифта. font-family: Arial - указываем семейство шрифтов, которыми будут отображаться ссылки на экране пользователя.

Продолжаем задание свойств ссылок. В первой строке приведенного выше кода мы указываем поведение ссылки при наведении на нее курсора, она меняет свой цвет на синий. Во второй строке указываем для ссылки изменение цвета при нажатии на красный и отменяем подчеркивание ссылки. Запомните hover - действие при наведении, active - действие при нажатии . Сохраняем файл map.css.

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

Сохраним файл с расширением .html

Разберем HTML код. О тегах, обязательных для создания я не вижу смысла говорить, начнем с главного. Например <section id="map"> - section сам по себе элемент новый из HTML5. Благодаря ему, мы избавляем страницу от ненужных контейнеров <div>, так будет семантически правильнее. Напомню, что HTML5 допускает вложение одного тега <section> в другой, а основное его семантическое значение в том, чтобы нести в себе максимум контента страницы. В нашем случае весь контент - карта с активными ссылками! Присваиваем ему идентификатор из CSS - "map". Следующим элементом нашей страницы будет привязка стиля списка к странице и вложение его в контейнер, относительно которого мы будем позиционировать ссылки на карте - <div class="goroda">. Начинаем список! li определяет пункт списка - одну ссылку, id="m-1" сообщает ссылке, свой идентификатор для получения координат из нашего файла map.css. Создаем необходимое количество пунктов списка, не забываем добавлять в ссылки title - он будет полезен и пользователю для информации и поисковикам даст о вас положительный отзыв!

Хочу поздравить вас! Половина работы уже сделана!! Осталось только расставить ссылки на свои места координатами! Да, именно с помощью координат! Не пугайтесь, ничего страшного и сложного в этом нет, мы же себе подготовили уже почву для этого и будем подбирать цифры внутри нашего <section id="map">. Взгляните на файл css.map, каковы размеры нашего идентификатора #map? От них мы и будем отталкиваться! Где ноль - левый верхний угол.

После всех наших махинаций открываем наш html файл и видим на нем нашу карту с кучей сваленных в ней ссылок! Не пугайтесь, сейчас все разгребем! Открываем файл map.css и следующей строкой пишем:

Исследуем строку! #m-1 - идентификатор. именно к нему будет обращаться наша ссылка из html файла для правильного ее позиционирования. left: 208px - задаем отступ слева, от стенки контейнера section. top: 230px - задаем отступ сверху. Хочу напомнить, что эти два значения являются сокращением атрибута margin и допускаются для сокращения кода. И font-size: 15px; - в моем примере это размер шрифта для конкретной ссылки, т.к. у меня она обозначает столицу области.

Все! Наша карта с активными ссылками готова! Я не стану приводить координаты всех ссылок, поупражняйтесь сами из примера! А у меня в итоге получилось вот что:

Не забывайте в атрибутах картинки прописывать alt а в ссылках title!! Будьте грамотны!!! HTML5 вам в помощь и CSS3 на защиту, они помогут сделать карту с активными ссылками!!! Удачи!!!

Ссылка на статью http://simple-html5-css3.blogspot.com/2012/03/blog-post_16.html