Як в html зробити зображення-карту

Як в HTML зробити Зображення-Карту.

В даному випадку картинка взята довільно, просто для прикладу. Тут Ви бачите скріншоти різних сайтів, об'єднаних на одній загальній картинці. Припустимо Вам потрібно зробити, щоб при кліці на кожен з сайтів, зображених на цій картинці (зменшене зображення), людина потрапляв саме на цей сайт. Тобто розбити всю картинку приблизно так:

Робиться це досить просто. Нехай наше зображення, точніше графічний файл, називається karta2.jpg. Розмір картинки використовуваної тут 400х255 пікселів. Спочатку давайте подивимося Лістинг 1 такої розбивки:

Як бачите, щоб створити карту, потрібно вставити в тег атрибут usemap = "# name". де name - ім'я карти (значок # обов'язковий) в даному випадку ім'я графічного файлу карти: karta2.jpg. Я пропускаю інші атрибути в цьому тегу, Ви їх повинні знати, тому що про них вже розповідалося в попередніх уроках.

Далі описуємо всі активні області карти (в даному випадку у нас їх 8). Починаємо з відкривається тега .

елемент має наступні атрибути і їх значення:

Описує форму області, що виділяється, можливі значення:
rect - прямокутник
circle - коло
poly - багатокутник
default - визначає всю область, тобто весь малюнок може стати посиланням.

Координати, що визначають розміри і положення області на зображенні. Всі координати відраховуються в пікселях від лівого верхнього кута зображення. Кількість і порядок значень залежить від значення атрибута shape:
rect. - лівий-X, верхній-Y, правий-X, нижній-Y (тобто спочатку координати лівого верхнього кута, потім правого нижнього)
circle. - центр-X, центр-Y, радіус (тобто горизонтальна і вертикальна координати центру кола і радіус)
poly. - X1, Y1, X2, Y2. Xn, Yn (просто перераховуються координати всіх вершин багатокутника).

Альтернативний текст для виділеної області, використовується невізуальними браузерами.

Назва виділеної області, виводиться у вигляді підказки, спливаючі при наведенні курсору на область малюнка.

Значення цього атрибута ( "_top", "_blank", "_self" або "_parent") визначає, в якому вікні буде відкритий документ

В результаті ось що у нас вийшло, покликавши по піктограм:

Як приклад замість посилання Link 1. я вставив реальну посилання, що веде на вітальний сайт. який зовсім недавно допомагав робити одному з воему один до Нового року. Подивитися реальний приклад роботи можна тут. Кожна з мініатюрних фотографій на головній сторінці, веде на окрему web-сторінку з персональними вітаннями конкретній людині, тобто маленька фотографія я вляется окремої посиланням.

Як Ви розумієте посилання можна зробити, як абсолютні. так і відносні. різниці немає ніякої.

Зображення карти, досить широко поширені і використовуються досить часто в практиці web-майстрів. Адже як Ви зрозуміли, як посилання, можна створювати досить складні області, крім того, на одній карті завжди можна комбінувати і виділяти фігури будь-якої конфігурації.

Операція конкатенація (з'єднання) в PHP.

Як заробити на електронних книгах?

Як змінити зовнішній вигляд курсору.

"Ховаємо" лічильники за допомогою CSS.

уроки HTML

CSS уроки

статті

Інструменти

Шаблони сайтів

книги

прикраси

Сайт від А до Я

Заробити в інтернеті

Обман в Інтернеті

Охорона праці

МОДУЛЬНІ КАРТИНИ

PHP УРОКИ

послуги

скрипти

SEO

jQuery

Спеціальна оцінка умов праці (Соуто) - АРМ

Платіжні системи Інтернету

УРОКИ ФОТОШОП

секретний розділ

Як заробити гроші в Інтернеті?
Створи свій ИнфоБизнес

Хочете заробити?
2-х рівнева
Партнерська програма!
Приєднуйтесь.

Модульна картина: Розкіш червоного оксамиту

Модульна картина абстракція: Енергія сонця

Модульна картина: Сині троянди

Модульна картина: Водоспад

Модульна картина: Орхідеї

Реєстрація доменів

ТОВ "ПК" ЛюксСтрой "

Якщо Вам сподобався
наш сайт, встановіть
Нашу посилання. і
Отримайте подарунки.