ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 13.06.2024
Просмотров: 15
Скачиваний: 0
У лістингу4 представлений код карти зображення, що дозволяє проглянути детальніше визначні пам'ятки США, Парижа, Фінляндії і Англії, вибираючи частину великої фотографії. Фотографія розділена на чотири прямокутники (мал. 4)
Мал. 4 Приклад карти зображення
Лістинг 4. Приклад створення карти зображення з активними областями у вигляді прямокутників
<html><head><title>menu-karta</title></head> <body bgcolor=#ffbcbc>
<center> <h1>Достопримечательности</h1> <HR>
<table border=2> <TR>
<TD><A HREF=1.HTML> Тауерський міст в Англії </A> <TD><A HREF=2.HTML> Гарвардський університет в Сша</a> <TD><A HREF=3.HTML> Готичний собор в Паріже</a>
<TD><A HREF=4.HTML> Театр у Фінляндії</a> </table><HR></Center>
<A NAME = map> <H2>Графические ссылки</H2>
6
<Map NAME="mymap">
<AREA SHAPE= "RECT" COORDS= "0,0,270,190" HREF=1.html Title = "Тауерський міст в Англії">
<AREA SHAPE= "RECT" COORDS= "270,0,540,190" HREF=2.html Title = "Гарвардський університет в США">
<AREA SHAPE= "RECT" COORDS= "0,190, 270,380" HREF=2.html Title = "Готичний собор в Парижі">
<AREA SHAPE= "RECT" COORDS= "270,190,540,380" HREF=4.html Title = "Театр у Фінляндії">
</MAP>
<IMG SRC= "dostop.jpg" USEMAP="#mymap"> <HR>
<A NAME =IMG> </BODY> </HTML>
Щоб краще зрозуміти, як задаються координати областей, приведений мал. 6 з координатами в пікселах для кожної прямокутної області.
(0, 0) |
|
(270, 0) |
|
|
|
(270, 190) |
(540, 190) |
(0, 190)
(270, 380) |
|
(540, 380) |
|
|
|
ЗАВДАННЯ
1.Створіть веб-сторінку з розміщенням 6 зображень шириною 92 і висотою 114 пікселів кожне в таблиці.
2.Створіть веб-сторінку, що містить 4 зображення різного розміру, джерелом яких є один і той же файл. Необхідно передбачити пропорції зображення. Зображення розташувати один від одного на відстань двох нерозривн пропусків.
3.Створіть веб-сторінку, що містить зображення-карту. Зображення-карта повинна містити наступні області: «системний блок», «монітор», «клавіатура», «акустика». Наприклад, при наведенні користувачем покажчика миші на системний блок повинна з'являтися спливаюча підказка«системний блок», а після клацання мишею по області «системний блок» здійснюватися перехід на веб-сторінку з інформацією про системний блок.
7
КОНТРОЛЬНІ ПИТАННЯ
1.Який тег дозволяє розміщувати графіку на веб-сторінці?
2.Що таке атрибут? Який атрибут управляє місцеположенням зображення на сторінці? Які значення він може приймати?
3.Який тег застосовується для представлення графічного зображення у вигляді карти з активними областями?
4.Назвіть формати графічних файлів, які використовуються в Інтернеті
8