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

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

вопрос

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

<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 - 2012-07-1516 июля 2012 10:41 - #5903

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

Юзер

hosts - 2012-07-1516 июля 2012 11:38 - #5904

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

Эксперт

1925

nowheremany - 2012-07-1516 июля 2012 12:34 - #5905

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

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

Юзер

hosts - 2012-07-1516 июля 2012 12:57 - #5906

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

Эксперт

1925

nowheremany - 2012-07-1516 июля 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 - 2012-07-1516 июля 2012 14:42 - #5908

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

Эксперт

1925

nowheremany - 2012-07-1516 июля 2012 14:50 - #5909

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

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

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

Юзер

hosts - 2012-07-1516 июля 2012 14:57 - #5910

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

Юзер

hosts - 2012-07-1516 июля 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>