Question

如何制作''扰流板''而不是按钮有图像？这是我使用的代码。

    <style type="text/css">
body,input
    {
    font-family:"Trebuchet ms",arial;font-size:0.9em;
    color:#333;
    }
.spoiler
    {
    border:1px solid #ddd;
    padding:3px;
    }
.spoiler .inner
    {
    border:1px solid #eee;
    padding:3px;margin:3px;
    }
    </style>
    <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="button" onclick="showSpoiler(this);" value="Show/Hide" />
    <div class="inner" style="display:none;">
    This is a spoiler!
    </div>
</div>

没有必要使用此代码，我只希望它是图像而不是按钮。

Answer 1

<a href="javascript:;"  onclick="showSpoiler(this);"  >
<img src="image/path"></a>

试试这个

Answer 2

这对我很好：http://jsfiddle.net/48PBY/

<div class="spoiler">
    <img onclick="showSpoiler(this);" src="https://pbs.twimg.com/profile_images/858514627/eppaa_bigger.jpg" />
    <div class="inner" style="display:none;">
    This is a spoiler!
    </div>
</div>

单击图像时显示文本

2 个答案: