Старый 08.01.2008, 13:23   #1 (permalink)
System Engineer
 
Аватар для Kurbatov
 
Специализация: Кодер
Регистрация: 06.12.2007
Адрес: РФ, РК, Воркута
Сообщений: 882
Репутация: 406
Номер ICQ 628831
Номер ICQ 632381
По умолчанию FAQ по JavaScript

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:
__________________
Kurbatov Blog
Kurbatov вне форума  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post! Добавить в закладки Google
Ответить с цитированием
Старый 08.01.2008, 13:26   #2 (permalink)
Администратор
 
Аватар для Devil
 
Специализация: Кодер
Регистрация: 05.12.2007
Адрес: Москва
Сообщений: 3,695
Репутация: 1724
Номер ICQ 599613
По умолчанию

О, гудно +1. Я такой приём на одном из форумов юзал уже. Кстати. ява меню это как правило очень красиво и достаточно удобно, но поисковики почеу то его не любят
__________________
Мы те, кто мы есть
Мой личный блог
Devil на форуме  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post! Добавить в закладки Google
Ответить с цитированием
Старый 09.01.2008, 19:50   #3 (permalink)
Местный
 
Аватар для Gesper
 
Специализация: Кодер
Регистрация: 09.01.2008
Сообщений: 166
Репутация: 45
По умолчанию

знаю два варианта создания меню с использованием скриптов.
Один с генерацией в процесее просмотра, а другой просто позиционирование и показ менюшки с готовым ХТМЛ кодом.
вот второй вариант, по идеи, поисковик должен индексировать.. ципляться за него.
Gesper вне форума  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post! Добавить в закладки Google
Ответить с цитированием
Старый 12.01.2008, 09:14   #4 (permalink)
Администратор
 
Аватар для Devil
 
Специализация: Кодер
Регистрация: 05.12.2007
Адрес: Москва
Сообщений: 3,695
Репутация: 1724
Номер ICQ 599613
По умолчанию

Gesper, кстати да, очень актуальная проблема, когда поисковик не цепляет яву. Хотя еслиэто на форуме, то нечего страшного нету, в любом случае поисковику нафик не надо теже Спрака, Мой кабинет и так далее
__________________
Мы те, кто мы есть
Мой личный блог
Devil на форуме  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post! Добавить в закладки Google
Ответить с цитированием
Старый 12.01.2008, 10:03   #5 (permalink)
System Engineer
 
Аватар для Kurbatov
 
Специализация: Кодер
Регистрация: 06.12.2007
Адрес: РФ, РК, Воркута
Сообщений: 882
Репутация: 406
Номер ICQ 628831
Номер ICQ 632381
По умолчанию

админка)))
__________________
Kurbatov Blog
Kurbatov вне форума  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post! Добавить в закладки Google
Ответить с цитированием
Старый 13.01.2008, 22:53   #6 (permalink)
Местный
 
Аватар для Gesper
 
Специализация: Кодер
Регистрация: 09.01.2008
Сообщений: 166
Репутация: 45
По умолчанию

Это мечта поисковика ))))
Gesper вне форума  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post! Добавить в закладки Google
Ответить с цитированием
Старый 16.03.2008, 21:49   #7 (permalink)
Новичок
 
Аватар для Владислав
 
Регистрация: 16.03.2008
Адрес: Воткинск, Удмуртия, Россия
Сообщений: 6
Репутация: 1
Номер ICQ 450402039
По умолчанию Ответ: FAQ по JavaScript

Вопросег по тэгу link. Какие могут быть значения параметра rel? и как их использовать?
__________________
I cannot seem to keep from freaking out!
Владислав вне форума  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post! Добавить в закладки Google
Ответить с цитированием
Старый 16.03.2008, 23:34   #8 (permalink)
Администратор
 
Аватар для Devil
 
Специализация: Кодер
Регистрация: 05.12.2007
Адрес: Москва
Сообщений: 3,695
Репутация: 1724
Номер ICQ 599613
По умолчанию Ответ: FAQ по JavaScript

Владислав, ну попробуем перечислить
Параметры у тэга могут быть
Код:
href - Путь к связываемому файлу. 
rel - Определяет отношения между нынешним файлом и тот на который идёт ссылка
type - MIME-тип данных.
Так же существует параметр Media у которого существует ряд аргументов
Код:
all -Все устройства .
screen - Экран монитора.
print - Печатающее устройство вроде принтера.
projection - Проектор.
braille - Устройства, основанные на системе Брайля, которые предназначены для слепых людей.
speech - Речевые синтезаторы. Сюда, например, можно отнести речевые браузеры.
Важно помнить что всегда по умалчанию стоит аргумент screen
Ну и в заключение класиика жанра, это Параметр REL
синтаксис параметра
Код:
<link rel="тип">
Аргументы
Код:
stylesheet - Определяет, что подключаемый файл хранит таблицу стилей (CSS).
application/rss+xml - Файл в формате XML для описания ленты новостей, анонсов статей.
Ну вотвроде вот так
P.S. Владислав, На будущее, создавайте темы лучше если у вас конкретный вопрос в соотвутсвующих разделах Например этот вопрос актуальнее был бы в разделе о ХТМЛ и КСС Спасибо
__________________
Мы те, кто мы есть
Мой личный блог
Devil на форуме  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post! Добавить в закладки Google
Ответить с цитированием
Этот пользователь отблагодарил Devil за это сообщение:
Kurbatov (18.03.2008)
Старый 18.03.2008, 02:43   #9 (permalink)
System Engineer
 
Аватар для Kurbatov
 
Специализация: Кодер
Регистрация: 06.12.2007
Адрес: РФ, РК, Воркута
Сообщений: 882
Репутация: 406
Номер ICQ 628831
Номер ICQ 632381
По умолчанию Ответ: FAQ по JavaScript

Devil, взял за меня все ответил
__________________
Kurbatov Blog
Kurbatov вне форума  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post! Добавить в закладки Google
Ответить с цитированием
Старый 18.03.2008, 04:53   #10 (permalink)
Администратор
 
Аватар для Devil
 
Специализация: Кодер
Регистрация: 05.12.2007
Адрес: Москва
Сообщений: 3,695
Репутация: 1724
Номер ICQ 599613
По умолчанию Ответ: FAQ по JavaScript

Kurbatov,дык ты появляешсо раз в двое суток )
__________________
Мы те, кто мы есть
Мой личный блог
Devil на форуме  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post! Добавить в закладки Google
Ответить с цитированием
Ответ


Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)
 
Опции темы
Опции просмотра

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения
Быстрый переход