Форум web мастеров - Devil Art - Показать сообщение отдельно

Kurbatov · 08.01.2008, 13:23

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: