Ротация изображения кнопки
Здравствуйте, уважаемые специалисты.:thanks:
Скажите, пожалуйста, как правильно отредактировать код, чтобы атрибуты вызванных объектов окончательно менялись после клика? У меня изображение меняется всего на доли секунды - потом возвращается к первоначально заданному. С дефолтным значением из списка - такая же ерунда. В частности, не могу в этом разобраться, а в целом мне нужна ротация нескольких картинок, и соответствующее изменение в форме ниже. <html> <head> </head> <body> <form> <input type="image" src='images/unit1.gif' id="imgButton" onClick='change()' /><br> //кнопка-изображение <select name="TypeOfValue" size="1" id="TypeOfValue" > //выпадающий список под кнопкой, который тоже <option selected="selected" id="First">First</option> //участвует в событии онклик. <option id="Second">Second</option> //В списке надо поменять дефолтное значение (с <option id="Third">Third</option> //первого на третье, например) <option id="Fourth">Fourth</option> </select> </form> <script type="text/javascript"> var knopka = document.getElementById('imgButton'); //вытаскиваем кнопку-изображение по ID var defaultValue = document.getElementById('Third'); //вытаскиваем по ID объект option (третью по счёту) function change () { knopka.src = 'images/unit.gif'; //меняем атрибут src defaultValue.selected='selected'; //меняем атрибут selected у третьей опции в выпадающем списке } </script> </body> </html> |
Цитата:
knopka.src = 'images/unit.gif'; У Вас в функции change() на image.src зашита константа, поэтому изображение кнопки никак меняться не будет. Но если его менять не надо, то зачем там src =... ? |
Ничего не понял.. Или вы недопоняли вопрос.
Первоначальное изображение - unit.gif. Оно по щелчку меняется на unit1.gif, но долго не задерживается. Буквально несколько миллисекунд - и снова меняется на первоначальный unit.gif. Точно так же и атрибут выпадающего списка selected - Видно что функция его меняет, но он так же возвращается к первоначальному. А возврата быть не должно в идеале. Где ошибка? Это для примера код. :-) |
Главное, чтобы Вы сами хоть поняли свой вопрос. А то по-моему его еще никто не понял...
|
<body>
<form>
<input type="image" src='http://www.telefoner.ru/preview/images/108888.jpg' id="imgButton" onClick='change()' /><br> //кнопка-изображение
<select name="TypeOfValue" size="1" id="TypeOfValue" > //выпадающий список под кнопкой, который тоже
<option selected="selected" id="First">First</option> //участвует в событии онклик.
<option id="Second">Second</option> //В списке надо поменять дефолтное значение (с
<option id="Third">Third</option> //первого на третье, например)
<option id="Fourth">Fourth</option>
</select>
</form>
<script type="text/javascript">
var knopka = document.getElementById('imgButton'); //вытаскиваем кнопку-изображение по ID
var defaultValue = document.getElementById('Third'); //вытаскиваем по ID объект option (третью по счёту)
function change () {
knopka.src = 'http://footzall.at.ua/avatar/57/181477.jpg'; //меняем атрибут src
defaultValue.selected='selected'; //меняем атрибут selected у третьей опции в выпадающем списке
}
</script>
</body>
|
Вот, вроде описал что жду от кода. :-)
Где-то в сети напоролся на пример, меняющий одну картинку на другую, но там изображение меняли нажатием отдельной кнопки с онКликом. А мне необходимо, чтобы кнопка "сама себя меняла по щелчку". |
1.
А мне необходимо, чтобы кнопка "сама себя меняла по щелчку". Что значит меняла сама себя? Это значит чтобы изменилось её изображение? Если да, то это значит, что нужно в функции change() менять src картинки на другой. А у Вас нет никакого соответствия между разными селектами и разными картинками. 2. Вы используете форму <form>. Это значит, что бы Вы ни делали в onClick - форма всё-равно отправит запрос на сервер в своем action (который у Вас не описан) и с сервера придет тот же ответ, что и без клика по картинке. Чтобы ответ с сервера пришел другой, т.е. с другой картинкой в кнопке - надо менять параметры запроса в форме к серверу, а это тоже у Вас не делается. |
Много вариантов перепробовал - не помогает.
Помогите, пожалуйста. Я пытался сделать как тут: <input type="image" src="/mini_img/img1.jpg" onClick="this.src='/mini_img/img2.jpg'" onMouseOut="for (i=1; i<=100000; i=i+1){}; this.src='/mini_img/img1.jpg'" /> Здесь тоже меняют атрибут src у текущего объекта. Но у меня картинка поменявшись по щелчку ("моргнув" на доли секунды) упрямо возвращается к первоначальной. |
)))
До чего же сложно передать смысл задуманного и суть проблемы. Забудьте о форме. Вот, посмотрите. <html> <head> <script type="text/javascript"> function change () { var knopka = document.getElementById('imgButton'); knopka.src = 'images/unit.gif'; } </script> </head> <body> <form> <input type="image" src='images/unit1.gif' id="imgButton" onClick='change()' /><br> </form> </body> </html> Вот что я хочу По клику на изображении (unit1.gif) запускаем функцию change(). Change() вытащит кнопку в качестве объекта и поменяет ей параметр src с первоначального unit1.gif на новый unit.gif. В результате изображение кнопки поменяется. Вот что у меня получается Выводится первое изображение unit1.gif Кликаем на кнопку. Изображение на короткий промежуток времени действительно меняется на unit.gif - я его вижу в течении долей секунды. Изображение ТУТ ЖЕ меняется снова на первоначальное unit1.gif В чём моя ошибка? Скрипт работает отменно, если вам нужна "моргалка" - то вот она. :-) |
Цитата:
<html>
<body>
<script>
function change ()
{
var knopka = document.getElementById('imgButton'); //вытаскиваем кнопку-изображение по ID
if (knopka.n == 1)
{
knopka.src = 'http://gigalit.com.ua/img/slide_1_124x70.jpg'; //меняем атрибут src
knopka.n = 0;
}
else
{
knopka.src = 'http://gigalit.com.ua/img/slide_2_124x70.jpg'; //меняем атрибут src
knopka.n = 1;
};
};
</script>
<input id="imgButton" type="image" src=http://gigalit.com.ua/img/slide_1_124x70.jpg onClick=change()>
</body>
</html>
|
| Часовой пояс GMT +3, время: 03:44. |