html 剧透和更改按钮答案

【问题标题】：html spoiler and changing buttonhtml 剧透和更改按钮
【发布时间】：2014-03-15 16:14:16
【问题描述】：

如何在点击时更改图像输入的 src 并创建剧透？我希望这种情况发生：

（显示的按钮）

点击后会显示一个带有不同图片的按钮

（显示：隐藏的按钮）

唯一的事情是，我希望改变按钮图像的 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>

我希望 id="image" 的输入的图像 src 和翻转效果的图像在点击时更改。我知道这可能会令人困惑，但有没有办法做到这一点？

【问题讨论】：

标签： javascript html image onclick

【解决方案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 值属性。

希望有帮助

【讨论】：