Задача стоит такая - есть четыре ссылки, внутри которых изображения.
Нужно сделать, чтобы при наведении мыши на ссылку атрибут src изображения менялся (указывал на другое изображение, с префиксом '-hover' в имени)
Вопрос в следующем - как глобальные переменные передать функции-обработчику события в jquery
CODE ( html):
скопировать код в буфер обмена
<div class='tm-nite-icons' style='margin:auto;width:300px;'> <a class='white0' href='#'><img src='00.png'></a><br> <a class='white1' href='#'><img src='01.png'></a><br> <a class='white2' href='#'><img src='02.png'></a><br> <a class='white3' href='#'><img src='03.png'></a><br> </div>
CODE ( javascript):
скопировать код в буфер обмена
jQuery(document).ready(function(){ arr = new Array('00','01','02','03');// имена файлов-картинок без расширения for(var i = 0; i<=3; i++){ var a = '.white' + (i);//здесь хранится css класс ссылки var image = a + ' img';//изображение, которому будем менять атрибут src //alert (a); //работает, выводит переменную jQuery(a).hover(function(arr, i, image){ var path = '/images/' + arr[i] + '-hover.png';//при наведении мыши на ссылку, путь ведет к изображению с префиксом hover //alert(path); //не работает, значение глобальной переменной arr[i] определяется как undefined jQuery(image).attr('src', path); }, function(arr, i, image){ var path = '/images/' + arr[i] + '.png';//если мышь не наведена на ссылку, путь ведет к изображению без префикса hover jQuery(image).attr('src', path); }); } });
(Отредактировано автором: 06 Мая, 2015 - 10:50:09)
|