VPF::Rollover-эффект для всех элементов с определенным

wilco

Дата 18.6.2007, 07:25 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 6
Регистрация: 18.6.2007

Репутация: нет
Всего: нет

Есть вот такой скрипт.
При наведении курсора мыши на картинку с классом "rollover" картинка меняется на другую,
без указания имени другой картинки, а просто добавляя "_over" в имя файла, что очень удобно.

Нужно сделать так чтобы при наведении на <table> с классом "rolloverALL"
картинки с классом "rollover" менялись ВСЕ СРАЗУ по такой же схеме: картинка.jpg >> картинка_over.jpg
и возвращались обратно при отведении курсора.
Кто-нибудь может помочь?

Вот сам скрипт:

Код


function initRollovers() { 
 if (!document.getElementById) return 
  
 var aPreLoad = new Array(); 
 var sTempSrc; 
 var aImages = document.getElementsByTagName('img'); 
 
 for (var i = 0; i < aImages.length; i++) {   
  if (aImages[i].className == 'rollover') { 
   var src = aImages[i].getAttribute('src'); 
   var ftype = src.substring(src.lastIndexOf('.'), src.length); 
   var hsrc = src.replace(ftype, 'over'+ftype); 
 
   aImages[i].setAttribute('hsrc', hsrc); 
    
   aPreLoad[i] = new Image(); 
   aPreLoad[i].src = hsrc; 
    
   aImages[i].onmouseover = function() { 
    sTempSrc = this.getAttribute('src'); 
    this.setAttribute('src', this.getAttribute('hsrc')); 
   }  
    
   aImages[i].onmouseout = function() { 
    if (!sTempSrc) sTempSrc = this.getAttribute('src').replace('over'+ftype, ftype); 
    this.setAttribute('src', sTempSrc); 
   } 
  } 
 } 
} 
 
window.onload = initRollovers;

// Вид тега с картинкой <img src="image.jpg" class="rollover">

SamDark

Дата 18.6.2007, 12:55 (ссылка)

(нет голосов)

Загрузка ...

Добрый кот

Профиль
Группа: Участник
Сообщений: 1424
Регистрация: 25.7.2006
Где: Voronezh

Репутация: 2
Всего: 38

wilco,
Вопрос не понят.

--------------------

rmcreative.ru — Это жжж неспроста...
yiiframework.ru — О фреймворке Yii на русском.
reggi — здесь я регистрирую домены

lexxICON

Дата 18.6.2007, 13:38 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 28
Регистрация: 27.1.2007

Репутация: 2
Всего: 2

А я так понял что речь про картинки внутри таблицы, и если это так, то можно, к примеру, так:

Код


            //var stop;
            window.onload = function () { 
                initRollovers();
                var tables = document.getElementsByTagName("table"), imgs, i, j, preload;
                for (i = 0; i < tables.length; i += 1) { 
                    if (tables[i].className && tables[i].className.indexOf("rolloverALL") > -1) { 
                        imgs = tables[i].getElementsByTagName("img");
                        for (j = 0; j < imgs.length; j += 1) { 
                            if (imgs[j].className.indexOf("rollover") > -1) {
                                preload = new Image();
                                preload.src = imgs[j].src.replace(/(\.[^.]+)$/,"over" + "$1");
                            }
                        }
                        tables[i].onmouseover = function () { 
                            //stop = true;
                            var imgs = this.getElementsByTagName("img"), i;
                            for (i = 0; i < imgs.length; i += 1) { 
                                if (imgs[i].className.indexOf("rollover") > -1) {
                                    imgs[i].src = imgs[i].src.replace(/(\.[^.]+)$/,"over" + "$1");
                                }
                            }
                        }
                        tables[i].onmouseout = function () { 
                            var imgs = this.getElementsByTagName("img"), i;
                            for (i = 0; i < imgs.length; i += 1) { 
                                if (imgs[i].className.indexOf("rollover") > -1) {
                                    imgs[i].src = imgs[i].src.replace(/over(\.[^.]+)$/,"$1");
                                }
                            }
                            //stop = false;
                        }
                    }
                }
            }

Чтоб не было конфликтов с верхним сценарием, то раскомментировать переменную stop и проверять ее в initRollovers - выходить при наличии

wilco

Дата 18.6.2007, 16:53 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 6
Регистрация: 18.6.2007

Репутация: нет
Всего: нет

SamDark,
Сейчас скрипт меняет каждую картинку отдельно.
А надо чтобы менял все картинки сразу при наведении на элемент с определенным классом.

lexxICON,
Спасибо. Вроде выглядит правильно, но почему-то не работает.
Вот хтмл ради которого все затевается:

Код


<html>
<head>
<title>Примеры работ</title>
</head>
<body>
<br>
<table class="rolloverALL">
<tr>
<td>Вызов Rollover при наведении на этот текст</td>
</tr>
</table>
<br>

<table class="rolloverALL">
<tr>
<td>Также вызов Rollover при наведении на эту таблицу:
<table>
<tr>
<td><img src="work1.jpg" class="rollover"></td>
<td><img src="work2.jpg" class="rollover"></td>
</tr>
<tr>
<td><img src="moreleft.jpg" class="rollover"></td>
<td><img src="moreright.jpg" class="rollover"></td>
</tr>
</table>
<table>
<tr>
<td><img src="vectorwork3.jpg" class="rollover"></td>
<td><img src="vectorwork4.jpg" class="rollover"></td>
</tr>
<tr>
<td><img src="moreleft.jpg" class="rollover"></td>
<td><img src="moreright.jpg" class="rollover"></td>
</tr>
</table>
</td>
</tr>
</table>
<br>

<script>
            //var stop;
            window.onload = function () { 
                initRollovers();
                var tables = document.getElementsByTagName("table"), imgs, i, j, preload;
                for (i = 0; i < tables.length; i += 1) { 
                    if (tables[i].className && tables[i].className.indexOf("rolloverALL") > -1) { 
                        imgs = tables[i].getElementsByTagName("img");
                        for (j = 0; j < imgs.length; j += 1) { 
                            if (imgs[j].className.indexOf("rollover") > -1) {
                                preload = new Image();
                                preload.src = imgs[j].src.replace(/(\.[^.]+)$/,"over" + "$1");
                            }
                        }
                        tables[i].onmouseover = function () { 
                            //stop = true;
                            var imgs = this.getElementsByTagName("img"), i;
                            for (i = 0; i < imgs.length; i += 1) { 
                                if (imgs[i].className.indexOf("rollover") > -1) {
                                    imgs[i].src = imgs[i].src.replace(/(\.[^.]+)$/,"over" + "$1");
                                }
                            }
                        }
                        tables[i].onmouseout = function () { 
                            var imgs = this.getElementsByTagName("img"), i;
                            for (i = 0; i < imgs.length; i += 1) { 
                                if (imgs[i].className.indexOf("rollover") > -1) {
                                    imgs[i].src = imgs[i].src.replace(/over(\.[^.]+)$/,"$1");
                                }
                            }
                            //stop = false;
                        }
                    }
                }
            }
</script>

</body>
</html>

lexxICON

Дата 18.6.2007, 21:17 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 28
Регистрация: 27.1.2007

Репутация: 2
Всего: 2

Тогда так

Код


            //var stop;
            window.onload = function () { 
                //initRollovers();
                var tables = document.getElementsByTagName("table"), 
                    imgs = document.getElementsByTagName("img"), 
                    sortimgs = [], 
                    patorig = /(\.[^.]+)$/,
                    patover = /over(\.[^.]+)$/,
                    i, j, preload;
                //предзагрузка rollover-собратов для всех найденных в документе изображений с классом rollover,
                //заодно запомним их, чтобы в дальнейшем не валандаться с повторным поиском
                for (i = 0; i < imgs.length; i += 1) { 
                    if (imgs[i].className && imgs[i].className.indexOf("rollover") > -1) {
                        sortimgs.push(imgs[i]);
                        preload = new Image();
                        preload.src = imgs[i].src.replace(patorig,"over" + "$1");
                    }
                }
                //обегаем в документе таблицы с классом rolloverALL - расставим обработчики
                for (i = 0; i < tables.length; i += 1) { 
                    if (tables[i].className && tables[i].className.indexOf("rolloverALL") > -1) { 
                        tables[i].onmouseover = function () { 
                            //stop = true;
                            for (var i = 0; i < sortimgs.length; i += 1) { 
                                sortimgs[i].src = sortimgs[i].src.replace(patorig,"over" + "$1");
                            }
                        }
                        tables[i].onmouseout = function () { 
                            for (var i = 0; i < sortimgs.length; i += 1) { 
                                sortimgs[i].src = sortimgs[i].src.replace(patover,"$1");
                            }
                            //stop = false;
                        }
                    }
                }
            }

wilco

Дата 19.6.2007, 06:04 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 6
Регистрация: 18.6.2007

Репутация: нет
Всего: нет

Спасибо огромное!!!
Вроде теперь все заработало.
Только подглюкивает в IE - прелоад не начинается по onload,
а только если после наведения мыши на элемент rolloversALL.
Это как нибудь лечится?

Да, отдельное спасибо за комментарии smile

lexxICON

Дата 19.6.2007, 10:22 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 28
Регистрация: 27.1.2007

Репутация: 2
Всего: 2

А что за версия IE. В шестой я проверял - там работает, как и задумывалось.
Вот вариант с запоминанием preload-картинок в массив, с последующим их назначением сменяемым картинкам

Код


window.onload = function () { 
    //initRollovers();
    var tables = document.getElementsByTagName("table"), 
        imgs = document.getElementsByTagName("img"), 
        sortimgs = [], 
        patorig = /(\.[^.]+)$/,
        patover = /over(\.[^.]+)$/,
        i, j, preload = [];
    //предзагрузка rollover-собратов для всех найденных в документе изображений с классом rollover,
    //заодно запомним их, чтобы в дальнейшем не валандаться с повторным поиском
    for (i = 0; i < imgs.length; i += 1) { 
        if (imgs[i].className && imgs[i].className.indexOf("rollover") > -1) {
            sortimgs.push(imgs[i]);
            //запомним, чтобы в дальнейшем конкретно назначить данный src
            preload[preload.length] = new Image();
            preload[preload.length - 1].src = imgs[i].src.replace(patorig,"over" + "$1");
        }
    }
    //обегаем в документе таблицы с классом rolloverALL - расставим обработчики
    for (i = 0; i < tables.length; i += 1) { 
        if (tables[i].className && tables[i].className.indexOf("rolloverALL") > -1) { 
            tables[i].onmouseover = function () { 
                //stop = true;
                for (var i = 0; i < sortimgs.length; i += 1) { 
                    //назначим закешированную картинку
                    sortimgs[i].src = preload[i].src;
                }
            }
            tables[i].onmouseout = function () { 
                for (var i = 0; i < sortimgs.length; i += 1) { 
                    sortimgs[i].src = sortimgs[i].src.replace(patover,"$1");
                }
                //stop = false;
            }
        }
    }
}

wilco

Дата 19.6.2007, 19:26 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 6
Регистрация: 18.6.2007

Репутация: нет
Всего: нет

Как раз в IE6 было.
В Опере и Файрфоксе все ок.
И еще с новым кодом пофиксилось: в том же ИЕ, если водить быстро мышью по всем картинкам rollover, внутри таблицы rolloverALL, то почему-то начинался прелоад некоторых.

Теперь вроде везде все идеально smile

Еще раз спасибо!

Сорри, рейтинг не могу добавить, говорят 100 постов надо =)

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »