Не нравятся результаты поиска? Попробуйте другой поиск!

DLE FAQ » Все вопросы » jQuery » Смена картинок при наведении курсора

Смена картинок при наведении курсора

hosts 15.07.2012 jquery Все вопросы » jQuery 7325

вопрос

Здравствуйте. Подскажите, как можно сделать так, чтобы картинки менялись при наведении курсора. Только не две картинки, а несколько. То есть навел на картинку курсор, она сменилась, потом сменилась на другую и так далее... и как только убрали курсор, должна появиться первоначальная картинка. нашел вот такой код:

<a href="#"    onmouseover="document.myImage2.src='img2.gif'"    onmouseout="document.myImage2.src='img1.gif'"> <img src="img1.gif" name="myImage2" width=160 height=50 border=0></a>

но в нем можно крутить не больше 2х картинок...

P.S. видел такую фишку в шаблоне EroticDream от Test-Templates

Ответил: nowheremany

Плохо искали

9 комментариев

Юзер

hosts - 2015-03-2516 июля 2012 10:41 - #5903

забыл сказать. вместо ссылок на картинки будут дополнительные поля

Юзер

hosts - 2015-03-2516 июля 2012 11:38 - #5904

n0wheremany, не совсем понял что за ссылку вы мне дали, но искал хорошо. ничего не нашел

Эксперт

1925

nowheremany - 2015-03-2516 июля 2012 12:34 - #5905

парсер захавал - подправил

Благодарность принимаю тут Связь

Юзер

hosts - 2015-03-2516 июля 2012 12:57 - #5906

я это всё смотрел. там нет конкретно того, что мне нужно

Эксперт

1925

nowheremany - 2015-03-2516 июля 2012 14:20 - #5907

ПО первой же ссылке нормальное решение


<img style="height: 200px; border: 1px solid red"
     src="http://www.kolobok.us/smiles/artists/big/Connie_something-smells.gif"
     lang="http://www.kolobok.us/smiles/artists/big/Viannen_loungelizard.gif|http://www.kolobok.us/smiles/artists/big/Connie_yo-yo.gif"
     onmouseover="with (this) {p = lang.split ('|'); lang = p [1] + '|' + src; src = p [0]}">

Благодарность принимаю тут Связь

Юзер

hosts - 2015-03-2516 июля 2012 14:42 - #5908

я же говорю. это не то. если его подкорректировать немного, то он мне подойдет. мои знания в php равны нулю, поэтому сам не могу. вот ПРИМЕР сори за ссылку подобного содержания, но больше не знаю как продемонстрировать. код который вы сейчас дали работает немного по другому принципу - навел мышь, картинка поменялась, а потом, чтобы поменять на следующую картинку, надо мышь убрать и опять навести.. А мне же нужно 1 раз навести и чтобы все прокрутилось. посмотрите пример - это то, что мне нужно

Эксперт

1925

nowheremany - 2015-03-2516 июля 2012 14:50 - #5909

Причем тут PHP, если это javascript.

setInterval вам поможет.

Благодарность принимаю тут Связь

Юзер

hosts - 2015-03-2516 июля 2012 14:57 - #5910

слово javascript говорит мне не больше чем php, поэтому для меня без разницы php это или javascript

Юзер

hosts - 2015-03-2516 июля 2012 15:16 - #5911

setinterval тоже не лучшее решение. на других форумах дали такие скрипты с использованием setinterval:

Показать / Скрыть текст

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>    
    $(document).ready(function() {
        var iid;    
        var imgSrc = ["1.jpg", "2.jpg", "3.jpg"];
        var curImg = 0;                
        
        $("#display").bind('mouseover', function() {            
            iid = setInterval(function() {                
                curImg < imgSrc.length-1 ? ++curImg : curImg = 0;                
                $("#display").attr("src", imgSrc[curImg]);                                
            }, 1800);                    
        });
        
        $("#display").bind('mouseout', function() { clearInterval(iid); curImg = 0; this.src=imgSrc[0]});                
    });
</script>
</head>
<body> 
    
<img width="400px" id="display" src="1.jpg"/><br/>
</body> 
</html>

Показать / Скрыть текст

<script>(function(){
var d, allSrc, len, obj, ind, stop;
d=document;
allSrc=['pics/avant48.gif', 'pics/chrome48.gif', 'pics/firefox48.gif', 'pics/ie48.gif', 'pics/navigator48.gif', 'pics/nichrom48.gif', 'pics/opera48.gif', 'pics/safari48.gif', 'pics/yandex48.gif'];
len=allSrc.length;
ind=0;
 
onload=function(){
var el=d.getElementById("multiImg");
obj=el.getElementsByTagName("img")[0];
el.onmouseover=over;
el.onmouseout=out;
 };
 
function over(){
ind=ind+1==len?0:ind+1;
obj.src=allSrc[ind];
stop=setTimeout(over, 500);
 
 };
 
function out(){
clearTimeout(stop);
obj.src=allSrc[0];
 };
 
 })();</script>

<a name="#" id="multiImg"><img src="pics/avant48.gif" alt=""></a>

вроде все работает нормально, но есть проблема с интеграцией в dle - прокрутка работает только в одной новости и не работают дополнительные поля

Смена картинок при наведении курсора

Ответил: nowheremany

9 комментариев

Похожие вопросы

Помогите настроить js смена картинки при наведении

Доработать меню

Баг jquery или мой не профессионализм

Задержка перед выполнением скрипта

Скрипт выбора серий

Необходимо посчитать количество элементов

Открытие ProfilePopup при наведении мышки а не при нажатии на ник.

Адаптация скрипта под DLE

Как в jCarousel спрятать стрелки навигации ?

Как поправить JS код ?