8 (800) 333-3041Звонок бесплатный для
всех регионов России
Язык JavaScript Оглавление Навигация по сайту

Подсветка пунктов меню

За два года работы по созданию веб-сайтов мы применяли JavaScript всего несколько раз, в основном для подсветки пунктов меню при наведении курсора мышки. Практика показала, что на большинстве сайтов JavaScript вообще не используется. Прежде, чем приступить к написанию этой главы, я просмотрел ресурсы в Интернет и книги, посвященные JavaScript, надеясь найти действительно оправданное применение Java-скриптов. Но мои поиски не увенчались успехом. Мне попадались примеры изменения шрифта, цвета фона, калькуляторы и другие, на мой взгляд, совершенно бесполезные вещи в плане создания веб-сайта для профессионального разработчика.
Одним из самых распространенных использовании JavaScript, безусловно, является скрипт для сбора информации о настройках клиента. Самый распространенный, потому что он используется на каждой странице, где установлен счетчик посещений. Все наиболее распространенные счетчики: list.ru, rambler.ru, spylog.ru и др. используют JavaScript для сбора информации и ведения статистики. Но он вам пригодится, только если вы решите написать свою систему учета посещений веб-сайтов. Как уже было сказано, наиболее полезным для сайтостроителя будет скрипт для подсвечивания меню, т.е. для замены одной картинки на другую. Здесь и далее приведены примеры использования JavaScript'ов без пояснения самого кода JavaScript. Целью данной книги является построение веб-сайтов, а не конкретно JavaScript. Если вас заинтересует сам язык JavaScript, то могу порекомендовать Джерри Браненбау "JavaScript", издательство "Питер", оригинал вышел в 1999 в издетельстве O'REILLY.
Для переключения картинок вам необходимо включить следующий код в заголовке 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];
      }
   }//if
}

function MM_findObj(n, d)
{ 
  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()
{
  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>
В команде body надо сделать предварительную загрузку всех картинок второго плана. Как видно ниже, через запятую в апострофах передаются пути к этим картинкам.
<body onload="MM_preloadImages(
'image/p03a.gif', 
'image/b26a.gif',
'image/b25a.gif',
'image/b24a.gif',
'image/b23a.gif',
'image/b22a.gif',
'image/p13a.gif',
'image/b24a.gif',
'image/b25a.gif',
'image/b26a.gif');">
Теперь переходим к рассмотрению кода для переключения картинки при наведение курсора мыши. В чистом виде он будет выглядеть так:
<img 
src="image/p03.gif"  alt="Home" width="92" height="43" border="0" 
onMouseOut="MM_swapImgRestore()" 
onMouseOver="MM_swapImage('home','','image/p03a.gif',0)"
name="home">
При наведении курсора мышки на домик, его картинка поменяется на другую, как-будто он подсветился. Home
Далее следует пример с сайта http://www.oxygensoftware.com, где можно посмотреть реальное использование смены картинок пунктов меню и насколько это улучшает внешний вид сайта. Самое главное, что даже если у пользователя не поддерживается JavaScript или он отключен, то сайт все равно будет нормально просматриваться. Не будет только переключения картинок.
<table border="0" width="780" height="108" cellspacing="0" cellpadding="0">
  <tr>
    <td width="122" height="108"><img border="0" 
    usemap="#mm" src="image/p00.gif" width="122" height="108"></td>
<map name="mm">
<area shape="rect" coords="0,0,120,88"  href="/index.shtml">          
<area shape="rect" coords="3,89,46,103" href="/map/index.shtml">
<area shape="rect" coords="86,88,114,105" href="http://www.oxygensoftware.ru" 
alt="Russian"></map>       


    <td width="658" height="108"><img src="image/p01.gif" width="299" 
    height="43"><img
    src="image/p02.gif" width="267" height="43"><a href=/index.shtml 
onMouseOut="MM_swapImgRestore()" 
onMouseOver="MM_swapImage('h1','','image/p03a.gif',0)"><img 
src="image/p03.gif"  alt="Home" width="92" height="43" border="0" 
name="h1"></a><img src="image/p11.gif" width="299" 
height="42"><img src="image/p12.gif"
    width="267" height="42"><a 
href="/feedback/index.shtml" 
onMouseOut="MM_swapImgRestore()" 
onMouseOver="MM_swapImage('h2','','image/p13a.gif',0)"><img 
src="image/p13.gif" width="92" height="42" border="0"
    name="h2" alt="Feedback"></a><img src="image/b21.gif" 
    width="277" height="23" usemap="#Map" border="0"><map 
    name="Map"><area shape="rect" coords="-4,4,250,20" 
    href="mailto:company@oxygensoftware.com"></map><a 
href=/maillist/index.shtml
onMouseOut="MM_swapImgRestore()" 
onMouseOver="MM_swapImage('m1','','image/b22a.gif',0)"><img 
src="image/b22.gif"
    width="85" height="23" border="0" name="m1"></a><a 
href=/links/index.shtml 
onMouseOut="MM_swapImgRestore()" 
onMouseOver="MM_swapImage('m2','','image/b23a.gif',0)"><img 
src="image/b23.gif" width="74"
 height="23" border="0"
    name="m2"></a><a href=/feedback/index.shtml 
onMouseOut="MM_swapImgRestore()" 
onMouseOver="MM_swapImage('m3','','image/b24a.gif',0)"><img
    src="image/b24.gif" width="74" height="23" border="0" 
    name="m3"></a><a 
href=/guestbook/index.shtml
onMouseOut="MM_swapImgRestore()" 
onMouseOver="MM_swapImage('m4','','image/b25a.gif',0)"><img
 src="image/b25.gif"
    width="74" height="23" border="0" name="m4"></a><a 
href=/forum/index.shtml 
onMouseOut="MM_swapImgRestore()" 
onMouseOver="MM_swapImage('m5','','image/b26a.gif',0)"><img 
src="image/b26.gif" width="74" height="23" border="0"
    name="m5"></a></td>
  </tr>
</table>


Russian
HomeFeedback

Eng
Наверх