привет,

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

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

Цитата

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

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

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

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

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

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

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

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

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

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

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

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

я больше люблю просто оформлять скриптом зависимость имён связанных картинок (тогда на событии просто меняешь её адрес заменой по регэкспу) или специальным параметром в теге <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" неправильно.

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

Это сообщение отредактировал(а) Се ля ви - 4.10.2004, 11:29

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

Код

// /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>

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).

Это сообщение отредактировал(а) Се ля ви - 5.10.2004, 09:56

Цитата

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

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

Цитата

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

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

Цитата

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

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

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

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

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