1.
Работа с курсором мыши.
1.10 Наведение мыши на элементы формы
Код HTML:
<html>
<body>
<script language="javascript" type="text/javascript">
<!--
function OnMouseOver() {
myText.innerText = "Курсор над кнопкой";
}
function OnMouseOut() {
myText.innerText = "Курсор бродит по странице";
}
// -->
</script>
<input id="myButton" type="button" value="button" language="javascript" onmouseover="return OnMouseOver()" onmouseout="return OnMouseOut()" />
<br/>
<span id="myText"></span>
</body>
</html> 1.11 Подсказки при наведении на ссылки.
Код HTML:
<!--HTML код-->
<html>
<body>
<table onmouseout=show(0.1);>
<tr><td>
<table>
<tr><td> <a href=yourlink.html onmouseover=show(1);>Здесь ваша ссылка №1</a></td></tr>
<tr><td> <a href=yourlink.html onmouseover=show(2);>Здесь ваша ссылка №2</a></td></tr>
</table>
</td>
<td id=desc valign=top> Здесь будут появляться подсказки</td></tr>
</table>
</body>
</html> Код HTML:
<!-- JavaScript -->
<SCRIPT LANGUAGE="JavaScript">
function show(n)
{
var cdesc; switch (n)
{
case 0.1: cdesc="Ваш текст, который будет по умолчанию";
break;
case 1: cdesc="Текст, при наведении на ссылку 1";
break;
case 2: cdesc="Текст, при наведении на ссылку 2";
break;
}
desc.innerText=cdesc;
}
</SCRIPT> 1.12 Изменение цвета фона
Код HTML:
<html>
<body>
<table width=60% border=1 cellspacing=0 cellpadding=4 bordercolor=#333333 align=center>
<tr>
<td align=center bgcolor=#CCCCCC onMouseOver="this.style.background='#FFCC33'" onMouseOut="this.style.background='#CCCCCC'">
<a href="link1.htm">Пункт 1</a></td>
<td align=center bgcolor=#CCCCCC>
<a href="link2.htm">Пункт 2</a></td>
</tr>
</table>
</body>
</html>
1.13 Создание ячейки как ссылки
Код HTML:
<html>
<body>
<table width=60% border=1 cellspacing=0 cellpadding=4 bordercolor=#333333 align=center>
<tr>
<td align=center bgcolor=#CCCCCC onMouseOver="this.style.background='#FFCC33'" onMouseOut="this.style.background='#CCCCCC'" onClick="document.location='1.html'" style="cursor: hand">
<a href="link1.htm">Пункт 1</a></td>
<td align=center bgcolor=#CCCCCC>
<a href="link2.htm">Пункт 2</a></td>
</tr>
</table>
</body>
</html>
1.14 Изменение свойств ячейки
Код HTML:
<!--HTML код-->
<html>
<body>
<table width=60% border=1 cellspacing=0 cellpadding=4 bordercolor=#333333 align=center>
<tr>
<td align=center bgcolor="#CCCCCC" ID="c1">
<a href="link1.htm" onMouseOver="newColor('c1')" onMouseOut="backColor('c1')">Пункт1</a>
</td>
<td align=center bgcolor="#CCCCCC" ID="c2">
<a href="link2.htm" onMouseOver="newColor('c2')" onMouseOut="backColor('c2')">Пункт2</a>
</td>
</tr>
</table>
</body>
</html> Код HTML:
<!-- JavaScript -->
<script language="JavaScript">
function newColor(idCell) {
if (document.all) eval('document.all.'+idCell+'.style.background = "#FFCC33"');
else eval('document.getElementById("' + idCell + '").style.background = "#FFCC33"');
}
function backColor(idCell) {
if (document.all) eval('document.all.'+idCell+'.style.background = "#CCCCCC"');
else eval('document.getElementById("' + idCell + '").style.background = "#CCCCCC"');
}
</script> 1.15 Коментарии при наведение на ссылку
Код HTML:
<html>
<head>
<script>
function load(evt) {
for(i=0; i<document.links.length; i++) {
document.links[i].setAttribute("host",
document.links[i].host);
}
}
</script>
<style>
a {
color: gray;
}
a:before {
background-image: url("/img/external.link.gif");
width: 20px;
height: 20px;
}
a[host="internal.com"] {
color: red;
}
a[host="internal.com"]:before {
background-image: url("/img/internal.link.gif");
}
</style>
</head>
<body onload="load(event);">
<ul>
<li>
<a href="http://external.com/dsfsdf">http://external.com</a>
</li>
<li>
<a href="http://internal.com/internal.html">/internal.html</a>
</li>
</ul>
</body>
</html> 1.16 Наведение на img
первый способ:
Код HTML:
<HTML><HEAD>
<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)
x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v3.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}
}
//--> </script> </HEAD> <BODY onLoad="MM_preloadImages('1.gif','2.gif')">
<P ALIGN="CENTER">
<img name="Image1" alt="Text" border="0" src="1.gif"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image1','','2.gif',1)">
</P></BODY></HTML> второй способ:
Код HTML:
<a href="xlam.htm">
<img src="xlam1.gif" WIDTH="120" HEIGHT="24" alt="XLAM" border="0" onMouseover="this.src='xlam2.gif' " onMouseout="this.src='xlam1.gif'">
</a>
и там и там всё работает одинакого.
1.17 Проигрывание wav, наведением на объект
Код HTML:
<HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var strOver = "Data.wav";
var strClick = "Data.wav";
var a = new Array("never", "say", "die");
for (var i = 0; i < a.length; i++)
document.writeln('<p><a href="#"'
+ ' onmouseover="soundIt(false)"'
+ ' onclick="soundIt(true)">'
+ a[i] + '</a></p>');
function soundIt(cause)
{
sounder.src = (cause ? strClick : strOver);
}
//-->
</SCRIPT>
<bgsound id="sounder"/>
</BODY>
</HTML>
</sample> 1.14 Изменение свойств ячейки
1.18 Координаты курсора мышки при нажатии на кнопку
Код HTML:
<script language="JavaScript">
<!--
window.captureEvents(Event.CLICK);
window.onclick= displayCoords;
function displayCoords(e) {
alert("x: " + e.pageX + " y: " + e.pageY); }
// -->
</script> 1.19 При щелчке мыши не выезжает контекстное меню
Код HTML:
document.oncontextmenu = function(){return false;};
1.20 Смена курсора мыши
Код HTML:
function changeCursor(obj,i)
{
t=i;
if(i==0)t="DEFAULT"
else if(i==1)t="CROSSHAIR"
else if(i==2)t="HEND"
else if(i==3)t="MOVE"
else if(i==4)t="TEXT"
else if(i==5)t="WAIT"
obj.style.cursor=t;
}
Изменение курсора над ссылкой
OnMouseOver="changeCursor(this,1)" href="my_file.htm">Ссылка</a> Пример Меню на javascript
:
Код HTML:
<script type="text/javascript">
var id_menu = new Array('sub_menu_1','sub_menu_2','sub_menu_3','sub_menu_4','sub_menu_5','sub_menu_6','sub_menu_7','sub_menu_8');
function allclose() {
for (i=0; i < id_menu.length; i++){
document.getElementById(id_menu[i]).style.display = "none";
}
}
function openMenu(id){
for (i=0; i < id_menu.length; i++){
if (id != id_menu[i]){
document.getElementById(id_menu[i]).style.display = "none";
}
}
if (document.getElementById(id).style.display == "block"){
document.getElementById(id).style.display = "none";
}else{
document.getElementById(id).style.display = "block";
}
}
</script> Код HTML:
<style type="text/css">
#menu_body{background:#81A192;width:200px}
#menu_body ul li{list-style-type:none;border-bottom:1px solid #fff;margin-left:-40px;padding-left:7px}
#menu_body ul li a{color:#fff;font-family:verdana,arial,sans-serif;text-decoration:none}
#menu_body ul li ul li{border:0;list-style-type:square;color:#fff;list-style-position:inside}
#menu_body ul li ul{border-top:1px solid #fff;margin-left:-7px;padding-left:50px}
</style> Код HTML:
</head>
<body onload="allclose()">
<div id="menu_body">
<ul>
<li><a href="#" onclick="openMenu('sub_menu_1');return(false)">menu 1</a>
<ul id="sub_menu_1">
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>
<li><a href="#" onclick="openMenu('sub_menu_2');return(false)">menu 2</a>
<ul id="sub_menu_2">
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>
<li><a href="#" onclick="openMenu('sub_menu_3');return(false)">menu 3</a>
<ul id="sub_menu_3">
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>
<li><a href="#" onclick="openMenu('sub_menu_4');return(false)">menu 4</a>
<ul id="sub_menu_4">
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>
<li><a href="#" onclick="openMenu('sub_menu_5');return(false)">menu 5</a>
<ul id="sub_menu_5">
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>
<li><a href="#" onclick="openMenu('sub_menu_6');return(false)">menu 6</a>
<ul id="sub_menu_6">
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>
<li><a href="#" onclick="openMenu('sub_menu_7');return(false)">menu 7</a>
<ul id="sub_menu_7">
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>
<li><a href="#" onclick="openMenu('sub_menu_8');return(false)">menu 8</a>
<ul id="sub_menu_8">
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>
</ul>
</div>
</body> Отредактируйте это меню под себя :cool: