Предпросмотр картинок

 
0
 
JavaScript
ava
guest | 02.10.2004, 22:39
привет,

есть несколько маленьких картинок, как сделать, чтобы при наведении на них мышкой, картинка появлялась большая?
Comments (13)
ava
Aliance | 02.10.2004, 23:24 #
Перехватываем событие, создаем массив картинок и определив откуда пришло событие - меняем ширину и высоту картинки - это пойдет?
ava
Sardar | 03.10.2004, 00:33 #
Цитата
при наведении на них мышкой, картинка появлялась большая?

А поточнее? Где/как появлялась?
Здесь возможно обсуждалсь подобное: http://forum.vingrad.ru/index.php?showtopic=30523
ava
Alx | 03.10.2004, 00:51 #
есть два самых популярных способа решения вопроса:

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

первое и практичнее и красивее. Выбирай, что больше подходит - поможем! smile
ava
Gold Dragon | 03.10.2004, 08:35 #
Только сам вариант "при наведении" мне лично не нравиться, лучше при клике, люблю сам выбирать, особенно когда Инет ели-ели пыхтит.

Хотя, смотря что нужно достичь, описание задачи ведь нет..
ava
Sardar | 03.10.2004, 11:26 #
Большие картинки лучше загружать по мере надобности, во время простоя грузить по одной заранее.
ava
Gold Dragon | 03.10.2004, 12:24 #
Sardar
А как определить, что система простаивает?
ava
Aliance | 03.10.2004, 12:46 #
Видимо я понял задачу - это что-то вроде ALT`а у <IMG>, только вместо текста - картинка...
Так?
ava
Sardar | 03.10.2004, 13:00 #
Red Dragon делаем массив картинок размером во все картинки на странице. Есть функция loadImage(src) которая либо берет загруженную картинку из массива, либо ставит ее в загрузку. Есть отдельный процесс(пусть работающий по window.setInterval, т.к. удобных навороченных событий ИЕ в других браузерах нет), проверяющий не грузится ли сейчас запрашиваемая юзром картинка(ту по которой кликнули), если нет, то ставит в загрузку следующую картинку.
Процесс загрузки остановить нельзя, так что если поставили загружатся картинку, а потом пользователь кликнул по другой картинке, то одноврменно будут загружатся обе картинки.

Плюсы подхода: не особо напрягается и-нет юзера; картинки сохраняются в кеше, если юзер запросит, то она сразу появится.
ava
Се ля ви | 04.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" неправильно.

Вот так кавбои хаггис победили сырость! smile
Только я присоединяюсь к остальным и высказваю скепсис по поводу юзабильности решения менять картинку на подводе мышки...
ava
Sardar | 04.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>
ava
Се ля ви | 05.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).
ava
Sardar | 05.10.2004, 20:06 #
Цитата
Хотя без eval у меня всё-таки не пашет

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

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

eval'ы сделаем, а вот с регекспами по моему будет чуть сложновато...
ava
Се ля ви | 06.10.2004, 09:02 #
Версии браузеров - IE 5, Mozilla 1.7.1, Opera 7.54. Всё на win2k. Здесь все просто выдают ошибку...

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

Вобщем, наверное, лучше всё-таки оставлять eval`ы от греха подальше...
Please register or login to write.
Firm of day
Вы также можете добавить свою фирму в каталог IT-фирм, и публиковать статьи, новости, вакансии и другую информацию от имени фирмы.
Подробнее
Contributors
advanced
Submit