点击图片变成文字？答案

【问题标题】：Onclick a picture turns in to text?点击图片变成文字？
【发布时间】：2013-06-26 15:12:43
【问题描述】：

我想知道是否有人可以帮助我。在“关于我们”页面上，每个团队成员都有一个个人资料，下面是他们的电子邮件地址。我希望有一张图片，当点击图片时它会消失并且团队成员的电子邮件地址在它的位置。

页面是-http://www.thescribblingape.com/aboutus/

我对 JavaScript 或 jQuery 没有太多经验，但我想我可以使用它们来做到这一点。

我试过用；

<div id="email-button">

  <img class="email-button-image" onclick="this.style.display = 'none';" alt="Email" src="http://www.thescribblingape.com/wp-content/uploads/2013/06/tSA-Email-Button-post-150x150.png" width="150" height="150" />

   sam@thescribblingape.com

 </div>

CSS

#email-button {
width: 300px;
height: 300px;
}

【问题讨论】：

请在此处发布您的代码。如果你的网站改了，这个问题就没有意义了。
你能把你已经写的东西给我们吗？
Java？你的意思是javascript。并在此处提供相关代码，这是您要求的一项非常简单的任务
嗨 Stuart，您似乎想要一个“标题”。 Chris Coyier 在这个主题上有出色的 tutorial。如果这不是您想要的，我建议您搜索一些其他示例，尝试一下，然后在 SO 上完善您的问题。
@NickTomlin 感谢您的链接。对未来有用。但在这种情况下，id 喜欢让图片消失，同时文本出现。

标签： javascript jquery wordpress onclick image

【解决方案1】：

对于您的问题，这是一个相对简单的解决方案，尽管我已将文本包装在一个元素中以便通过 CSS 轻松定位它：

<div id="email-button">
    <img class="email-button-image" alt="Email" src="http://www.thescribblingape.com/wp-content/uploads/2013/06/tSA-Email-Button-post-150x150.png" width="150" height="150" />
    <p>sam@thescribblingape.com</p>
</div>

以下 JavaScript 将在 p 和 img 可见之间切换：

function toggle(el) {
    var img = el.getElementsByTagName('img'),
        p = el.getElementsByTagName('p');
    for (var i = 0, len = img.length; i<len; i++){
        img[i].style.display = img[i].style.display === 'none' ? 'block' : 'none';
    }
    for (var i = 0, len = p.length; i<len; i++){
        p[i].style.display = p[i].style.display === 'block' ? 'none' : 'block';
    }
}

var button = document.getElementById('email-button');

button.addEventListener('click', function () {
    toggle(button);
});

JS Fiddle demo.

上面可以用jQuery重写，给出：

$('#email-button').click(function () {
    $(this).find('img, p').toggle();
});

JS Fiddle demo.

通过对 HTML 进行一些重写，您甚至可以只使用 HTML 和 CSS；被重写的 HTML：

<label for="toggle">
    <input id="toggle" type="checkbox" />
    <img class="email-button-image" alt="Email" src="http://www.thescribblingape.com/wp-content/uploads/2013/06/tSA-Email-Button-post-150x150.png" width="150" height="150" />
    <p>sam@thescribblingape.com</p>
</label>

还有 CSS：

label {
    display: block;
    cursor: pointer;
}

label input {
    display: none;
}

label input + img,
label input:checked ~ p {
    display: block;
}

label input:checked + img,
label input ~ p {
    display: none;
}

JS Fiddle demo.

虽然这确实需要相当最新的浏览器，但遗憾的是。

【讨论】：