зображення гіперпосилання
У попередньому розділі ми навчилися перетворювати фрагменти тексту в гіперпосилання. Але, крім тексту, гіперпосиланням можна зробити і графічне зображення. Такі зображення-гіперпосилання часто зустрічаються на Web-сторінках.
Але, перш за все, заготовив саме зображення. Це буде значок "комерційне ет", часто використовується в якості символу електронної пошти.
Мал. 4.8.Значок "комерційне ет" - символ електронної пошти
Якщо параметр Border зображення-гіперпосилання має значення, відмінне від нуля, то рамка, що малюється навколо зображення, буде мати такий же колір, який був встановлений для гіперпосилань в загальних властивостях даної сторінки. У нашому випадку, така рамка матиме світло-синій колір для невідвіданих, темно-синій для відвіданих і яскраво-червоний для активної гіперпосилань. Такий ефект можна спеціально використовувати, щоб зробити оригінальний дизайн Web-сторінки, але зазвичай їм не користуються.
HTML-код, що використовується для вставки зображення гіперпосилання, має вигляд:
Виявляється, це можна зробити. Такі зображення, що реагують на дії користувача, називаються активними. І Dreamweaver дозволяє робити їх декількома клацаннями миші. Єдине, про що вам потрібно подбати, так це про другому зображенні, яке буде з'являтися на місці вихідного, коли користувач наведе на нього курсор миші (так зване перекриває зображення).
Активне зображення вставляється за допомогою кнопки Rollover Image (рис. 4.9) вкладки Common панелі об'єктів або пункту Rollover Image підміню Interactive Images меню Insert. При цьому на екрані з'являється діалогове вікно Insert Rollover Image, показане на рис. 4.10.
Мал. 4.9.Кнопка Rollover Image панелі об'єктів
Мал. 4.10.Діалоговое вікно Insert Rollover Image
В поле введення Image Name вводиться унікальне ім'я вставляється активного зображення. Ім'я повинно містити тільки латинські букви, цифри і знаки підкреслення, причому починатися повинно з букви. Перевірте тільки, чи дійсно це ім'я унікально.
В поле введення Original Image вводиться ім'я файлу оригінального зображення. Якщо ви не хочете вводити його вручну, натисніть кнопку Browse праворуч від цього поля введення. Після цього на екрані з'явиться діалогове вікно Select Image Source (див. Рис. 4.3), де ви зможете вибрати потрібний файл.
В поле введення Rollover Image вводиться ім'я файлу перекриває зображення. Також, якщо вам не хочеться водити його вручну, на допомогу завжди прийде кнопка Browse.
Прапорець Preload Rollover Image змушує Dreamweaver згенерувати і вставити в HTML-код вашої сторінки невелику програму-сценарій, яка заздалегідь завантажить перекриває зображення. Цей прапорець включений за замовчуванням, і відключати його не варто. Якщо ж його відключити, то перекриває зображення буде завантажено тоді, коли в ньому виникне потреба, т. Е. Коли користувач помістить над зображенням курсор миші.
В поле введення Alternate Text вводиться "альтернативний текст". Краще його ввести.
На рис. 4.10 до відповідних поля введення підставлені всі потрібні значення. Вам залишається ввести їх і натиснути кнопку ОК, після чого активне зображення буде створено. Змініть його розмір, якщо хочете.
В даний момент давайте не будемо використовувати на своїх Web-сторінках карти-зображення. Однак приклад створення привести необхідно, тому ми створимо спеціальну Web-сторінку і спеціальне зображення для навчальних потреб. Файл зображення називається Map.gif, а файл сторінки - 4.2.htm. Ця сторінка не буде містити нічого, крім зображення (рис 4.11).
Мал. 4.11.Учебная Web-сторінка з картою-зображенням
Після цього, як ви помітили, Dreamweaver підставить в полі введення Map рядок "Map". Що вона означає? Це унікальне ім'я зображення-гіпер-посилання, яке буде використовуватися Web-браузером. Якщо ви плануєте на своїй сторінці тільки одну карту-зображення, можете залишити це ім'я за замовчуванням, в іншому випадку дайте їй унікальне ім'я, хоча б "Бер1. Зауважте, що в таких іменах допускаються тільки латинські букви, цифри і знаки підкреслення, причому починатися ім'я має з букви.
Розібравшись з тим, як вводяться параметри "гарячої області", знову звернемо увагу на зображення і саму "гарячу область". Ви вже, напевно, помітили, що по кутах прямокутника, що представляє собою цю саму "гарячу область", розташовані невеликі сині квадратики - маркери зміни розміру. "Захопивши" будь-який такий маркер мишею, ви можете змінити розміри "гарячої області". А щоб перемістити її на інше місце, просто перетягніть її мишею. Однак перед усіма цими операціями перевірте, що з кнопок, показаних на рис. 4.12, натиснута та, на якій зображена стрілка, і, якщо немає, натисніть її.
Багатокутна "гаряча область" створюється дещо складніше. Натиснувши кнопку із зображенням багатокутника, перш за все, клацніть мишею в місці, де повинна розташовуватися перша з кутових точок багатокутної області. Після цього там з'явиться синя точка - початок нашого багатокутника. Потім клацніть там, де повинна бути друга кутова точка, і Dreamweaver проведе між цими двома точками лінію. Далі вам залишиться клацнути в місцях розташування інших кутових точок багатокутника, a Dreamweaver сам проведе між ними лінії, які і утворюють потрібну нам багатокутну "гарячу" область. Згодом ви можете перетягнути мишею будь-яку точку цієї області. Ось тільки вставити нову або видалити стару кутову точку ви вже не зможете - вам доведеться видалити створену "гарячу" область і створити нову.
Виділіть многокутну "гарячу область", якщо вона ще не виділена, введіть в поле введення Src ім'я файлу 3.1.htm - нашої головної сторінки і натисніть клавішу
Залишилося описати зовсім трохи додаткових функцій, пропонованих Dreamweaver для роботи з картами-зображеннями.
Мал. 4.14.Готовая карта-зображення
Пункт Link контекстного меню виводить на екран діалогове вікно Select File, де ви можете вибрати файл, на який буде посилатися "гаряча область".
Пункт Alt контекстного меню дозволить вам за допомогою діалогового вікна Change Attribute задати "альтернативний" текст.
Мал. 4.15. Діалогове вікно Change Attribute
А про пункти Bring To Front і Send To Back все того ж невичерпного контекстного меню поговоримо докладніше.
Іноді трапляється так, що дві "гарячі області" перекривають один одного, т. Е. Мають загальний фрагмент. При цьому при натисканні на такий "спірної території" активізується "гаряча область", розташована зверху, а зверху завжди з'являється та область, що була створена останньою. Але не завжди виходить розмістити "гарячі області", як було передбачено за планом. Так ось, щоб управляти їх перекриттям, використовуються пункти Bring To Front і Send To Back контекстного меню. Перший переносить виділену "гарячу область" наверх, а другий - "заганяє" її вниз.
В останньому випадку ви також можете скористатися пунктами Bring To Front і Send To Back підміню Arrange меню Modify.