Что-то не работает: смена картинки по клику.
Здравствуйте.
Мне необходим скрипт, в котором по клику на картинку она сменялась на другую, потом на третью. Я нашёл вполне понятный код, сохранил этот код в 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 |
pro_moscow,
скрипт не знает что у вас будет после него. поставьте скрипт перед </body> |
Отлично, всё работает. Но есть ещё один вопрос. Как дописать код таким образом, чтобы при нажатии на кнопку по исчерпанию массива ничего не происходило? Чтобы уберечь картинку от случайного нажатия.
Задачу решил. |
pro_moscow,
function imgsrc(){
i++;
if(i >= imgs.length) return;
image.src=imgs[i];
}
|
При таком десктопном подходе, тебе не нужна функция, хватит инлайнового кода:
<img src="note.jpg" alt="" onclick="this.src = imgs[Math.min(++i,imgs.length-1)]"> |
| Часовой пояс GMT +3, время: 17:16. |