|
|
| ХАТА МОЯ | ПОРТФОЛІО | ХРИСТИЯНИНУ | ПОЧИТАТИ | МОЄ ЖИТТЯ | ФОТОАЛЬБОМ | ЗВ'ЯЗОК | |
 Один на один с FreeBSD |
|
|
Швидкі пальчики 05
Людині властива лінь. Всі ми люди, а отже лінюхи. В кінці кінців лінь - це рушій прогресу, а оскільки ми ліниві, то рухаємо прогрес. Зробимо в цьому напрямку ще декілька кроків. Прогресивних, звичайно. Ось придумали ми собі гарненький графічний інтерфейс для першої сторіночки - менюшки і смужки, лінки і картинки, для цього довго різали-кроїли, малювали кнопочки і маркери... Ох... Якби ж то намалювати цілу картинку, а потім частинам цієї картинки присвоїти потрібні лінки... Ну і що з того, що така картинище вантажитиметься довше, ніж оті маленькі, зібрані в таблицю - а я її оптимізую, зменшу розмір, а якщо колір трішечки постраждає, то не всі ото помітять...(Так оце ми собі думаємо). Має ж бути для того щось у HTML! Є, не сумнівайтеся, і це навіть дуже нескладно. Ця проста річ називається IMAGEMAPS. Прикусимо язички і приступимо безпосередньо до роботи. Маємо картинку, а я ось маю навіть дві - одна з квадратовими кнопочками, а друга міститиме багатокутник та кругленькі псевдо-тривимірні барабольки. Для початку прикинемо, в яких місцях малюнка будуть лінки. Область, якій ми можемо присвоїти гіперпосилання, може бути трьох типів: прямокутник, багатокутник та коло. В прямокутнику спрямовуємо наш орлиний погляд на лівий верхній та правий нижній кути, в багатокутнику - на координати всіх вершин (тут головне, щоб координати початку обходу багатокутника та його кінця співпадали), а для кола нам будуть потрібні координати вершини та його радіус. Як нам ці координати вираховувати? Ну, признаюсь, що є спеціальні програмки для формування IMAGEMAPS. Але під рукою їх в нас поки що нема. Є, наприклад, PAINT. Для можливості завантажитись в нього зробимо варіант картинки в bmp-форматі. Соваємо собі мишкою по вершинах наших областей і дивимось на координати, що показує нижня стрічка (десь там справа). Ну ми, звичайно, справжні лінюхи і вже маємо під рукою картинку, роздруковану на принтері. Відмічаємо потрібні вершини і приписуємо до них відповідні координати, так як є, без змін. Очевидно, що першою йде горизонтальна координата, а другою вертикальна. А ось несподіванкою для всіх, особливо для палко відданих справі побудови всіляких графіків функцій математиків, буде розміщення початку координат - це верхній лівий кут малюночка. І браузер, і PAINT в цьому питанні на диво одноголосні. Текст готової приблизної IMAGEMAP для картинки з квадратовими кнопками виглядатиме ось так: <html><head><title>Imagemap #1</title> Тепер роздивимося навколо. Карту малюнка описує тег <map>. В ньому ми деталізуємо за допомогою тега <area> області карти, яким буде присвоєно той чи інший лінк. Параметр shape=”rect” тут описує прямокутну область, в якій верхній лівий кут має координати (177,6), а нижній правий - (228,56). При кліканні на цій області ми відправимося на файл contact.html. Кнопочки в нас “німі”, без написів, тому атрибут alt=”Contact us!” тут є обов’язковим. Атрибути нижнього довгого віконечка містять в собі eventhandler (“той, що обробляє події”) від JavaScript. Конструкція onMouseOver=”alert(‘Hi all!’);return true;” означає, що коли курсор мишки потрапить на цю частинку малюнка (це і є “подія”, яку треба “обробити”, тобто виконати певну послідовність дій), то буде викликано діалогове віконечко (функція alert), на якому буде написано Hi all! та кнопка ОК для можливості підтвердити це привітання (на жаль, альтернативи наразі і немає). А ось return true тут для того, щоб це віконечко віталося з вами кожен раз, коли настирна мишка потрапляє на це довге таємниче вікно. Добре було б зробити, щоб з нього вилазила якась абстрактна потвора і чимчикувала гуляти десь в межах нашої браузерної території. :-) Але про це в майбутніх серіях, а наразі вітаю вас красненько! Ви познайомились із JavaScript. Знайомство буде продовжене в майбутньому згідно з вашими побажаннями та конкретними запитаннями. Можливо. Примітка(курсивом): Крім того, в <area>, може бути також/або eventhandler onMouseOut, який задаватиме дії, що повинні відбутися в момент, коли виникне подія “курсор мишки знаходиться поза межами цієї області”. Помітили, мабуть, що все це знаходиться в <head></head>, а в <body></body> маємо картинку з параметром, що вказує на відповідну карту: usemap=”#number_one”. Причому ця карта може знаходитись в іншому файлі за принципом usemap = ”URL#map_name”, тобто можна не описувати карту в кожному файлі (все для нас, лінюхів), а тільки посилатися на неї. НЕ ЗАБУВАЙТЕ ПРО #! Тепер картинка із більш вигадливими формами. Такий ось в нас для неї код: <html><head><title>Imagemap
#2</title> Отже, shape=”poly” описує багатокутник: починаємо з вершини (20,16), потім йдемо на вершину (88,13), (88,26) і так далі, а закінчуємо знову ж вершиною (20,16). Оскільки області малюнка вже підписані, то параметр ALT опускаємо, щоб в очах не мерехтіло. І накінець, коло: shape=”circle”. Вершина знаходиться в (142,78), а
радіус дорівнює 14-ти для маленьких кіл і 60-ти для великого. Декілька зауважень для повноти картини. Якщо треба визначити URL, який повинен бути активований тоді, коли ми клікаємо на частині зображення, якому не присвоєний жоден гіперлінк, то будуємо таку <area>: <area shape=”default” href=”somewhere.html”>. А щоб в якійсь області з присвоєним лінком вирізати дірку, в якому лінку нема, то замість href=”...” пишемо одне слово nohref і вказуємо форму і координати дірки. І все. Якщо сторінка в нас фреймована, то в <area> можемо проставити потрібний нам target вікна, куди буде вантажитися наш href=”...”. А ще можна карту описати в файлі на сервері, а доступ до нього отримати за допомогою не usemap, а ismap... Але це вже зовсім інша історія. Ну що, лінюхи, попрацювали? А тепер повернемось до улюбленої справи - відпочинку. Бажаю досягти у ній успіхів! P.S. АЛЕ: Навряд чи створення меню і карт сайту у вигляді IMAGEMAP дозволить зімітувати ефект натиснутої кнопочки, хіба за допомогою видимих-невидимих шарів. Це вже не для лінивих. Розбиваючи зображення та збираючи його докупи в таблицю, зробити це набагато простіше за допомогою вставки в тег пари eventhandler-ів onMouseOut та onMouseOver. Цим та дечим іншим ми й займемося наступного разу. АЛЕ: Зараз в моді фони, що займають цілу сторінку. Майстри з досвідом вже навчилися робити їх легкими на байтність (за рахунок зменшення кількості використаних кольорів - про це вже говорилося не раз, і все одно повторити ще раз не завадить) та оригінальними-преоригінальними (дивіться малюнок з сайту Блендера, програми 3-вимірної графіки).
|
|
|||||||||||||
| |||||||||||||||
|
Ідея проекту, програмування, HTML, CSS, дизайн,
редагування та переклад текстів - Дідок Олександр. | |||||||||||||||
Пісня "Безсилий"+mp3