Перейти из форума на сайт.

Новости • Файловые архивы
Поиск • Активные темы • Топ лист
Правила • Кто в on-line?
Вход • Забыли пароль? • Первый раз на этом сайте? • Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » [HELP]Циклическая смена картинок при наведении мыши

Модерирует : Cheery

 Версия для печати • Подписаться • Добавить в закладки
Страницы: 1 2

Открыть новую тему     Написать ответ в эту тему

LuXiMaL



Junior Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Имеется некоторое количество ссылок на картинки вида:
http://***.com/1.jpg,  
http://***.com/2.jpg  
...  
http://***.com/n.jpg.
 
Хотелось бы, что бы изначально на странице показывалась картинка http://***.com/1.jpg.
Помогите реализовать их циклическую смену при наведении мышки.
 
Весь инет облазил и подобной круговой смены нескольких картинок не нашёл...
Всего записей: 45 | Зарегистр. 27-01-2008 | Отправлено: 00:31 13-06-2009
Cheery



.:МордератоР:.		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
LuXiMaL

Цитата:
Весь инет облазил и подобной круговой смены нескольких картинок не нашёл

полно смен по наведению мышки.
что значит "циклическая" смена? в каком случае? при новом наведении мышки или при удержании мышки над?

----------
Away/DND
Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 00:32 13-06-2009
LuXiMaL



Junior Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Cheery
 Именно при удержании, а при уходе возврат http://***.com/1.jpg
Всего записей: 45 | Зарегистр. 27-01-2008 | Отправлено: 00:47 13-06-2009
Cheery



.:МордератоР:.		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
LuXiMaL

Цитата:
Именно при удержании

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

----------
Away/DND
Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 00:53 13-06-2009
LuXiMaL



Junior Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Cheery
 
Я к сожалению не шарю в веб программинге.
Допустим как к этому приклеить указанную Вами функцию?
 
<img src="http://***.com/1.jpg"
onmouseover="src='http://***.com/2.jpg';"
onmouseout="src='http://***.com/1.jpg';" />
Всего записей: 45 | Зарегистр. 27-01-2008 | Отправлено: 01:17 13-06-2009
Oleg Tarusov



Junior Member		Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Типа такого

Код:
<html>
<body>
<script>
var i = 0;
var N = 2;
var timer = null;
var imgs = new Array();
 
for (var j = 0; j < N; j++) {
    imgs[j] = new Image();
    var n = j + 1;
    imgs[j].src = n + '.jpg';
}
 
function start() {
    if (timer == null) {
        timer = setInterval(change, 300);
    }
}
 
function change() {
    if (++i == N) {
        i = 0;
    }
    document.getElementById('img').src = imgs[i].src;
}
 
function stop() {
    clearInterval(timer);
    timer = null;
    document.getElementById('img').src = imgs[0].src;
}
</script>
<img id="img" src="1.jpg" onmousemove="start()" onmouseout="stop()">
</body>
</html>
Всего записей: 175 | Зарегистр. 25-02-2006 | Отправлено: 15:32 15-06-2009 | Исправлено: Oleg Tarusov, 15:36 15-06-2009
LuXiMaL



Junior Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Спасибо, за пример, буду разбираться...
Всего записей: 45 | Зарегистр. 27-01-2008 | Отправлено: 01:00 16-06-2009
LuXiMaL



Junior Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
А как быть если ссылки будут иметь вид: http://www.site.com/111/222/001.jpg
Где имя папок может меняться?
 
А так скрипт прекрасно работает, за что огромное спасибо.
Всего записей: 45 | Зарегистр. 27-01-2008 | Отправлено: 03:01 23-06-2009 | Исправлено: LuXiMaL, 03:03 23-06-2009
Cheery



.:МордератоР:.		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
imgs[j].src ='путь' + n + '.jpg';  



----------
Away/DND
Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 03:02 23-06-2009
LuXiMaL



Junior Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
imgs[j].src ='путь' + n + '.jpg';  

 
Так я делал, но путь может меняться.
Как его считывать к примеру отсюда  

Цитата:
<img id="img" src="1.jpg" onmousemove="start()" onmouseout="stop()">  
Всего записей: 45 | Зарегистр. 27-01-2008 | Отправлено: 03:08 23-06-2009
Cheery



.:МордератоР:.		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
LuXiMaL

Цитата:
Как его считывать к примеру отсюда

document.getElementById('img').src
но чтобы убрать после этого название файла - нужно сделать еще несколько операций

----------
Away/DND
Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 03:10 23-06-2009
LuXiMaL



Junior Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
На одном сайте вычитал что:  

Цитата:
Код скрипта можно прописать в значениях атрибутов событий, таких как OnСlick, OnMouseOver и т.п.
 
<html>
<body>
 <a href="#" OnMouseOver="alert('Указатель был наведен на ссылку');">
  Наведите указатель мыши на эту ссылку</a>
</body>
</html>
 

 
Возможно ли добавить функцию OnMouseOver и объявить в ней переменную "a" со значением "путь",
что бы код скрипта имел вид:
 
 imgs[j].src =a + n + '.jpg';  
 
Сильно не пинайте если ерунду спрашиваю, пытаюсь вникнуть в яваскрипт...
Всего записей: 45 | Зарегистр. 27-01-2008 | Отправлено: 03:27 23-06-2009 | Исправлено: LuXiMaL, 03:28 23-06-2009
Cheery



.:МордератоР:.		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
LuXiMaL

Цитата:
Возможно ли добавить функцию OnMouseOver и объявить в ней переменную "a" со значением "путь",
что бы код скрипта имел вид:  

а смысл этого? да, возможно

----------
Away/DND
Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 03:30 23-06-2009
LuXiMaL



Junior Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Просто мне все равно указывать путь на начальную картинку, проще будет указать путь и в переменной.
Если не сложно приведите пример как правильно это прописать, а то я в кавычках не разберусь ни как.
Всего записей: 45 | Зарегистр. 27-01-2008 | Отправлено: 03:38 23-06-2009
Cheery



.:МордератоР:.		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
LuXiMaL
в script части выше объявляете переменную
var path
в ссылках же
OnMouseOver="path='http://server/path/'"
тогда

Цитата:
imgs[j].src =path + n + '.jpg';  

 


----------
Away/DND
Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 03:48 23-06-2009
LuXiMaL



Junior Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Cheery
Не совсем понял как будет выглядеть функция  

Цитата:
OnMouseOver="path='http://server/path/'"  

У меня ссылка к примеру такая:
http://server/.../.../001.jpg
 
 
Всего записей: 45 | Зарегистр. 27-01-2008 | Отправлено: 04:01 23-06-2009 | Исправлено: LuXiMaL, 04:03 23-06-2009
Cheery



.:МордератоР:.		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
LuXiMaL

Цитата:
Не совсем понял как будет выглядеть функция  

ну елки.. чуть чуть подумайте.

Цитата:
OnMouseOver="path='http://server/../../'"  

вот только код выше еще придется менять, чтобы дополнять цифры нулями.. чтобы было не 1.jpg, а 001.jpg
не 10.jpg, а 010.jpg

----------
Away/DND
Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 04:07 23-06-2009 | Исправлено: Cheery, 04:08 23-06-2009
LuXiMaL



Junior Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Cheery

Цитата:
вот только код выше еще придется менять, чтобы дополнять цифры нулями.. чтобы было не 1.jpg, а 001.jpg
не 10.jpg, а 010.jpg
 

Вот здесь то я и запнулся.
То есть написать так
Цитата:
OnMouseOver="path='http://server/../../00'"  

нельзя?
Спасибо.
Всего записей: 45 | Зарегистр. 27-01-2008 | Отправлено: 04:12 23-06-2009
Cheery



.:МордератоР:.		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
LuXiMaL

Цитата:
То есть написать так  

можно, если конечное число не больше 9

----------
Away/DND
Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 04:15 23-06-2009 | Исправлено: Cheery, 04:16 23-06-2009
LuXiMaL



Junior Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Если я все правильно понял то код должен получиться таким:

Код:
<html>
<body>
<script>
var i = 0;
var N = 16;
var timer = null;
var imgs = new Array();
var path;
 
for (var j = 0; j < N; j++) {
    imgs[j] = new Image();
    var n = j + 1;
    imgs[j].src =path + n + '.jpg';  
 
}
 
function start() {
    if (timer == null) {
        timer = setInterval(change, 400);
    }
}
 
function change() {
    if (++i == N) {
        i = 0;
    }
    document.getElementById('img').src = imgs[i].src;
}
 
function stop() {
    clearInterval(timer);
    timer = null;
    document.getElementById('img').src = imgs[0].src;
}
 
 
 
</script>
 
<img id="img"  
src="http://server/.../.../.001.jpg"  
onmouseover="path='http://server/.../.../00'"
onmousemove="start();"  
onmouseout="stop()">
</body>
</html>

Но почему то не работает...
Где я ошибся?
Всего записей: 45 | Зарегистр. 27-01-2008 | Отправлено: 04:24 23-06-2009
Открыть новую тему     Написать ответ в эту тему

Страницы: 1 2

Компьютерный форум Ru.Board » Интернет » Web-программирование » [HELP]Циклическая смена картинок при наведении мыши


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru