едно малко уроче - клечка как да си направиме
добре изглеждащо меню по възможно най лесния начин
със съвсем малко javascript
изтегли кода:download
1: правиме си една табличка
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Page Titletutorial</title>
<link rel="stylesheet" href="/css/master.css" type="text/css" media="screen" title="no title" charset="utf-8" />
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</body>
</html>
border - ръбовете на таблицата http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_borderscellspacing - какво ще е разтоянието от външната страна на клетките на таблицата (ще рече ,че с това променяме ратоянието между отделните клетки )
cellpading - какво ще разтоянието между клетката и съдържанието в нея ()
всичко е нула защото не искаме да имаме разтояние между клетките нито между самата клетка и съдържанието
защото вътре ще сложиме картинките и ако има разтояние ще се получат грозни линии, разделящи картинките
след това взимаме няколко картинки
, поставяме ги в директорията където е хтмл файла
после отиваме в хтмл файла и поставяме тагове в хтмл файла за да се видят картинките на страницата
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Page Titletutorial</title>
<link rel="stylesheet" href="/css/master.css" type="text/css" media="screen" title="no title" charset="utf-8" />
</head>
<body>
<table style="clear:left;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="menu1.png" width="135" height="36">
</td>
</tr>
<tr>
<td>
<img src="menu2.png" width="135" height="23">
</td>
</tr>
<tr>
<td>
<img src="menu3.png" width="135" height="33"></td></tr>
</td>
</tr>
</table>
</body>
</html>
след това в хтмл файла ограждаме img таговете в а таг за да може като кликнеме на бутона да се отвори нова страница
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Page Titletutorial</title>
<link rel="stylesheet" href="/css/master.css" type="text/css" media="screen" title="no title" charset="utf-8" />
</head>
<body>
<table style="clear:left;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="#">
<img src="menu1.png" width="135" height="36">
</a>
</td>
</tr>
<tr>
<td>
<a href="#">
<img src="menu2.png" width="135" height="23">
</a>
</td>
</tr>
<tr>
<td>
<a href="#">
<img src="menu3.png" width="135" height="33"></td></tr>
</a>
</td>
</tr>
</table>
</body>
</html>
ще трябва да поставиме малко css код за да управиме малко разположението на картинките(имат доста неприятни ръбове - поставиме ли картинка в линк се получава така)
затова, слагаме този код в началото , той прави ръба на тага img с дължина 0px
display:block; - това го поставяме за да си гарантираме че img тага ще бъде интерпретиран като блоков елемент а не като текст (това управя това че се получава разтояние между вътрешната страна на клетката и картинката)
(за да сложиме цсс код се ползва специален таг style
в него се описва как са форматирани отделните елементи (цвят , шрифт , ширина дължина , дали е подчертано , дали има картинка за фон..) за да направиме това пъров слагаме
<style type="text/css" media="screen"> </style>и в него описваме колко шарени ще са нашите тагове за да станме това трябва да описваме за определен таг
<style type="text/css" media="screen">
име на таг{описание}
</style>
в случая ще промениме шаренията на img тага
<style type="text/css" media="screen">
img{описание}
</style>
може например да му зададем дължина примерно 100px
<style type="text/css" media="screen">
img{width:100px;}
</style>
но това са подробности
)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Page Titletutorial</title>
<link rel="stylesheet" href="/css/master.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<style type="text/css" media="screen">
img{display:block;border:0px;}
</style>
</head>
<body>
<table style="clear:left;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="#">
<img src="menu1.png" width="135" height="36">
</a>
</td>
</tr>
<tr>
<td>
<a href="#">
<img src="menu2.png" width="135" height="23">
</a>
</td>
</tr>
<tr>
<td>
<a href="#">
<img src="menu3.png" width="135" height="33"></td></tr>
</a>
</td>
</tr>
</table>
</body>
</html>
И вече имаме меню.
За да изглежда малко по добре ,може да направиме така че когато посочиме картинка - да шава нещо.
Сега ще добавиме такава функционалност , трябва когато посочиме с мишката картинката , да се случва нещо.
Това става като зададеме в тага
с onmousemove (когато мишката премине върху тага )="(нещот се изпълнява)"
примерно
<img src="...." onmousemove="alert('blabla');">когато мишката премине над тага се изпълнява alert('blabla');
alert - функция, която извежда съобщение
'blabla ' - самото съобщение
когато пишеме нещо си ="друго нещо си се изпълнява"
трябва да внимаваме за кавичките дали
ако външните кавички са "" вътре не трябва да поставяме "" -
например - onmousemove="alert("")" - грешно
onmousemove='alert('')' - също е грешно
onmousemove="alert('blabla');" - правилно
за сега имаме когато мишката премине и се показва съобщение
на нас ни трябва когато мишката е отгоре да се сменя картинката , а когато се махме мишката да се връща обратно предната картинка
събитието на което отговаря махането на мишката от тага е
onmouseout
за да започне да се сменя картинката ще трябва да сменяме стойността на свойството на тага src , което задава пътя до картинката
<img src="път до картинката">
но за да го промениме това свойство трябва да кажеме на кой таг го променяме
в случая това става по няколко начина -
единия е в самият таг да сложиме уникален идентификатор с който ще достъпваме тага,
<img id="име на идентификатора" src="път до картинката">
и после където се изпълнява функцията onmousemove да викнеме тага ,който отговаря на този идентификатор
по стандартния начин - onmousemove="document.getElementById('име на идентификатора')"
и по нестандартен начин - с библиотека която предварително сме я включили най горе в тялото на хтмл файла и после сме я сложили в директорията където си държиме файловете
библиотека:download
(
така се казва че ще използваме външни javascript файлове
type="text/javascript" - тип на използвания файл
src="js/prototype.js" - път до файла
<script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/effects.js"></script>
съответно си копираме няколкото файчета на библиотеката в js директория
)
за да извикаме тага , съответстващ на идентификатора ползваме функиця на библиотеката $('име на елемента')
има и още един начин за достъп до елемент - чрез this
пример
<img onmousemove="this.нещо си" src="път до картинката">this показва тага от където е изпълнен
нещо като указател към тага в който се намира javascript кода
,до тук достъпихме само нашия таг (
<img id="име на идентификатора" src="път до картинката">) , но само това
не е достатъчно - трябва да смениме стойността на свойтвото за пътя на картинката
Tова става като добавиме .src='нов път на картинката'
например
<img id="име на идентификатора" onmousemove="this.src='нов път'" src="път до картинката">или
<img id="име на идентификатора" id="img1" onmousemove="$('img1').src='нов път'" src="път до картинката">
или<img id="име на идентификатора" id="img1" onmousemove="document.GetElementById('img1').src='нов път'" src="път до картинката">
Да приложиме това на практика :
Първо си нарисуваме 3 картинки които да съответстват на състоянието когато посочиме с мишка
h_menu1.png, h_menu2.png,h_menu3.png
Поставяме ги в директорията и сменяме малко кода в хтмл документа
,така че да направиме да се сменят като посочиме
(когато мишката премине (върху картинката е - тогава е h_menu1.png картинката) , когато се махне мишката - menu1.png картинката е )
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>1</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script>
<script type="text/javascript" src="js/builder.js"></script>
<style type="text/css" media="screen">
img{display:block;border:0px;}
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="#1">
<img src="menu1.png" width="135" height="36" onmousemove="this.src='h_menu1.png'" onmouseout="this.src='menu1.png'" >
</a>
</td>
</tr>
<tr>
<td>
<a href="#1">
<img src="menu2.png" width="135" height="23" onmousemove="this.src='h_menu2.png'" onmouseout="this.src='menu2.png'" >
</a>
</td>
</tr>
<tr>
<td>
<a href="#2">
<img src="menu3.png" width="135" height="33" onmousemove="this.src='h_menu3.png'" onmouseout="this.src='menu3.png'">
</a>
</td>
</tr>
</table>
</body>
</html>
И вече си имаме меню което шава без да ползваме разни готови скриптове и без да ползваме цсс за определяне на разположението на елемнтите на менютоНо ние искаме да го направиме да шава много затова ще направиме следното:
нарисуваме си още две картинки
и ги поставяме в нова таблица , като съответно си слагаме картинките в a тагове
и съответно правиме когато се посочат да се сменят
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="#1">
<img src="menu22.png" width="135" height="23" onmousemove="this.src='h_menu22.png'" onmouseout="this.src='menu22.png'" >
</a>
</td>
</tr>
<tr>
<td>
<a href="#1">
<img src="menu22.png" width="135" height="23" onmousemove="this.src='h_menu22.png'" onmouseout="this.src='menu22.png'" >
</a>
</td>
</tr>
<tr>
<td>
<a href="#1">
<img src="menu22.png" width="135" height="23" onmousemove="this.src='h_menu22.png'" onmouseout="this.src='menu22.png'" >
</a>
</td>
</tr>
<tr>
<td>
<a href="#1">
<img src="menu22.png" width="135" height="23" onmousemove="this.src='h_menu22.png'" onmouseout="this.src='menu22.png'" >
</a>
</td>
</tr>
</table>
После вмъкваме нашата таблица в таг наречен div - много често ползван таг за позициониране за задаване на фон ... в цсстова го правиме поради причината ,че на таблицата не можеме да зададеме височина - е можеме да я направиме да кажиме - 200px висока , но не можеме просто да укажеме на table тага да е примерно 1px висок (колкото тънка линийка) защото височината (широчината )на таблицата зависят и от текста - тоест най малката възможна визсочина на таблицата е височината на всички редове взети заедно (ако няма текст или нищо друго може и да стане таблицата 10 px да речеме)
Затова се налага да я поставиме в този таг , на който не е проблем да промениме височината независимо от съдържанието.
<div>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="#1">
<img src="menu22.png" width="135" height="23" onmousemove="this.src='h_menu22.png'" onmouseout="this.src='menu22.png'" >
</a>
</td>
</tr>
<tr>
<td>
<a href="#1">
<img src="menu22.png" width="135" height="23" onmousemove="this.src='h_menu22.png'" onmouseout="this.src='menu22.png'" >
</a>
</td>
</tr>
<tr>
<td>
<a href="#1">
<img src="menu22.png" width="135" height="23" onmousemove="this.src='h_menu22.png'" onmouseout="this.src='menu22.png'" >
</a>
</td>
</tr>
<tr>
<td>
<a href="#1">
<img src="menu22.png" width="135" height="23" onmousemove="this.src='h_menu22.png'" onmouseout="this.src='menu22.png'" >
</a>
</td>
</tr>
</table>
</div>
Сега ще вмъкнеме тази таблица в нашето меню от преди малко
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>1</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<style type="text/css" media="screen">
img{display:block;border:0px;}
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" >
<tr>
<td>
<a href="#1">
<img src="menu1.png" width="135" height="36" onmousemove='this.src="h_menu1.png"' onmouseout="this.src='menu1.png'" >
</a>
</td>
</tr>
<tr>
<td>
<a href="#1">
<img src="menu2.png" width="135" height="23" onmousemove="this.src='h_menu2.png'" onmouseout="this.src='menu2.png'" >
</a>
</td>
</tr>
<tr>
<td>
<div >
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="#1">
<img src="menu22.png" width="135" height="23" onmousemove="this.src='h_menu22.png'" onmouseout="this.src='menu22.png'" >
</a>
</td>
</tr>
<tr>
<td>
<a href="#1">
<img src="menu22.png" width="135" height="23" onmousemove="this.src='h_menu22.png'" onmouseout="this.src='menu22.png'" >
</a>
</td>
</tr>
<tr>
<td>
<a href="#1">
<img src="menu22.png" width="135" height="23" onmousemove="this.src='h_menu22.png'" onmouseout="this.src='menu22.png'" >
</a>
</td>
</tr>
<tr>
<td>
<a href="#1">
<img src="menu22.png" width="135" height="23" onmousemove="this.src='h_menu22.png'" onmouseout="this.src='menu22.png'" >
</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<a href="#2">
<img src="menu3.png" width="135" height="33" onmousemove="this.src='h_menu3.png'" onmouseout="this.src='menu3.png'">
</a>
</td>
</tr>
</table>
</body>
</html>
Сега остана само да добавим малко функционалност , така че да се случва нещо.Тоест когато кликнеме някъде да шава.
Когато кликнеме някъде се постига със следното:
onclick = "нещо си се изпълнява"например
<img src="menu2.png" width="135" height="23"
onclick="alert('blabla')" >
Това което ще се изпълнява ще трябва да го изпълняваме върху някой таг с уникален идентификаторВ случая това ще е новите елементи които добавихме , а идентификатора поставяме на div тага , защото на него ще му променяме височината , когато кликаме
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>1</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<style type="text/css" media="screen">
img{display:block;border:0px;}
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" >
<tr>
<td>
<a href="#1">
<img src="menu1.png" width="135" height="36" onmousemove='this.src="h_menu1.png"' onmouseout="this.src='menu1.png'" >
</a>
</td>
</tr>
<tr>
<td>
<a href="#1">
<img src="menu2.png" width="135" height="23" onmousemove="this.src='h_menu2.png'" onmouseout="this.src='menu2.png'" >
</a>
</td>
</tr>
<tr>
<td>
<div id="menu1" >
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="#1">
<img src="menu22.png" width="135" height="23" onmousemove="this.src='h_menu22.png'" onmouseout="this.src='menu22.png'" >
</a>
</td>
</tr>
<tr>
<td>
<a href="#1">
<img src="menu22.png" width="135" height="23" onmousemove="this.src='h_menu22.png'" onmouseout="this.src='menu22.png'" >
</a>
</td>
</tr>
<tr>
<td>
<a href="#1">
<img src="menu22.png" width="135" height="23" onmousemove="this.src='h_menu22.png'" onmouseout="this.src='menu22.png'" >
</a>
</td>
</tr>
<tr>
<td>
<a href="#1">
<img src="menu22.png" width="135" height="23" onmousemove="this.src='h_menu22.png'" onmouseout="this.src='menu22.png'" >
</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<a href="#2">
<img src="menu3.png" width="135" height="33" onmousemove="this.src='h_menu3.png'" onmouseout="this.src='menu3.png'">
</a>
</td>
</tr>
</table>
</body>
</html>
В случая сложихме идентификатор menu1Сега ще добавиме когато сме натиснали някоя от картинките да се свива тагът с идентификатор menu1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>1</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<style type="text/css" media="screen">
img{display:block;border:0px;}
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" >
<tr>
<td>
<a href="#1">
<img src="menu1.png" width="135" height="36" onmousemove='this.src="h_menu1.png"' onmouseout="this.src='menu1.png'" >
</a>
</td>
</tr>
<tr>
<td>
<a href="#1">
<img src="menu2.png" width="135" height="23" onclick="Effect.toggle('menu1', 'blind' );"
onmousemove="this.src='h_menu2.png'" onmouseout="this.src='menu2.png'" >
</a>
</td>
</tr>
<tr>
<td>
<div id="menu1" >
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="#1">
<img src="menu22.png" width="135" height="23" onmousemove="this.src='h_menu22.png'" onmouseout="this.src='menu22.png'" >
</a>
</td>
</tr>
<tr>
<td>
<a href="#1">
<img src="menu22.png" width="135" height="23" onmousemove="this.src='h_menu22.png'" onmouseout="this.src='menu22.png'" >
</a>
</td>
</tr>
<tr>
<td>
<a href="#1">
<img src="menu22.png" width="135" height="23" onmousemove="this.src='h_menu22.png'" onmouseout="this.src='menu22.png'" >
</a>
</td>
</tr>
<tr>
<td>
<a href="#1">
<img src="menu22.png" width="135" height="23" onmousemove="this.src='h_menu22.png'" onmouseout="this.src='menu22.png'" >
</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<a href="#2">
<img src="menu3.png" width="135" height="33" onmousemove="this.src='h_menu3.png'" onmouseout="this.src='menu3.png'">
</a>
</td>
</tr>
</table>
</body>
</html>
Effect.toggle('menu1', 'blind' ); Effect. - това е вградена функция на библиотеката която включихме
toggle - това нещо което проверява дали тагът се вижда и ако изпълнява анимация за скриване , ако не се вижда - анимация за появяване
'menu1' - идентификатора върху който ще го приложиме
'blind' - анимацията която ще приложиме
ScriptaculoUs
Тук има описани още ефекти други които меме да ползваме са например
Effect.toggle('menu1', 'appear' );
Effect.toggle('menu1', 'slide' );
Effect.toggle('menu1', 'blind' );
или комбинация напр
Effect.toggle('menu1', 'appear'|'slide' );
Тези неща по принцип може и сами да ги направим (анимацията)но е малко по засукано
Ще трябва да направиме провека да ли е видим елемента , после с един цикъл през някакъв интервал от време с малко да увеличаваме или намаляваме височината - например.
Естествено можете да ползвате и другите ефекти на страницата примерно правиме проверка дали се вижда и ако се изпълнява един ефект , иначе друг
<img src="menu2.png" width="135" height="23" onclick="if($('n1').style.display=='')Effect.Shrink('n1');else{Effect.Grow('n1')}"
onmousemove="this.src='h_menu2.png'" onmouseout="this.src='menu2.png'" >
<img src="menu2.png" width="135" height="23" onclick="if($('n1').style.display=='')Effect.SwitchOff('n1');else{Effect.SlideDown('n1')}">
И така крайният вариант на менюто е
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>1</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<style type="text/css" media="screen">
img{display:block;border:0px;}
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" >
<tr>
<td>
<a href="#1">
<img src="menu1.png" width="135" height="36" onmousemove='this.src="h_menu1.png"' onmouseout="this.src='menu1.png'" >
</a>
</td>
</tr>
<tr>
<td>
<a href="#1">
<img src="menu2.png" width="135" height="23" onclick="Effect.toggle('menu1', 'blind' );"
onmousemove="this.src='h_menu2.png'" onmouseout="this.src='menu2.png'" >
</a>
</td>
</tr>
<tr>
<td>
<div id="menu1" >
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="#1">
<img src="menu22.png" width="135" height="23" onmousemove="this.src='h_menu22.png'" onmouseout="this.src='menu22.png'" >
</a>
</td>
</tr>
<tr>
<td>
<a href="#1">
<img src="menu22.png" width="135" height="23" onmousemove="this.src='h_menu22.png'" onmouseout="this.src='menu22.png'" >
</a>
</td>
</tr>
<tr>
<td>
<a href="#1">
<img src="menu22.png" width="135" height="23" onmousemove="this.src='h_menu22.png'" onmouseout="this.src='menu22.png'" >
</a>
</td>
</tr>
<tr>
<td>
<a href="#1">
<img src="menu22.png" width="135" height="23" onmousemove="this.src='h_menu22.png'" onmouseout="this.src='menu22.png'" >
</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<a href="#2">
<img src="menu3.png" width="135" height="33" onmousemove="this.src='h_menu3.png'" onmouseout="this.src='menu3.png'">
</a>
</td>
</tr>
</table>
</body>
</html>