| Язык 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">
При наведении курсора мышки на домик, его картинка поменяется на другую,
как-будто он подсветился.
Далее следует пример с сайта 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>