Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.04.2012, 17:26
Новичок на форуме
Отправить личное сообщение для GrafMKristo Посмотреть профиль Найти все сообщения от GrafMKristo
 
Регистрация: 17.04.2012
Сообщений: 9

Ротация изображения кнопки
Здравствуйте, уважаемые специалисты.
Скажите, пожалуйста, как правильно отредактировать код, чтобы атрибуты вызванных объектов окончательно менялись после клика? У меня изображение меняется всего на доли секунды - потом возвращается к первоначально заданному. С дефолтным значением из списка - такая же ерунда. В частности, не могу в этом разобраться, а в целом мне нужна ротация нескольких картинок, и соответствующее изменение в форме ниже.

<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>

Последний раз редактировалось GrafMKristo, 17.04.2012 в 20:14. Причина: Без комментариев не ясна проблема.
Ответить с цитированием
  #2 (permalink)  
Старый 17.04.2012, 19:05
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 642

Сообщение от GrafMKristo Посмотреть сообщение
...мне нужна ротация нескольких картинок, и соответствующее изменение в форме ниже.
knopka.src = 'images/unit.gif';

У Вас в функции change() на image.src зашита константа, поэтому изображение кнопки никак меняться не будет. Но если его менять не надо, то зачем там src =... ?
Ответить с цитированием
  #3 (permalink)  
Старый 17.04.2012, 20:00
Новичок на форуме
Отправить личное сообщение для GrafMKristo Посмотреть профиль Найти все сообщения от GrafMKristo
 
Регистрация: 17.04.2012
Сообщений: 9

Ничего не понял.. Или вы недопоняли вопрос.
Первоначальное изображение - unit.gif. Оно по щелчку меняется на unit1.gif, но долго не задерживается. Буквально несколько миллисекунд - и снова меняется на первоначальный unit.gif.
Точно так же и атрибут выпадающего списка selected - Видно что функция его меняет, но он так же возвращается к первоначальному. А возврата быть не должно в идеале. Где ошибка?

Это для примера код. :-)

Последний раз редактировалось GrafMKristo, 17.04.2012 в 20:03.
Ответить с цитированием
  #4 (permalink)  
Старый 17.04.2012, 20:05
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 642

Главное, чтобы Вы сами хоть поняли свой вопрос. А то по-моему его еще никто не понял...
Ответить с цитированием
  #5 (permalink)  
Старый 17.04.2012, 20:32
Новичок на форуме
Отправить личное сообщение для GrafMKristo Посмотреть профиль Найти все сообщения от GrafMKristo
 
Регистрация: 17.04.2012
Сообщений: 9

<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>
Ответить с цитированием
  #6 (permalink)  
Старый 17.04.2012, 20:41
Новичок на форуме
Отправить личное сообщение для GrafMKristo Посмотреть профиль Найти все сообщения от GrafMKristo
 
Регистрация: 17.04.2012
Сообщений: 9

Вот, вроде описал что жду от кода. :-)
Где-то в сети напоролся на пример, меняющий одну картинку на другую, но там изображение меняли нажатием отдельной кнопки с онКликом.
А мне необходимо, чтобы кнопка "сама себя меняла по щелчку".
Ответить с цитированием
  #7 (permalink)  
Старый 17.04.2012, 20:57
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 642

1.
А мне необходимо, чтобы кнопка "сама себя меняла по щелчку".
Что значит меняла сама себя? Это значит чтобы изменилось её изображение? Если да, то это значит, что нужно в функции change() менять src картинки на другой. А у Вас нет никакого соответствия между разными селектами и разными картинками.

2.
Вы используете форму <form>. Это значит, что бы Вы ни делали в onClick - форма всё-равно отправит запрос на сервер в своем action (который у Вас не описан) и с сервера придет тот же ответ, что и без клика по картинке. Чтобы ответ с сервера пришел другой, т.е. с другой картинкой в кнопке - надо менять параметры запроса в форме к серверу, а это тоже у Вас не делается.
Ответить с цитированием
  #8 (permalink)  
Старый 17.04.2012, 20:59
Новичок на форуме
Отправить личное сообщение для GrafMKristo Посмотреть профиль Найти все сообщения от GrafMKristo
 
Регистрация: 17.04.2012
Сообщений: 9

Много вариантов перепробовал - не помогает.
Помогите, пожалуйста.
Я пытался сделать как тут:
<input type="image" src="/mini_img/img1.jpg"
onClick="this.src='/mini_img/img2.jpg'"
onMouseOut="for (i=1; i&lt;=100000; i=i+1){};
this.src='/mini_img/img1.jpg'" />

Здесь тоже меняют атрибут src у текущего объекта.
Но у меня картинка поменявшись по щелчку ("моргнув" на доли секунды) упрямо возвращается к первоначальной.
Ответить с цитированием
  #9 (permalink)  
Старый 17.04.2012, 21:21
Новичок на форуме
Отправить личное сообщение для GrafMKristo Посмотреть профиль Найти все сообщения от GrafMKristo
 
Регистрация: 17.04.2012
Сообщений: 9

)))
До чего же сложно передать смысл задуманного и суть проблемы.

Забудьте о форме.

Вот, посмотрите.

<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

В чём моя ошибка? Скрипт работает отменно, если вам нужна "моргалка" - то вот она. :-)

Последний раз редактировалось GrafMKristo, 17.04.2012 в 21:23.
Ответить с цитированием
  #10 (permalink)  
Старый 17.04.2012, 21:23
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 642

Сообщение от GrafMKristo Посмотреть сообщение
Но у меня картинка поменявшись по щелчку ("моргнув" на доли секунды) упрямо возвращается к первоначальной.
Ну я же говорю, что Вы отправляете форму на сервер, который сразу присылает Вам в браузер исходный (первоначальный) код! Не используйте форму вообще, сделайте на чистом javascript.
<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>
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Обновление события кнопки TheHappy Общие вопросы Javascript 0 06.03.2012 10:30
Помогите пожалуйста с обьяснением загрузки изображения на сервер. 0931454574 Серверные языки и технологии 3 11.05.2011 18:05
Проверка размера изображения Bizarre Общие вопросы Javascript 4 09.03.2011 18:02
отрисовка изображения по произвольным координатам Th0m@$ Events/DOM/Window 14 23.01.2010 16:04
Визуальное выделение части изображения Гость Общие вопросы Javascript 0 25.02.2008 19:44