Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/13: Рейтинг темы: голосов - 13, средняя оценка - 5.00
kaztennis
3 / 3 / 0
Регистрация: 28.09.2013
Сообщений: 93
1

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

12.10.2013, 17:06. Просмотров 2426. Ответов 9
Метки нет (Все метки)

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


2. с командой onMouseOut
При наведении курсора мыши на картинку изображение должно меняться на другое, а когда курсор покинет область картинки, должно восстанавливаться прежнее изображение .
Заранее спасибо
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
12.10.2013, 17:06
Ответы с готовыми решениями:

При нажатие на динамическое изображение оно должно меняться на другое
Доброе время суток ! У меня возникла такая проблема: не могу с своем скрипте ...

По нажатию на картинку image_1 изображение должно случайным образом меняться на одно из пяти.
По нажатию на картинку image_1 изображение должно случайным образом меняться на...

По нажатию на картинку image_1 изображение должно случайным образом меняться на одно из пяти
<html> <head> <title>Смена картинок</title> <script language="javascript">...

При наведении курсора на картинку
Добрый вечер! К сути: Хотелось сделать так, чтобы при наведении курсора на...

Подсказка при наведении курсора мыши
Смотрю видеоурок, и там переписал вот такой код. Должно при наведении на текст...

9
nubideus
390 / 272 / 76
Регистрация: 19.09.2011
Сообщений: 828
12.10.2013, 17:31 2
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>
1
vooduq
69 / 69 / 22
Регистрация: 06.06.2013
Сообщений: 404
12.10.2013, 17:37 3
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>
0
nubideus
390 / 272 / 76
Регистрация: 19.09.2011
Сообщений: 828
12.10.2013, 22:45 4
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
}
1
vooduq
69 / 69 / 22
Регистрация: 06.06.2013
Сообщений: 404
12.10.2013, 22:51 5
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
}
1
nubideus
390 / 272 / 76
Регистрация: 19.09.2011
Сообщений: 828
13.10.2013, 00:59 6
Цитата Сообщение от 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
}
так оно хотя бы по порядку
2
vooduq
69 / 69 / 22
Регистрация: 06.06.2013
Сообщений: 404
13.10.2013, 01:19 7
а ну да, неопытен : D
1
kaztennis
3 / 3 / 0
Регистрация: 28.09.2013
Сообщений: 93
13.10.2013, 23:35  [ТС] 8
Цитата Сообщение от 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
}
так оно хотя бы по порядку
привет не подскажете пару вопросов на счет задачи кнопки со словами. не могу найти смысл некоторых строк
0
nubideus
390 / 272 / 76
Регистрация: 19.09.2011
Сообщений: 828
13.10.2013, 23:51 9
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)).

остальное нечего объяснять, все должно быть понятно, иначе го читать учебники.
1
Latino
34 / 34 / 4
Регистрация: 28.05.2013
Сообщений: 180
14.10.2013, 15:26 10
Первая задача
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()" />
0
14.10.2013, 15:26
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
14.10.2013, 15:26

Эффект вибрации при наведении курсора на картинку
Доброго времени суток!)..На странице есть много небольших фоток (квадратные...

Смена фона при наведении курсора мыши на ячейку таблицы
Создать функцию, которая будет изменять фон слоя в соответствии с фоном ячейки...

При наведении мыши на изображение заголовок меняется
Создайте страницу HTML. В центре поместите заголовок, под ним рисунок. Если...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru