Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Предпросмотр картинок

Автор: УТ 2.10.2004, 21:39

привет,

есть несколько маленьких картинок, как сделать, чтобы при наведении на них мышкой, картинка появлялась большая?

Автор: Aliance 2.10.2004, 23:24

Перехватываем событие, создаем массив картинок и определив откуда пришло событие - меняем ширину и высоту картинки - это пойдет?

Автор: Sardar 3.10.2004, 00:33

Цитата

при наведении на них мышкой, картинка появлялась большая?

А поточнее? Где/как появлялась?
Здесь возможно обсуждалсь подобное: http://forum.vingrad.ru/index.php?showtopic=30523

Автор: Alx 3.10.2004, 00:51

есть два самых популярных способа решения вопроса:

1. большая картинка появляется на той же странице рядом с маленькими (под или на)
2. Она открывается в новом popup-окне.

первое и практичнее и красивее. Выбирай, что больше подходит - поможем!

Автор: Gold Dragon 3.10.2004, 08:35

Только сам вариант "при наведении" мне лично не нравиться, лучше при клике, люблю сам выбирать, особенно когда Инет ели-ели пыхтит.

Хотя, смотря что нужно достичь, описание задачи ведь нет..

Автор: Sardar 3.10.2004, 11:26

Большие картинки лучше загружать по мере надобности, во время простоя грузить по одной заранее.

Автор: Gold Dragon 3.10.2004, 12:24

Sardar
А как определить, что система простаивает?

Автор: Aliance 3.10.2004, 12:46

Видимо я понял задачу - это что-то вроде ALT`а у <IMG>, только вместо текста - картинка...
Так?

Автор: Sardar 3.10.2004, 13:00

Red Dragon делаем массив картинок размером во все картинки на странице. Есть функция loadImage(src) которая либо берет загруженную картинку из массива, либо ставит ее в загрузку. Есть отдельный процесс(пусть работающий по window.setInterval, т.к. удобных навороченных событий ИЕ в других браузерах нет), проверяющий не грузится ли сейчас запрашиваемая юзром картинка(ту по которой кликнули), если нет, то ставит в загрузку следующую картинку.
Процесс загрузки остановить нельзя, так что если поставили загружатся картинку, а потом пользователь кликнул по другой картинке, то одноврменно будут загружатся обе картинки.

Плюсы подхода: не особо напрягается и-нет юзера; картинки сохраняются в кеше, если юзер запросит, то она сразу появится.

Автор: Се ля ви 4.10.2004, 11:25

я больше люблю просто оформлять скриптом зависимость имён связанных картинок (тогда на событии просто меняешь её адрес заменой по регэкспу) или специальным параметром в теге <img указывать адрес большой картинки, с которой она связана (вытаскивать его значение потом DOM-методом getAttribute('имя параметра') и присваивать картинке). Добавив к этому красивый механизм назначения событий элементам из скрипта, а не из HTML-кода, можно полностью избавить HTML-документ от скрипта, выведя их в отдельный файл:

Код

<!-- index.html: -->

<html>
<head>
    <title>пример</title>
    <script type="text/javascript" language="javascript1.2" src="/_scripts/script.js"></script>

</head>
<body>

    ...
    <div id="someID">
    
    <img class="galleryPic" src="/_img/pic1Small.pic" /><br />
    <img class="galleryPic" src="/_img/pic2Small.pic" />
    
    </div>
    ...

    <script type="text/javascript" language="javascript1.2">
    <!--//[CDATA[
    
        //window.onload= function(){galleryInit();}
        galleryInit();
    
    //]]-->
    </script>
</body>
</html>

Код

// /scripts/script.js:

function galleryInit(){

    var gallery = document.getElementById('someID').childNodes;

    for (var i = 0; i < gallery.length; i++)
        if (gallery[i].nodeType == 1 &&
            gallery[i].tagName == 'img' &&
            gallery[i].className == 'galleryPic'){

            eval("gallery[i].onmouseover = function(){this.setAttribute('src', this.getAttribute('src').replace(/Small\.jpg$/, 'Big.jpg'); }");
            eval("gallery[i].onmouseout = function(){this.setAttribute('src', this.getAttribute('src').replace(/Big\.jpg$/, 'Small.jpg'); }");
        }
}

Если не поставить при назначении события всё в "eval", то браузеры будут заменять ссылку "this" неправильно.

Вот так кавбои хаггис победили сырость! :-)
Только я присоединяюсь к остальным и высказваю скепсис по поводу юзабильности решения менять картинку на подводе мышки...

Автор: Sardar 4.10.2004, 21:01

Се ля ви начало не плохое, а далее сыровато

Код

// /scripts/script.js:
function galleryInit(){
    var gallery = document.getElementById('someID').getElementsByTagName("IMG");

    for (var i = 0; i < gallery.length; i++)
       gallery[i].onmouseover = function(){
                this.setAttribute('src', this.getAttribute('src').replace(/Small\.jpg$/, 'Big.jpg');
         };
      gallery[i].onmouseout = function(){
                this.setAttribute('src', this.getAttribute('src').replace(/Big\.jpg$/, 'Small.jpg');
         };
    }
}

Никаких проблем с this нет, но есть проблема с загрузкой картинок во время

Постепенную загрузку можно сделать так:

Код

<script language="Javascript" type="text/javascript">
<!--
//массив с путями до картинок
imgs=["ochain.gif","onode.gif","tominus.gif","ominusEnd.gif"];
function LoadImages() {
   var img=new Image();
   img.src=imgs[0];
   imgs[0]=img;
   loadImages.loaded=0;
   loadImages.errcnt=0;
   loadImages.tmr=window.setInterval(loadImages, 500);
}
loadImages.maxerr=10; //время на загрузку одной картинки(5 сек).
function loadImages() {
  if(loadImages.loaded>=imgs.length) {window.clearInterval(loadImages.tmr); return;}
  //логи
  document.getElementById("log").innerHTML="<b>"+loadImages.errcnt+"</b>";
  if(imgs[loadImages.loaded].complete||loadImages.errcnt>loadImages.maxerr) {
     //логи
     if(loadImages.errcnt<=loadImages.maxerr) document.getElementById("test").src=imgs[loadImages.loaded].src;
     loadImages.loaded++;
  loadImages.errcnt=0;
  if(loadImages.loaded<imgs.length) {
       var img=new Image();
       img.src=imgs[loadImages.loaded];
       imgs[loadImages.loaded]=img;
  }
  }  else loadImages.errcnt++; //время на згрузку
}
LoadImages();
//-->
</script>
.........
<img src="" id="test"><br>
<div id="log"></div>

Автор: Се ля ви 5.10.2004, 08:45

Sardar
За поправки огромное спасибо) с меня пилюсик... Хотя без eval у меня всё-таки не пашет (там немного более сложная конструкция - посмотри http://trespass.sabotag.ru, попробуй сохранить и подредактировать, убрав евалы в функции "mainMenuInit()" - может, я напортачил в чём-то другом, но без евалов не понимает ни один браузер...)
Насчёт догрузки, думаю, такая система - это уже слишком мощно для коммерческих сайтов... Если нужно просто прокэшировать картинку, думаю, проще создавать объекты Image без ссылок на них:

Код

// /scripts/script.js:
function galleryInit(){
    var gallery = document.getElementById('someID').getElementsByTagName("img");

    for (var i = 0; i < gallery.length; i++)
        if (gallery[i].className == 'galleryPic'){
            eval("gallery[i].onmouseover = function(){" +
                "this.setAttribute('src', this.getAttribute('src').replace(/Small\.jpg$/, 'Big.jpg');" +
            "};");
            eval("gallery[i].onmouseout = function(){" +
                "this.setAttribute('src', this.getAttribute('src').replace(/Big\.jpg$/, 'Small.jpg');" +
            "};");
            (new Image()).src = gallery[i].getAttribute('src').replace(/Small\.jpg$/, 'Big.jpg');
        }
}

Это обеспечит закачку картинок в кэш и при необходимости показа они уже будут браться оттуда. Пример - http://trespass.sabotag.ru (так устроена левая менюшка).

P.S. Таким образом, выявляются 2 проблемы связанные с подсветкой синтаксиса в форуме JavaScript -
1. Было бы неплохо подсвечивать синтаксис внутри eval`ов;
2. Не подсвечиваются регэкспы (/.*/ig).

Автор: Sardar 5.10.2004, 20:06

Цитата

Хотя без eval у меня всё-таки не пашет

Скачал твою страницу, убрал eval'ы, все пашет без проблем. Версии твоих бразуеров?

Цитата

Насчёт догрузки, думаю, такая система - это уже слишком мощно для коммерческих сайтов... Если нужно просто прокэшировать картинку, думаю, проще создавать объекты Image без ссылок на них:

Идеально работает для менюшек о прочих вещей где используются маленькие картинки, загрузка разом всегда быстрее. В данном случаем загружаем кучу больших картинок(допустим 30 штук 300х400) и возможно не сильн ужатых. В таком случае лучше грузить не напрягая пользователя.
В твоем коде ты не сохраняешь ссылку на обьект Image, возможно Мозилла сразу удаляет обьект не загружая картинку, у меня на компе картинка грузится во время наведения мышкой...

Цитата

P.S. Таким образом, выявляются 2 проблемы связанные с подсветкой синтаксиса в форуме JavaScript - 1. Было бы неплохо подсвечивать синтаксис внутри eval`ов; 2. Не подсвечиваются регэкспы (/.*/ig).

eval'ы сделаем, а вот с регекспами по моему будет чуть сложновато...

Автор: Се ля ви 6.10.2004, 09:02

Версии браузеров - IE 5, Mozilla 1.7.1, Opera 7.54. Всё на win2k. Здесь все просто выдают ошибку...

Дома посмотрел в XP на IE 6 - вроде пашет, но странно - событие прописывается тока для первой картинки...

Вобщем, наверное, лучше всё-таки оставлять eval`ы от греха подальше...