Reveal a hidden image without javascript

Question

I saw many questions where people were hiding/revealing images using jQuery, but I don't have jQuery installed and I would far prefer to use Html/css?

Is there a way to reveal an image when clicking on a button without using any javascript?

you can easily "install" jQuery by just adding this line inside your <head></head> section: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> It's not really installing, actually. You are referencing a jQuery file which happens to be hosted online by Google. — LazerSharks
– LazerSharks, Commented Mar 28, 2013 at 8:24

william44isme · Accepted Answer · 2013-11-26 22:44:46Z

3

As @Gnuey said, it's easy to install jQuery just by referencing it from a host. Both google and Microsoft host jQuery, but most people use google. I recommend you check his comment for more info.

Actually, @Dipesh Parmar you can make this work in pure css, but you need a but of a work around:

Give the image an id, then make the button go to that id:

<a href="/#revealonclick"><button>Click to reveal image</button></a>
<img alt="" id="revealonclick" src="/image/pic.png">

Then in the CSS of the image:

#revealonclick{
    display: none;
}

#revealonclick:target{
    display: inline;
}

Yep. It's possible. CSS3 is awesome.

edited Nov 26, 2013 at 22:44

answered Mar 28, 2013 at 8:31

william44isme

8772 gold badges13 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vucko · Accepted Answer · 2013-03-28 08:33:02Z

3

You can use checkboxes to toggle click.

HTML

<input type="checkbox" id="toggle">
<label for="toggle">Click me!</label>
<img src="http://image.shutterstock.com/display_pic_with_logo/232318/232318,1264892711,1/stock-photo-sleeping-pug-puppy-45602341.jpg" alt="" />

CSS

img{display:none;}
input[type=checkbox]:checked ~ img {
    display:block;
}

JSFiddle.

answered Mar 28, 2013 at 8:33

Vucko

20.9k12 gold badges60 silver badges108 bronze badges

Comments

Dipesh Parmar · Accepted Answer · 2013-03-28 08:28:00Z

0

clicking on DOM is a browser event and css can not handle such events so you need to use client-side script such as javascript ,jQuery or mootools etc.

answered Mar 28, 2013 at 8:28

Dipesh Parmar

27.3k8 gold badges65 silver badges92 bronze badges

Comments

Johan Davidsson · Accepted Answer · 2013-03-28 08:30:24Z

0

You don't need jQuery to do that. Just use pure Javascript without any libraries.

There are some CSS events, most common is :hover, but in your case :active is the closest one. However. there are no good way of doing this with pure CSS. Here is a link too what you can do with only CSS:

http://www.ryancollins.me/?p=1041

answered Mar 28, 2013 at 8:30

Johan Davidsson

2,9922 gold badges21 silver badges27 bronze badges

Comments

hjpotter92 · Accepted Answer · 2013-03-28 08:36:28Z

0

You can use the basic form of JavaScript as follows:(if you seriously are against installing jQuery)

function toggleImage() {
    var imgId = document.getElementById('image');
    imgId.style.visibility = (imgId.style.visibility === "hidden" || imgId.style.visibility === "") ? "visible" : "hidden";
}

Where the HTML is

<img id="image" src="http://i458.photobucket.com/albums/qq305/Ellerwind1982/souleater5.jpg" />
<button id="sth" onclick="javascript: toggleImage();">Hi</button>

answered Mar 28, 2013 at 8:36

hjpotter92

81.1k36 gold badges148 silver badges188 bronze badges

Collectives™ on Stack Overflow

Reveal a hidden image without javascript

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related