При наведении курсора мыши на картинку ее изображение должно меняться на другое

@kaztennis · Регистрация: 28.09.2013

Студворк — интернет-сервис помощи студентам

1. По нажатию на кнопку button_1 пользователь получает одно из трех сообщений: "Кликни-ка еще разик", "Эта кнопка — самая замечательная кнопка в мире", "Ну чего раскликался тут?!".

2. с командой onMouseOut
При наведении курсора мыши на картинку изображение должно меняться на другое, а когда курсор покинет область картинки, должно восстанавливаться прежнее изображение .
Заранее спасибо

@nubideus · 12.10.2013, 17:31

kaztennis, http://jsfiddle.net/6GeuF/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
    <head>
        <script>
window.onload = function(){
    var button = document.getElementById("button");
 
    var values = ["Кликни-ка еще разик", "Эта кнопка — самая замечательная кнопка в мире", "Ну чего раскликался тут?!"];
 
    button.onclick = function(){
        this.value = values[Math.floor(Math.random() * values.length)];
    };
 
    var image = document.getElementById("image");
    var imagesURLs = ["http://cs319427.vk.me/v319427435/7b53/G_UKN545dik.jpg", "http://www.rg.ru/img/content/84/23/63/100_50x50.jpg"];
 
    image.src = imagesURLs[0];
 
    image.onmouseover = function(){
        this.src = imagesURLs[1];
    };
    image.onmouseout = function(){
        this.src = imagesURLs[0];
    };
}
        </script>
    </head>
    <body>
        <input id="button" type="button" value="123"/>
        <br/>
        <img id="image"/>
    </body>
</html>

@vooduq · 12.10.2013, 17:37

1.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
function msgClick(){
    var rand = Math.random();
        if(rand < .33) {
            alert("Кликни-ка еще разик");
        }
        else if(rand > .33 && rand < .66) {
            alert("Эта кнопка — самая замечательная кнопка в мире");
        }
        else if(rand > .66) {
            alert("Ну чего раскликался тут?!");
        }
};

HTML5
1
<button onclick="msgClick()"></button>

@nubideus · 12.10.2013, 22:45

vooduq, а если делать так:

JavaScript
1
2
3
4
5
6
7
8
var rand = Math.floor(Math.random() * 3);
if(rand === 0){
  // 1
} else if(rand === 1){
  // 2
} else if(rand === 2){
  // 3
}

?

или так:

JavaScript
1
2
3
4
5
6
var rand = Math.floor(Math.random() * 3);
switch(rand){
  case 0: /* 1 */; break;
  case 1: /* 2 */; break;
  case 2: /* 3 */; break;
}

кстати можно так:

JavaScript
1
2
3
4
5
6
7
8
var rand = Math.random();
if(rand > .66){
  // 3
} else if(rand > .33){
  // 2
} else /* if(rand >= 0) */{
  // 1
}

@vooduq · 12.10.2013, 22:51

nubideus ну ласт самый норм%D

только нужно будет тогда

JavaScript
1
2
3
4
5
6
7
8
var rand = Math.random();
if(rand > .66){
  // 3
} else if(rand < .33){
  // 1
} else {
  // 2
}

@nubideus · 13.10.2013, 00:59

Сообщение от vooduq

ну ласт самый норм%D

ну так понадобится добавить четвертый вариант, придется на .25 переписывать

Сообщение от vooduq

только нужно будет тогда

почему? работает же.
еще лучше так:

JavaScript
1
2
3
4
5
6
7
8
var rand = Math.random();
if(rand < .33){
  // 1
} else if(rand < .66){
  // 2
} else /* if(rand < 1) */{
  // 3
}

так оно хотя бы по порядку

@vooduq · 13.10.2013, 01:19

а ну да, неопытен : D

@kaztennis · 13.10.2013, 23:35 **[ТС]**

Сообщение от nubideus

kaztennis, http://jsfiddle.net/6GeuF/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
    <head>
        <script>
window.onload = function(){
    var button = document.getElementById("button");
 
    var values = ["Кликни-ка еще разик", "Эта кнопка — самая замечательная кнопка в мире", "Ну чего раскликался тут?!"];
 
    button.onclick = function(){
        this.value = values[Math.floor(Math.random() * values.length)];
    };
 
    var image = document.getElementById("image");
    var imagesURLs = ["http://cs319427.vk.me/v319427435/7b53/G_UKN545dik.jpg", "http://www.rg.ru/img/content/84/23/63/100_50x50.jpg"];
 
    image.src = imagesURLs[0];
 
    image.onmouseover = function(){
        this.src = imagesURLs[1];
    };
    image.onmouseout = function(){
        this.src = imagesURLs[0];
    };
}
        </script>
    </head>
    <body>
        <input id="button" type="button" value="123"/>
        <br/>
        <img id="image"/>
    </body>
</html>

Здравствуйте можете помочь скомпоновать эту задачку. отдельно собрать только эту часть:

По нажатию на кнопку button_1 пользователь получает одно из трех сообщений: "Кликни-ка еще разик", "Эта кнопка — самая замечательная кнопка в мире", "Ну чего раскликался тут?!".
то есть без появления картинк., а то убирая скрипт картинки у меня выходит не правильно скрипт задачи чисто про кнопочку. буду рад за помощь.....

Добавлено через 6 минут

Сообщение от nubideus

ну так понадобится добавить четвертый вариант, придется на .25 переписывать

почему? работает же.
еще лучше так:

JavaScript
1
2
3
4
5
6
7
8
var rand = Math.random();
if(rand < .33){
  // 1
} else if(rand < .66){
  // 2
} else /* if(rand < 1) */{
  // 3
}

так оно хотя бы по порядку

привет не подскажете пару вопросов на счет задачи кнопки со словами. не могу найти смысл некоторых строк

@nubideus · 13.10.2013, 23:51

kaztennis,
кнопка:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
    <head>
        <script>
window.onload = function(){
    var button = document.getElementById("button");
 
    var values = ["Кликни-ка еще разик", "Эта кнопка — самая замечательная кнопка в мире", "Ну чего раскликался тут?!"];
 
    button.onclick = function(){
        this.value = values[Math.floor(Math.random() * values.length)];
    };
}
        </script>
    </head>
    <body>
        <input id="button" type="button" value="123"/>
    </body>
</html>

картинки:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
    <head>
        <script>
window.onload = function(){
    var image = document.getElementById("image");
    var imagesURLs = ["http://cs319427.vk.me/v319427435/7b53/G_UKN545dik.jpg", "http://www.rg.ru/img/content/84/23/63/100_50x50.jpg"];
 
    image.src = imagesURLs[0];
 
    image.onmouseover = function(){
        this.src = imagesURLs[1];
    };
    image.onmouseout = function(){
        this.src = imagesURLs[0];
    };
};
        </script>
    </head>
    <body>
        <img id="image"/>
    </body>
</html>

Сообщение от kaztennis

не могу найти смысл некоторых строк

а шо тут искать, все просто, даже объяснять не охота.
Math.floor округляет число в меньшую сторону.
Math.random дает случайное значение большее или равное нулю и меньшее единицы.
при умножении Math.random() на множитель произведение будет в диапазоне от нуля или равное нулю, до самого множителя.
(кстати меня раздражаю ребята, которые используют функции подобные getRandom(min, max)).

остальное нечего объяснять, все должно быть понятно, иначе го читать учебники.

@Latino · 14.10.2013, 15:26

Первая задача

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
function vibor(){
var ch = Math.floor(Math.random()*(2+1));
if (ch==0) {
    alert('Кликни - ка ещё раз.');
}
if (ch==1) {
    alert('Эта кнопка - самая замечательная кнопка в мире!');
}
if (ch==2) {
    alert('Чего раскликался тут?!')
}
}
</script>
<input type="button" value="Нажми" onclick="vibor()"/>

Вторая задача

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
    function smena1 ()  
    {
        var kar = document.getElementById('pic1');
        kar.getAttribute('src', false);
        kar.setAttribute('src','image/Tulips.jpg', false);
                   }
                   function smena2()
                   
                   {
                    
               var kar = document.getElementById('pic1');
        
        
        kar.getAttribute('src', false);
        kar.setAttribute('src','image/Penguins.jpg', false);
                    
                   }
    
</script>
 
<img src="image/Penguins.jpg" width="50%" height="50%" id="pic1" onmouseout="smena1()" onmouseover="smena2()" />

Новые блоги и статьи Все статьи Все блоги /
Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/
Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .

@kaztennis 4 / 4 / 0 Регистрация: 28.09.2013 Сообщений: 93

	При наведении курсора мыши на картинку ее изображение должно меняться на другое 12.10.2013, 17:06. Показов 9594. Ответов 9 Метки нет (Все метки) 1. По нажатию на кнопку button_1 пользователь получает одно из трех сообщений: "Кликни-ка еще разик", "Эта кнопка — самая замечательная кнопка в мире", "Ну чего раскликался тут?!". 2. с командой onMouseOut При наведении курсора мыши на картинку изображение должно меняться на другое, а когда курсор покинет область картинки, должно восстанавливаться прежнее изображение . Заранее спасибо 0

@vooduq 69 / 69 / 22 Регистрация: 06.06.2013 Сообщений: 404
	13.10.2013, 01:19
	а ну да, неопытен : D 1