View Thread: Show/hide image on click

Welcome Guest | Register | Login

Killersites.com Forum

Category: General Web Design

Forum: Beginners to web design.

Thread: Show/hide image on click

Quick Go »

No member browsing this thread

Thread Status: Active
Total posts in this thread: 16

[ ]

Author

This topic has been viewed 47943 times and has 15 replies

billyboy
Advanced Member

Joined: Sep 3, 2005
Post Count: 2206
Status: Offline


Show/hide image on click

I would like to be able to show/hide an image on a page. In other words click on link A to make an image appear, click on link B to make it disapear. I've seen something similar on a mouse over so I know it has to be possible, I'm guessing by using visibility: hidden or display: none? I just have no clue how to do it. Any help please?

Bill
----------------------------------------
Quiquid latine dictum sit altum viditur

[Sep 16, 2005 6:34:21 PM]

[Link]

shelfimage
Advanced Member

USA
Joined: Mar 24, 2005
Post Count: 3000
Status: Offline


Re: Show/hide image on click

billyboy,

I wonder if Stu Nicholls has something like this on his site. You might check it out if you haven't been there:
http://www.cssplay.co.uk/

lamp light: maybe not what you're looking for, but might spark your interest...
http://www.cssplay.co.uk/menu/lamp.html#nogo

-
----------------------------------------
"The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo
Save the developers<!>
Maine Webworks

[Sep 16, 2005 7:09:40 PM]

[Link]

billyboy
Advanced Member

Joined: Sep 3, 2005
Post Count: 2206
Status: Offline


Re: Show/hide image on click

Wow! I'm bookmarking that site! There are some very cool effects there. I don't know if I know enough to adapt one of those but I'm going to give it a shot. If I can't just knowing that site exists is worth it. Now the question is, do I try to figure out how to adapt something or go check out some more stuff there. Great link! Thanks.

Bill
----------------------------------------
Quiquid latine dictum sit altum viditur

[Sep 16, 2005 7:52:31 PM]

[Link]

shelfimage
Advanced Member

USA
Joined: Mar 24, 2005
Post Count: 3000
Status: Offline


Re: Show/hide image on click

I thought you might like it, although, I won't take the credit.

I tip my hat to Kyle. wink

----------------------------------------
"The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo
Save the developers<!>
Maine Webworks

[Sep 16, 2005 10:25:05 PM]

[Link]

admin
Advanced Member

Joined: Jun 14, 2003
Post Count: 2940
Status: Offline


Re: Show/hide image on click

This little script will allow you to toggle the display of a div - in your case, just put the image in a div.

The code:

1. Wrap this around your image/button or link:

<a href="#" onClick="showDiv('targetDiv');return false;">Your image or text</a>

Comments: this is the 'button' that will cause your image to appear and disappear.

2. Create your disappearing/reappearing div:

<div id="targetDiv">

Your image goes here.

</div>

Comments: notice the name of the div in #1 and in #2: targetDiv

You can name it anything you want as long as they are the same.

3. The Javascript code:

Comments:

You can place this Javascript code in a separate .js file and link to it or just place it in your page's <head> - in the script block of course.

Notice that I am using the 'display' property and NOT the visibility property. That means that when the div is made to disappear the rest of the page will collapse to take its place.

Makes sense?
----------------------------------------
Stefan Mischook

Video Tutorial Store | Web Templates
----------------------------------------
[Edit 1 times, last edit by admin at Sep 16, 2005 11:40:54 PM]

[Sep 16, 2005 11:38:43 PM]

[Link]

billyboy
Advanced Member

Joined: Sep 3, 2005
Post Count: 2206
Status: Offline


Re: Show/hide image on click

Thanks Stefan that works for the second part of what I need (hiding the image). But I need something that will hide the image when the page opens until clicking on a link brings it up. Basically what I'm trying to accomplish is a link that says something like "show picture" that when clicked will bring up a graphic. Then clicking on the graphic itself will hide it again. I tried changing around the display: none and display: block in that code but I don't know what I'm doing. Is there something I can change to keep the image hidden until a link is clicked? Or could I impose on you again please?

Bill
----------------------------------------
Quiquid latine dictum sit altum viditur

[Sep 17, 2005 4:43:11 AM]

[Link]

LSW
Advanced Member

USA
Joined: Nov 27, 2003
Post Count: 6285
Status: Offline


Re: Show/hide image on click

Wouldn't a displaced rollover work? No clicking of course, just when you place the mouse over the link, the image would appear somewhere on the page. Slide the mouse away from the link and the image vanishes again.

Pure CSS Pop Ups 2 by eric meyer

[Sep 17, 2005 6:27:58 AM]

[Link]

billyboy
Advanced Member

Joined: Sep 3, 2005
Post Count: 2206
Status: Offline


Re: Show/hide image on click

Hi Kyle,

I've actually been sitting at the computer tinkering with the code from that site. wink

I'm really hoping I can find something that will work by clicking on a link, then clicking on the image to get rid of it again. This is what I've got so far but there's a few problems I've come across. I'm thinking JS is the only option but maybe some others will have some ideas.

#show a {position: absolute; top: 50px; left: 110px;}

#hide a {position: absolute; top: 80px; left: 100px;}
#hide img {height: 100px; width: 80px; border: 0px;}
#hide a:active img {display: none;}

<body>

<div id="show">
<a href="#">Show Image</a>
</div>

<div id="hide">
<a href="#"><img src="images/thinking.gif" height="100" width="80" alt="thinking" /></a>
</div>

</body>

The image will only stay hidden as long as the link is active, which in IE is even after you release the mouse button so that's okay. But in FF the link is only active as long as the mouse button is held down and the image re-appears once you let it go. Then in IE clicking anywhere on the page, will cause the image to appear again and I'm not sure hoe to associate that with a link. And the image isn't hidden when the page first opens.

Bill
----------------------------------------
Quiquid latine dictum sit altum viditur

[Sep 17, 2005 7:25:58 AM]

[Link]

tpattison
Advanced Member

UK
Joined: Dec 29, 2004
Post Count: 1662
Status: Offline


Re: Show/hide image on click

Hey, that Stu Nichols site is great.

This page seems to be what you want bill.

Use :active & :focus!

Tim
----------------------------------------
Pavonis Mons | Listen of the week: "Residue of Desire" by Acumen

[Sep 17, 2005 8:14:15 AM]

[Link]

admin
Advanced Member

Joined: Jun 14, 2003
Post Count: 2940
Status: Offline


Re: Show/hide image on click

You can use JavaScript to make this work.

To solve your problem:

<div id="targetDiv" style='display: none'>

Your image goes here.

</div>'

Comments: Now when the page is first loaded, the div will be hidden.

The script logic works is this way:

Check if the 'display' property is set to 'none'. If it is, make it equal 'block', otherwise make it 'none'.

This is one of these rare occasions that I would use an inline style - this assuming this only happens on one page in the entire website.

- -

Doing this in a zealot happy way:

If you wanted to get really nerdish, and be a big CSS zealot - (where) you have total separation of content from structure, you would do this:

In a CSS file define the class: .targetDiv. Declare width and height so as to be able to show the image.
Set the .targetDiv display property to none.
For each page that you want this toggle-action to appear, you would create a style block at the top of that page that specifies the background image for .targetDiv. Since this rule would be declared in the page itself, it would override the linked style.

By using CSS to 'insert' your image, you are removing the markup from your page (the <img> tag,) that injects content into your structure - technically not a good thing by zealot standards. But many times a good thing by Real-World standards.

Bonus action:
So now, if you wanted to make that image click-able, you would need to resort to a little JavaScript:

<div id="targetDiv"onclick="location.href='yourPage.html'">
</div>

This JavaScript will work fine in all browsers, but it is not technically the new DOM way of doing things. I just mention it for the sticklers out there ... Oh yea, if someone has their JavaScript turned off - no dice.

So what's the solution to be sure to make this aspect work all the time: use the <img> tag and wrap a link around it!

Why not use the DOM method?

DOM is more verbose - more code to do the same thing.
This method works fine and will continue to work for ages and ages ...

Why would you use the DOM method?

To remove the 'onClick' code from your HTML - The pure DOM method allows you to easily target elements on a page (that means tags and even the text,) using a built in DOM functions.

I hope this stuff is not boring you guys! confused

----------------------------------------
Stefan Mischook

Video Tutorial Store | Web Templates
----------------------------------------
[Edit 14 times, last edit by admin at Sep 17, 2005 4:59:09 PM]

[Sep 17, 2005 8:22:53 AM]

[Link]

[ ]

Current timezone is GMT
May 22, 2013 7:55:42 AM