ХАТА МОЯ | ПОРТФОЛІО | ХРИСТИЯНИНУ | ПОЧИТАТИ | МОЄ ЖИТТЯ | ФОТОАЛЬБОМ | ЗВ'ЯЗОК |

Один на один с FreeBSD
З 24-го квітня 2006-го року купуйте нову книгу по операційній системі FreeBSD: "Один на один с FreeBSD".


 Зміст книги та уривки текстів -->>

 Buglist:11 Додати новий Переглянути існуючий список

Написана - російською мовою
Вміщує - 704 сторінки
Наклад - 2500 екземплярів
Рекомендована ціна - 75грн
Рік видання - 2006
Видавництво - MK-PRESS
Автор - Дідок О.О.
ISBN 966-8806-00-X
 • Оновлення [10]:
[18.11.2007] Протиріччя
[18.11.2007] Любові тепло
[28.10.2006] Пісня "Не..."+mp3
[23.10.2006] "Не думаючи жити/філософія сучасного життя"
[23.10.2006] Пісня "Ластівка"+mp3
[23.10.2006] Пісня "Безсилий"+mp3
[29.08.2006] Моя поезія
[29.08.2006] "Я - ти, і я - не ти"
[15.06.2006] "Кохання гра"
[07.06.2006] "Пам'ятаю..."
 • Новини сайту [3]:

[16.05.2006] 21-го травня вийшла моя книга по операційній системі FreeBSD. Пишу нову книгу по PHP. Дякую за підтримку ...


[24.02.2006] Добавив систему рейтингiв. Тепер ви можете оцiнити на свiй смак кожну статтю за п'ятибальною системою. Скоро напишу сторiнку рейтингових статей i систему коментарiв. Очiкуйте)


[19.01.2006] Життя радісне, коли на нього дивишся з добрими очима і гарним настроєм). Так от останні чудові фотографії від мене можна знайти тутечки, доречі, там можна знайти і мене, якщо когось зацікавить це)). Ммм. Дя - поповнив рахунок на хостинг ще на рік, збільшивши пакет)) Тепер у мну 3гіга місця, багато піддоменів, достатньо баз данних і навіть можливість повісити декілька доменів у себе - не погано, коротко кажучи. Ну добре, досить, ато вже не новина - а ціла стаття про моє життя-буття)) Заходьте ще)


Остання корекція: 01.01.2003
/0 
 Вперше опубліковано: 01.01.2003
Сторінку відкрито: 816Коментарiв: 0ДодатиЧитатиДопомога
ПОЧИТАТИІнформ. технологіїWeb ...Швидкі пальчики

Швидкі пальчики 05

Інше в підрозділі :

 Швидкі пальчики 01[2003-01-01]  Швидкі пальчики 02[2003-01-01]  Швидкі пальчики 03[2003-01-01]  Швидкі пальчики 04[2003-01-01]  Швидкі пальчики 06[2003-01-01]

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

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

Ох... Якби ж то намалювати цілу картинку, а потім частинам цієї картинки присвоїти потрібні лінки... Ну і що з того, що така картинище вантажитиметься довше, ніж оті маленькі, зібрані в таблицю - а я її оптимізую, зменшу розмір, а якщо колір трішечки постраждає, то не всі ото помітять...(Так оце ми собі думаємо). Має ж бути для того щось у HTML!

Є, не сумнівайтеся, і це навіть дуже нескладно.

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

Як нам ці координати вираховувати? Ну, признаюсь, що є спеціальні програмки для формування IMAGEMAPS. Але під рукою їх в нас поки що нема. Є, наприклад, PAINT. Для можливості завантажитись в нього зробимо варіант картинки в bmp-форматі. Соваємо собі мишкою по вершинах наших областей і дивимось на координати, що показує нижня стрічка (десь там справа). Ну ми, звичайно, справжні лінюхи і вже маємо під рукою картинку, роздруковану на принтері. Відмічаємо потрібні вершини і приписуємо до них відповідні координати, так як є, без змін.

Очевидно, що першою йде горизонтальна координата, а другою вертикальна. А ось несподіванкою для всіх, особливо для палко відданих справі побудови всіляких графіків функцій математиків, буде розміщення початку координат - це верхній лівий кут малюночка. І браузер, і PAINT в цьому питанні на диво одноголосні.

Текст готової приблизної IMAGEMAP для картинки з квадратовими кнопками виглядатиме ось так:

<html><head><title>Imagemap #1</title>
<map name=”number_one”>
<area shape=”rect” coords=”177,6,228,56" href=”contact.html” alt=”Contact us!”>
<area shape=”rect” coords=”81,152,159,195" href=”home.html” alt=”HOME”>
<area shape=”rect” coords=”164,152,243,195" href=”aboutme.html” alt=”About me...”>
<area shape=”rect”
coords=”246,152,324,194"
href=”services.html” alt=”SERVICES”>
<area shape=”rect” coords=”82,217,323,270" href=”index.html” onMouseOver=”alert(‘Hi all!’);return true;”>
</map>
</head>
<body>
<center>
<img src=”area0.jpg” width=”417" height=”323" usemap=”#number_one” border=”0">
</center>
</body></html>

Тепер роздивимося навколо. Карту малюнка описує тег <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>
<map name=”number_two”>
<area shape=”poly” coords=”20,16,88,13,88,26,102,27,102,62,86,62,86,72,20,70,20,16" href=”mypage.html”>
<area shape=”circle” coords=”142,78,14" href=”links.html”>
<area shape=”circle” coords=”191,112,14" href=”aboutme.html”>
<area shape=”circle” coords=”198,174,14" href=”contactme.html”>
<area shape=”circle” coords=”91,168,60" href=”home.html”>
</map>
</head>
<body>
<center><img src=”area.jpg” width=”320" height=”256" usemap=”#number_two” border=”0">
</center>
</body></html>

Отже, 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-вимірної графіки).



Всього ресурсів на сайті: 84
Востаннє сайт змінювався: 25.02.2006
Змінено на: PHS-7.3-STABLE версію
Ви 83937 відвідувач сайту
Сторінку згенеровано за 0.029 секунд

 Жарти

[2003-05-07] ...


 Швидкі пальчики 01

[2003-01-01] За побажаннями тих, хто вважає своїми знаряддями праці клавіатуру і мишку, кому вже нудно пасивно користуватися Інтернетом, і права долонька свербить від невимовного хотіння вклеїти свою сторінку ...


 Швидкі пальчики

[2003-01-01] ...


 HTML Digest

[2003-01-01] ...


 ПОЧИТАТИ

[0000-00-00] ...


ХАТА МОЯ | ПОРТФОЛІО | ХРИСТИЯНИНУ | ПОЧИТАТИ | МОЄ ЖИТТЯ | ФОТОАЛЬБОМ | ЗВ'ЯЗОК |