Урок "карта зображення" або "image map" - за допомогою онлайн-сервісу

Post on 25 лютого 2018
by Super User

Різні частини зображення можна зробити посиланнями на різні файли. Детальніше - у статті...

Підготовка:
- зберегти зображення http://it-shkola.in.ua/images/html_lessons/25-02-18-list3/map1234.jpg
- зберегти 4 файли  - створити основу html-файлу і зберегти під іменем index-map.html

Кроки для створення карти зображення (Image map) за допомогою онлайн-сервісу:
1. У файл іndex-map.html написати тег для вставки зображення map1234.jpg
2. У програмі Хром завантажити сайт http://maschek.hu/imagemap/imgmap/
3. Завантажити у вікно онлайн-сервісу зображення map1234.jpg
4. Створити 4 прямокутних (або круглих, або полігональних) області.
5. У полі "href" для області 1 вказати index31.html, для області 2 indexf31.html, для області 3 indexdz31.html, для області 4 вказати indexvv31.html 
6. Натиснути на слово "Code" і скопіювати код, який з'явиться на екрані.
7. Вставити скопійований код у файл після тега-зображення map1234.jpg.
8. Для зображення додати атрибут usemap="#123", де 123 - назва карти (можна вказати свою назву).
9. У вставленому коді знайти атрибут namе і вказати name="123", де 123 - назва карти, вказана у п.8 (можна вказати свою назву).
10. Зберегти файл і проглянути його у Хром. В результаті натискування мишкою на кожен з чотирьох квадратів відкриватиметься певний html-файл.

Приклад коду:
 

Свіже