Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.08.2016, 22:25
Интересующийся
Отправить личное сообщение для pro_moscow Посмотреть профиль Найти все сообщения от pro_moscow
 
Регистрация: 13.06.2010
Сообщений: 10

Что-то не работает: смена картинки по клику.
Здравствуйте.

Мне необходим скрипт, в котором по клику на картинку она сменялась на другую, потом на третью.

Я нашёл вполне понятный код, сохранил этот код в index.html, но почему-то он не работает. У меня есть 3 картинки: note.png, note_30.png, note_30_.png, я исправил код в соответствии с этими картинками. На экране появляется картинка note.png. Но клик не происходит, картинка не меняется. Все картинки лежат в той же папке, что и индекс. Что я сделал не так?

Вот код:

<html>
    <head>
    <title>Смена картинок</title>
    <script language="javascript">
    var i=0;
    var image=document.getElementById("image");
    var imgs=new Array('note.png','note_30.png', 'note_30_.png');
    function imgsrc(){
    i++;
    image.src=imgs[i];
    }
    </script>
    </head>
    <body>
    <img id="image" src="note.png" onClick="imgsrc();">
    </body>
    </html>


Для того, чтобы увидеть скрипт в действии, загрузил его на временный хост: http://melody.a-workshop.ru/index.html
Ответить с цитированием
  #2 (permalink)  
Старый 04.08.2016, 22:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,029

pro_moscow,
скрипт не знает что у вас будет после него.
поставьте скрипт перед </body>
Ответить с цитированием
  #3 (permalink)  
Старый 04.08.2016, 22:36
Интересующийся
Отправить личное сообщение для pro_moscow Посмотреть профиль Найти все сообщения от pro_moscow
 
Регистрация: 13.06.2010
Сообщений: 10

Отлично, всё работает. Но есть ещё один вопрос. Как дописать код таким образом, чтобы при нажатии на кнопку по исчерпанию массива ничего не происходило? Чтобы уберечь картинку от случайного нажатия.

Задачу решил.

Последний раз редактировалось pro_moscow, 04.08.2016 в 23:41.
Ответить с цитированием
  #4 (permalink)  
Старый 04.08.2016, 23:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,029

pro_moscow,
function imgsrc(){
    i++;
    if(i >= imgs.length) return;
    image.src=imgs[i];
    }
Ответить с цитированием
  #5 (permalink)  
Старый 05.08.2016, 05:01
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

При таком десктопном подходе, тебе не нужна функция, хватит инлайнового кода:

<img src="note.jpg" alt="" onclick="this.src = imgs[Math.min(++i,imgs.length-1)]">
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Психологическая деформация программистов DreamTheater Оффтопик 59 24.03.2012 03:03
http://gigalit.info - Мои контакты Маэстро Ваши сайты и скрипты 70 08.12.2011 01:12
фрактальный сыр x-yuri Оффтопик 76 23.11.2011 19:59
Как узнать что у пользователя отключены картинки ? micscr Общие вопросы Javascript 8 21.09.2009 10:13
Смена картинки при перезагрузке + наведении Мария Элементы интерфейса 2 22.08.2009 13:57