Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Смена картинки при нажатии на button (https://javascript.ru/forum/misc/48755-smena-kartinki-pri-nazhatii-na-button.html)

Nexor 15.07.2014 20:16

Смена картинки при нажатии на button
 
Выручайте. Я не силен в javascript, но мне нужно реализовать одну небольшую фичу.

Есть кнопка спойлер "Принять участие" при нажатии на которую появляется форма комментирования. В другой части страницы, есть изображение.
<div id="girl">
<img src="/women.png" border="0" alt="" />
</div>


Мне нужно, чтоб при нажатии на кнопку "Принять участие" это изображение изменилось на другое и при этом работал спойлер.

Вот код самой кнопки со спойлером:

<div class="uSpoilerClosed" id="uSpoileraWRsRt"><div class="uSpoilerButBl"><input class="uSpoilerButton" onclick="if($('#uSpoileraWRsRt')[0]){if ($('.uSpoilerText',$('#uSpoileraWRsRt'))[0].style.display=='none'){$('.uSpoilerText',$('#uSpoileraWRsRt'))[0].style.display='';$('.uSpoilerButton',$('#uSpoileraWRsRt')).val('Оставьте комментарий');$('#uSpoileraWRsRt').attr('class','uSpoilerOpened');}else {$('.uSpoilerText',$('#uSpoileraWRsRt'))[0].style.display='none';$('.uSpoilerButton',$('#uSpoileraWRsRt')).val('Принять участие');$('#uSpoileraWRsRt').attr('class','uSpoilerClosed');}}" value="Принять участие" type="button"></div><div class="uSpoilerText" style="display: none;"><!--ust--><br><?if($COM_CAN_ADD$)?>
$COM_ADD_FORM$
<?else?>
<?if($USER_LOGGED_IN$)?><?else?><div align="center" class="commReg"><!--<s5237>-->Добавлять комментарии могут только зарегистрированные пользователи.<!--</s>--><br />[ <a href="$REGISTER_LINK$"><!--<s3089>-->Регистрация<!--</s>--></a> | <a href="$LOGIN_LINK$"><!--<s3087>-->Вход<!--</s>--></a> ]</div><?endif?>
<?endif?><!--/ust--><!--usn(=Title)--></div></div><br>

madflash001 15.07.2014 21:28

В свой onclick на кнопке "Принять участие" добавьте
document.getElementById('girl').firstChild.src = 'НОВАЯ КАРТИНКА'


НОВАЯ КАРТИНКА заменить на адрес картинки, которая должна появляться при нажатии на кнопку.

Nexor 15.07.2014 22:02

Цитата:

Сообщение от madflash001 (Сообщение 321211)
В свой onclick на кнопке "Принять участие" добавьте
document.getElementById('girl').firstChild.src = 'НОВАЯ КАРТИНКА'


НОВАЯ КАРТИНКА заменить на адрес картинки, которая должна появляться при нажатии на кнопку.


К сожалению не работает.

Сделал все как написано:

<div class="uSpoilerClosed" id="uSpoileraWRsRt"><div class="uSpoilerButBl">oile<input class="uSpoilerButton" onclick="if($('#uSpoileraWRsRt')[0]){if ($('.uSpoilerText',$('#uSpoileraWRsRt'))[0].style.display=='none'){$('.uSpoilerText',$('#uSpoileraWRsRt'))[0].style.display='';$('.uSpoilerButton',$('#uSpoileraWRsRt')).val('Оставьте комментарий');$('#uSpraWRsRt').attr('class','uSpoilerOpened');}else {$('.uSpoilerText',$('#uSpoileraWRsRt'))[0].style.display='none';$('.uSpoilerButton',$('#uSpoileraWRsRt')).val('Принять участие');$('#uSpoileraWRsRt').attr('class','uSpoilerClosed');}}document.getElementById('girl').firstChild.src ='/images/razdachy/women2.png'" value="Принять участие" type="button"></div><div class="uSpoilerText" style="display: none;"><!--ust--><br><?if($COM_CAN_ADD$)?>

Nexor 16.07.2014 13:06

Других вариантов нет :-? ?

jsnb 16.07.2014 14:11

Цитата:

Сообщение от madflash001
document.getElementById('girl').firstChild.src = 'НОВАЯ КАРТИНКА'

firstChild будет текстовым узлом. Можно заменить на children[0]. А лучше так:
document.querySelector('#girl>img').src = 'new_img_URL';

Nexor 16.07.2014 14:37

Цитата:

Сообщение от jsnb (Сообщение 321304)
firstChild будет текстовым узлом. Можно заменить на children[0]. А лучше так:
document.querySelector('#girl>img').src = 'new_img_URL';

Отлично, работает :) Спасибо.


Часовой пояс GMT +3, время: 05:00.