Скрипт и его настроика rollover–изображений
Скрипт при наведение обратный эффект..очень даже красиво
Этот код вставляем в блокнот и настраиваем, описание в нутри, далее сохраняем как файл js назвать можете rollover.js
Code
// Для настройки скрипта вам необходимо определить значения следующих переменных
// Переменная 'imgPath' определяет директорию с изображениями
imgPath = "images/";
// В массиве 'pictures' необходимо перечислить имена изображений
pictures = new Array("photo_1","photo_2","photo_3");
// Переменная 'suffix' определяет суффикс rollover-изображений
suffix = "_on";
// Переменная 'extension' определяет расширение файлов с изображениями
extension = "jpg";
//////////////////////////////////////////////////////////////////////////
total = pictures.length;
On_Images = new Array();
Off_Images = new Array();
for (i = 0; i < total; i++) {
On_Images[pictures[i]] = new Image();
On_Images[pictures[i]].src = imgPath + pictures[i] + suffix + "." + extension;
Off_Images[pictures[i]] = new Image();
Off_Images[pictures[i]].src = imgPath + pictures[i] + "." + extension;
}
//////////////////////////////////////////////////////////////////////////
function on(name)
{
document.images[name].src = On_Images[name].src;
}
//////////////////////////////////////////////////////////////////////////
function off(name)
{
document.images[name].src = Off_Images[name].src;
}
далие заливаем эт файл rollover.js в корень сайта и вставляем его в код вызова скрипта копируя свою ссылку на rollover.js
Этот вызов js как всегда ставим перед </head>
Code
<script type="text/javascript" src="rollover.js"></script>
а в это просто вставляем в нужное место где должна быть картинка и заменяем ссылку на нее своей
Code
<p><a
href="#" onmouseover="on('photo_1');" onmouseout="off('photo_1');"><img src="images/photo_1.jpg"
name="photo_1" width="130" height="98"></a></p>
если несколько картинок то таким образом
Code
<p><a
href="#" onmouseover="on('photo_1');" onmouseout="off('photo_1');"><img src="images/photo_1.jpg"
name="photo_1" width="130" height="98"></a></p>
<p><a href="#" onmouseover="on('photo_2');" onmouseout="off('photo_2');"><img src="images/photo_2.jpg"
name="photo_2" width="130" height="98"></a></p>
<p><a href="#" onmouseover="on('photo_3');" onmouseout="off('photo_3');"><img src="images/photo_3.jpg"
name="photo_3" width="130" height="98"></a></p>
вот и все думаю всем все понятно
Меню сайта
Меню сайта
