html спойлер и кнопка смены

Question

html спойлер и кнопка смены

0

Как я могу изменить src входного изображения в onclick и создать спойлер? Я хочу, чтобы это произошло:

(кнопка, которая говорит: show) <- Эта кнопка будет иметь изображение 1

после щелчка на нем отобразится кнопка с другим изображением

(кнопка, которая гласит: скрыть) <- Эта кнопка будет иметь изображение 2

Единственное, что я хочу, чтобы src изображения кнопки изменился, но не значение ввода кнопки, потому что я использую ввод изображения, а не кнопку. Вот мой текущий код:

<script type="text/javascript">
function showSpoiler(obj)
    {
    var inner = obj.parentNode.getElementsByTagName("div")[0];
    if (inner.style.display == "none")
        inner.style.display = "";
    else
        inner.style.display = "none";
    }
</script>   
<div class="spoiler">
        <INPUT type="image" id="image" src="http://www.ogiatech.com/files/theme/icon_plus.png" value="" onclick="showSpoiler(this);" style="outline: none;" 
        onmouseover="this.src='http://www.ogiatech.com/files/theme/icon_plus_hover.png'" 
        onmouseout="this.src='http://www.ogiatech.com/files/theme/icon_plus.png'" />
        <div class="inner" style="display:none;">
        This is a spoiler!
        </div>
    </div>

Я хочу, чтобы изображение src для ввода с id = "image", И изображения для эффекта опрокидывания, чтобы изменить onclick. Я знаю, что это может ввести в заблуждение, но есть ли способ достичь этого?

user3171319 15 март 2014, в 18:04

Источник

Теги:

javascript

html

image

onclick

1 ответ

Ещё вопросы

simpletron · Answer 1 · 2014-03-15T14-08-00.000Z

Вы можете попробовать другой подход. Используйте скрытый тег ввода с src, как вы хотите. Позже используйте img для изменения изображения как http://jsfiddle.net/G4Y5t/

 <div class="spoiler">
     <img id="image" 
          src="http://www.ogiatech.com/files/theme/icon_plus.png" 
          onclick="showSpoiler(this);" style="outline: none;"
          onmouseover="this.src='http://www.ogiatech.com/files/theme/icon_plus_hover.png'" 
          onmouseout="this.src='http://www.ogiatech.com/files/theme/icon_plus.png'" />
     <input type="hidden" value="your image src" />
     <div class="inner" style="display:none;">This is a spoiler!</div>
 </div>

Вы можете изменить атрибут input значения внутри своей функции, если хотите.

Надеюсь, что эта помощь