ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Рандомное изображение и события OnMouse. Help!
20 сообщений из 20, страница 1 из 1
Рандомное изображение и события OnMouse. Help!
    #35623783
Lermontov
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Lermontov
Гость
Мне нужно, чтобы при каждом обновлении страницы картинка менялась случайным образом на одно из трех изображений + при на ведении на нее мыши - она заменялась всегда на 4-ую, а при отводе мыши снова выполнялась рандомизация из 3-х изображений.

По отдельности (то есть рандомизация отдельно, OnMouse-события отдельно) эту задачу я решил так:

<Script Language=JavaScript>
var imagesarr = new Array(
"images/1of_01.jpg",
"images/2.jpg",
"images/3.jpg");
var commentsarr = new Array(
"Alt -1",
"Alt - 2",
"Alt - 3");
</script> <script Language=JavaScript>
var los = Math.floor(Math.random() * imagesarr.length)
document.write ("<Img Src='"+imagesarr[los]+"' Alt='"+commentsarr[los]+"'>");
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p><img src="images/4.JPG" width="155" height="109" NAME="pic1" onMouseOver="document.pic1.src='./images/1of_01.jpg'" onMouseOut="document.pic1.src='./images/4.jpg'"> </p>
</body>
</html>

Но как всё это слить к одному изображению?
...
Рейтинг: 0 / 0
29.10.2008, 17:50
| Ответить | Цитировать | Написать  
Рандомное изображение и события OnMouse. Help!
    #35623878
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IDVsbruck
Участник
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
<script type="text/javascript">
    var images_src = ["images/1of_01.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg"];
    var images_comment = ["Alt -1", "Alt - 2", "Alt - 3", ""];
    var image = document.getElementById("our_image");
    image.onmouseover = function() {
        var i = Math.floor(Math.random() * (images_src.length -  1 ));
        this.src = images_src[i];
        this.alt = images_comment[i];
    };
    image.onmouseout = function() {
        this.src = images_src[ 3 ];
        this.alt = images_comment[ 3 ];
    };
</script>

<body>
    <p><img src="images/4.JPG" width="155" height="109" name="pic1" id="our_image"></p>
</body>
...
Рейтинг: 0 / 0
29.10.2008, 18:26
| Ответить | Цитировать | Написать  
Рандомное изображение и события OnMouse. Help!
    #35623891
Фотография Warstone
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Warstone
Участник
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
<HTML><HEAD><SCRIPT>
function switchTo(obj, number){
if(number=="undefined"){
  number=Math.foor(Math.random()*--obj.imglength);
}
obj.src=obj.getAttribute("img"+number);
}
</SCRIPT>
</HEAD>
<BODY>
<IMG src="1.jpg" img0="1.jpg" img1="2.jpg" img2="3.jpg" img3="4.jpg" imglength="3" onMouseOver="switchTo(this, 4)" onMouseOu="switchTo(this)">
</BODY>
</HTML>
...
Рейтинг: 0 / 0
29.10.2008, 18:31
| Ответить | Цитировать | Написать  
Рандомное изображение и события OnMouse. Help!
    #35623897
Фотография Warstone
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Warstone
Участник
IDVsbruck
Не сработает. Так как out_image нет во время getElementById. Получишь ошибку. Тебе это или после <BODY> надо делать или в onload для окна.
...
Рейтинг: 0 / 0
29.10.2008, 18:34
| Ответить | Цитировать | Написать  
Рандомное изображение и события OnMouse. Help!
    #35624124
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IDVsbruck
Участник
Ну так сделай ... я ж не готовую страницу дал, а вариант обхода того, что не получалось.
Что куда ставить, думаю, топикстартер сделает ...
Пользовательские атрибуты - не совсем "кошерно" (c)illion
...
Рейтинг: 0 / 0
29.10.2008, 20:47
| Ответить | Цитировать | Написать  
Рандомное изображение и события OnMouse. Help!
    #35624127
Lermontov
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Lermontov
Гость
Warstone, что-то не получается. При запуске все время одна и та же картинка, а при наведении мыши показывается отсутствие картинки.

P.S. Вы забыли t в onMouseOut :)
...
Рейтинг: 0 / 0
29.10.2008, 20:50
| Ответить | Цитировать | Написать  
Рандомное изображение и события OnMouse. Help!
    #35624130
Lermontov
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Lermontov
Гость
IDVsbruck , не могли бы вы готовую страницу дать :)
...
Рейтинг: 0 / 0
29.10.2008, 20:53
| Ответить | Цитировать | Написать  
Рандомное изображение и события OnMouse. Help!
    #35624135
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IDVsbruck
Участник
Просто ставишь скрипт не в <head>, а после <body></body> перед закрывающим </html>.
Или можно оставить скрипт на месте, но сделать конструкцию
windows.onload = function() {
а сюда поместить содержимое скрипта, чтобы "оно" выполнялось после загрузки страницы
}
...
Рейтинг: 0 / 0
29.10.2008, 20:57
| Ответить | Цитировать | Написать  
Рандомное изображение и события OnMouse. Help!
    #35624152
Lermontov
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Lermontov
Гость
IDVsbruck , сделал по первому варианту, без windows.onload = function(), потому что с ней тоже выдавало ошибку сценария. Осталась проблема, чтобы при загрузке страницы (и обновлении) выдавалась одна из трех картинок. А тут всегда выдается четвертая на старте. (Плюс поменял местами over и out)
автор<body>
<p><img src="images/4.JPG" width="155" height="109" name="pic1" id="our_image"></p>
</body>
<script type="text/javascript">
var images_src = ["images/1of_01.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg"];
var images_comment = ["Alt -1", "Alt - 2", "Alt - 3", ""];
var image = document.getElementById("our_image");
image.onmouseover = function() {
this.src = images_src[3];
this.alt = images_comment[3];

};
image.onmouseout = function() {
var i = Math.floor(Math.random() * (images_src.length - 1));
this.src = images_src[i];
this.alt = images_comment[i];

};
</script>
</html>
...
Рейтинг: 0 / 0
29.10.2008, 21:17
| Ответить | Цитировать | Написать  
Рандомное изображение и события OnMouse. Help!
    #35624169
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
Почти написал работающий премерчик. Рабочий день закончился (уже дома сижу). Могу сказать, что надо забыть про "document.write", присвоить картинке айдишник. ( IDVsbruck ) уже почти всё и написал. Ну и менять когда надо срц этой самой картинки. Дальше - самое трудное - думать надо... .
...
Рейтинг: 0 / 0
29.10.2008, 21:39
| Ответить | Цитировать | Написать  
Рандомное изображение и события OnMouse. Help!
    #35624209
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IDVsbruck
Участник
... г-н Лермонтов, Вы обработчик событий местами поменяли ...
...
Рейтинг: 0 / 0
29.10.2008, 22:30
| Ответить | Цитировать | Написать  
Рандомное изображение и события OnMouse. Help!
    #35624210
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IDVsbruck
Участник
... а, блин, я подумал, что это ошибка, а потом только увидел, что это мною техзадание неправильно понято ... прдн ...
...
Рейтинг: 0 / 0
29.10.2008, 22:31
| Ответить | Цитировать | Написать  
Рандомное изображение и события OnMouse. Help!
    #35624249
Lermontov
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Lermontov
Гость
IDVsbruck , помогите пожалуйста. Я уже всю голову сломал.
...
Рейтинг: 0 / 0
29.10.2008, 23:19
| Ответить | Цитировать | Написать  
Рандомное изображение и события OnMouse. Help!
    #35624357
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IDVsbruck
Участник
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
<html>
<head>
    <script type="text/javascript">
        var images_src = ["images/1of_01.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg"];
        var images_comment = ["Alt -1", "Alt - 2", "Alt - 3", ""];
        window.onload = function() {
            var image = document.getElementById("our_image");
            setImage(image, rndImage());
            image.onmouseout = function() {setImage(this, rndImage())};
            image.onmouseover = function() {setImage(this,  3 )};
        };
        function rndImage() {return Math.floor(Math.random() * (images_src.length -  1 ));}
        function setImage(_image, n) {
            _image.src = images_src[n];
            _image.alt = images_comment[n];
        }
    </script>
</head>
<body>
    <p><img src="" width="155" height="109" name="pic1" id="our_image"></p>
</body>
</html>
Вроде так ...
1. Грузимся со случайной картинкой.
2. Когда наводим, получаем четвертую.
3. Когда уводим, грузим случайную.

Конечно, лучше использовать DOM с заменой уже готовых имиджей - будет быстрее работать и даже возможно, что без миганий. Но, думаю, это будет следующим шагом.

Еще можно попробовать со стилями, правда, прийдется использовать не image, а ссылку <а>. Попробовал, но слету не получилось - думал при наведении (:hover) менять backgroung у не-hover. Идея очень интересна, особенно тем, что картинка уже успееет подгрузиться, пока пользователь будет находиться над картинкой и смена будет происходить мгновенно - не будут миганий. Однако не получилось, так как подмена бекграунда ведет за собой изменение и видимого изображения. Можно, конечно, использовать 2 стиля и пока используем один, менять бекграунд у второго и при покидании картинки менять стиль. Тоже, думаю, будет быстрее. Кстати, этот вариант можно применить даже к имиджу (без :hover).

Если юзать jQuery, то код и вовсе простой получится в скриптовой части:
Код: plaintext
$("#our_image").hover(function(){this.src="images/4.jpg";},function(){var im_src=["images/1of_01.jpg","images/2.jpg","images/3.jpg"];this.src=im_src[Math.floor(Math.random()* 3 )];})

Делал на скорую руку, так что возможны "помарки".
...
Рейтинг: 0 / 0
30.10.2008, 01:51
| Ответить | Цитировать | Написать  
Рандомное изображение и события OnMouse. Help!
    #35624364
Lermontov
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Lermontov
Гость
IDVsbruck , спасибо большое! Это то, что нужно! Вы настоящий друг :)
...
Рейтинг: 0 / 0
30.10.2008, 02:13
| Ответить | Цитировать | Написать  
Рандомное изображение и события OnMouse. Help!
    #35624375
Lermontov
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Lermontov
Гость
Только мне не понятно, почему на странице перестают работать обработчики событий OnMouse ... для других картинок. Но вообще, это не важно.
...
Рейтинг: 0 / 0
30.10.2008, 02:48
| Ответить | Цитировать | Написать  
Рандомное изображение и события OnMouse. Help!
    #35624380
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
IDVsbruck,

про мигания. При разборе одной тырнетовской менюшки, работающей от js, встретила такую конструкцию:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
<style>
.preload1 {width: 0 ; height: 0 ; background: url('img1.png');}
.preload2 {width: 0 ; height: 0 ; background: url('img2.png');}
</style>
<body>
<div class="preload1" /><div class="preload2" />
...меню, в котором применялись img1.png и img2.png...
...и еще многа букаф...
</body>
выглядит странновато, зато и впрямь не моргало.

Lermontov IDVsbruck , спасибо большое! ...Вы настоящий друг :)
"Спасибо тебе, Чебурашка, ты настоящий друг!" (с)Крокодил Гена
:-)))прикольный был мульт

LermontovТолько мне не понятно, почему на странице перестают работать обработчики событий OnMouse ... для других картинок
вот и мне непонятно. Давайте сюда упрощенный нерабочий код - с одной рандомной картинкой и одной со сломанным обработчиком.
...
Рейтинг: 0 / 0
30.10.2008, 03:02
| Ответить | Цитировать | Написать  
Рандомное изображение и события OnMouse. Help!
    #35624518
Lermontov
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Lermontov
Гость
<html>
<head>
<script type="text/javascript">
var images_src = ["im/1.jpg", "im/2.jpg", "im/3.jpg", "im/4.jpg"];
var images_comment = ["Alt -1", "Alt - 2", "Alt - 3", ""];
window.onload = function() {
var image = document.getElementById("our_image");
setImage(image, rndImage());
image.onmouseout = function() {setImage(this, rndImage())};
image.onmouseover = function() {setImage(this, 3)};
};
function rndImage() {return Math.floor(Math.random() * (images_src.length - 1));}
function setImage(_image, n) {
_image.src = images_src[n];
_image.alt = images_comment[n];
}
</script>
</head>
<body>
<img src="" width="200" height="199" name="pic1" id="our_image">
<p><img src="images/4.JPG" width="155" height="109" NAME="pic1" onMouseOver="document.pic1.src='./images/1.jpg'" onMouseOut="document.pic1.src='./images/4.jpg'"> </p>
</body>
</html>

illion , вот то, что жирным - это относится к другой картинке. Она перестала работать, когда я добавил в <body> <img src="" width="200" height="199" name="pic1" id="our_image">

P.S. Как постить кодом? тег code тут не работает.
...
Рейтинг: 0 / 0
30.10.2008, 08:58
| Ответить | Цитировать | Написать  
Рандомное изображение и события OnMouse. Help!
    #35624617
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
А чего у них у всех наме одинаковый?
...
Рейтинг: 0 / 0
30.10.2008, 09:39
| Ответить | Цитировать | Написать  
Рандомное изображение и события OnMouse. Help!
    #35625018
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IDVsbruck
Участник
Нет кода, зато есть SRC ...

г-н Лермонтов, хорошо бы литературку почитать по javascript, а заодно и по html и css.
1. Обработчика события onMouseOver нет, есть onmouseover.
2. То же самое относится к onMouseOut.
3. "document.pic1.src" - IE only, аж типает от такой записи. Надо присваивать id и обращаться через document.getElementById(id).
4. Зачем называть разные элементы одним именем, если это не радиокнопки? Это я про name=pic1.

Исправь эти ошибки и будет тебе счастье.
...
Рейтинг: 0 / 0
30.10.2008, 11:32
| Ответить | Цитировать | Написать  
20 сообщений из 20, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Рандомное изображение и события OnMouse. Help!
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=314&tid=1455658]:
 0ms
get settings:
 7ms
get forum list:
 19ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 41ms
get topic data:
 8ms
get forum data:
 2ms
get page messages:
 54ms
get tp. blocked users:
 1ms
others: 205ms
total:  341ms
созд. / загр.: 341ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]