CODEWITHSUNDEEP
htmlcssimage
user2218842
user2218842

Reputation: 11

Reveal a hidden image without javascript

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?

Upvotes: 0

Views: 2032

Answers (5)

william44isme
william44isme

Reputation: 877

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.

Upvotes: 3

hjpotter92
hjpotter92

Reputation: 80639

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>

Upvotes: 0

Vucko
Vucko

Reputation: 20834

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.

Upvotes: 3

Johan Davidsson
Johan Davidsson

Reputation: 2972

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

Upvotes: 0

Dipesh Parmar
Dipesh Parmar

Reputation: 27364

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.

Upvotes: 0

Related Questions