Списки миниатюр изображений

@Leka_1 · Регистрация: 30.07.2012

Author24 — интернет-сервис помощи студентам

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

Javascript

<html>
    <body>
    <i id="info">Загрузка изображений...</i>
    <br />
    
    <img src="./rollover/1r.jpg" name="picture"
    onmouseover = "changeImage(1);"
    onmouseout="changeImage(0);"
    onmousedown="changeImage(2);"
    onmouseup="changeImage(1);" />
        <br />
    <a href="#" onclick="return nextImage()">Следующее изображение</a>
 
    <script type="text/javascript">
        var currentImage = 0, count = 0;
        var path = new Array("./rollover/1r.jpg", "./rollover/1r-over.jpg",
            "./rollover/2r.jpg", "./rollover/2r-over.jpg",
            "./rollover/3r.jpg", "./rollover/3r-over.jpg",
            "./rollover/4r.jpg", "./rollover/4r-over.jpg",
            "./rollover/5r.jpg", "./rollover/5r-over.jpg");
        var img = new Array ();     
        // предзагрузка изображений галереи 
        for (var i=0; i < path.length; i++)
        {
            
            img[i] = new Image (160, 120);
            img[i].onload = countImages;
            img[i].src = path[i];           
        }
        // подсчет количества загруженных изображений и вывод информации 
        function countImages () {
            count++;
            if (count == path.length)
                info.innerText = "Готово!";
            else            
                info.innerText = "Загрузка изображений: " + count + " из " + path.length;          
        }
        function nextImage() {
            if (count != path.length) {
                alert ("Дождитесь пожалуйста загрузки всех изображений!");
                return;
            }       
            currentImage++;
            if (currentImage == path.length) 
                currentImage = 0;
            document.rollover["picture"].src = img[currentImage].src;
            return false;
        }
        function changeImage (index) {
            if (count == img.length)
                document.images["picture"].src = img[index].src;
                
            }
    </script>
</body>
</html>

Добавлено через 1 минуту
Чтоб при наведении мышки менялась картинка это у меня получилось

@Leka_1 · 19.10.2012, 03:32 **[ТС]**

К той же теме, у меня получилось на странице выложить ряд картинок, но теперь другая проблема, на любой из них навожу мышкой сразу меняються все картинки, на то изображение на которое нажимаю, и так со всеми мне кажется что ошибка в этом коде, помогите пож. break, return пробовала, но результат плачевный тогда ни чего вообще не происходит

Javascript

function changeImage (index) {
            if (count == img.length)
            {
            if (document.images["picture"].src)  
            {
               document.images["picture"].src = img[index].src;
                }
                    if (document.images["picture1"].src)
                        {           
                        document.images["picture1"].src = img[index].src;
                        
                        }
                            if (document.images["picture2"].src)
                             {
                                document.images["picture2"].src = img[index].src;
                                
                                }
                                    if (document.images["picture3"].src)
                                     {
                                            document.images["picture3"].src = img[index].src;
                                            
                                            }
                                                 if (document.images["picture4"].src)
                                                 {
                                                    document.images["picture4"].src = img[index].src;
                                                    
                                                    }
            }
            
            }

	19.10.2012, 03:32