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

Question

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

(кнопка с надписью: показать) <- эта кнопка будет иметь изображение 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", И изображения для эффекта опрокидывания менялись при нажатии. Я знаю, что это может сбивать с толку, но есть ли способ достичь этого?

Answer 1

Вы можете попробовать другой подход. Используйте скрытый тег ввода с 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 атрибут значения внутри вашей функции, если хотите.

Надеюсь это поможет