Question

如何更改onclick图像输入的src并创建扰流板？我希望这种情况发生：

（按钮显示：显示）＆lt; - 此按钮将显示图像1

点击后会显示一个图像不同的按钮

（按钮说：隐藏）＆lt; - 此按钮将有图像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。我知道这可能令人困惑，但有没有办法实现这个目标？

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值属性。

希望这个帮助

html扰流板和更改按钮

1 个答案: