当用户点击图片时，如何使图片消失 [英] How do you make an image disappear when a user clicks on it

问题描述

Hello Stackoverflowers，

所以这是我想要实现的（我事先对我的解释道歉，因为我不太熟悉代码的语言）

1. 用户访问了Tumblr上的页面。


2. 用户看到指令悬停的图片


3. 用户阅读说明后，用户点击图片时，图片就会消失。






我想知道 - 即使在Tumblr上也可以做到这一点？

$ b $

解决方案

从未使用过tumblr，但您可以添加自定义使用本指南的代码：





http://www.chrisabraham.com/2011/04/06/how-to-add-custom-html-javascript-etc-代码到您的tumblr /





并将此代码添加到您的正文标记中，但更改img.png到您的图片来源

 < img src =img.pngonclick =this.style.display ='none'; style =position：absolute; opacity：0.5; left：50％; top：50％; width：100px; height：100px; margin-left：25px; margin-top：25px; z-index：100;/> ; 
  

以下是一个工作示例：





http://jsfiddle.net/BRXVX/1




Hello Stackoverflowers,

So this is pretty much what I want to achieve (I apologize in advance for my explanation as I am not too familiar with the language of code)

1. A user visits my page on Tumblr.
2. The user sees an image of instructions hovering over the blog content with slight opacity.
3. Once the user reads the instructions, the image will disappear when the user clicks on the image.
4. The user explores the page.

I'm wondering -- Can this be done, even on Tumblr?

Any suggestions will be appreciated -- thanks!

解决方案

Never used tumblr but you can add custom code using this guide :

http://www.chrisabraham.com/2011/04/06/how-to-add-custom-html-javascript-etc-code-to-your-tumblr/

And add this code in your body tag but change "img.png" to your image source

<img src="img.png" onclick="this.style.display='none';" style="position:absolute;opacity:0.5;left:50%;top:50%;width:100px;height:100px;margin-left:25px;margin-top:25px;z-index:100;"/>

The following is a working example :

http://jsfiddle.net/BRXVX/1

这篇关于当用户点击图片时，如何使图片消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！