Jump to content
Please Use CODE Tags

Show image when clicking on text?

Jeroen1322
By Jeroen1322
in Programming
 Share
Go to solution Solved by Ciccioo,

first, you set your div default to "display: none" in CSS, so that it won't show when the page loads

#targetDiv{	display: none;}

then, your code is good but you need to check things the other way around

if(theElementStyle.style.display == "block"){	theElementStyle.style.display = "none";}else{	theElementStyle.style.display = "block";}

because at the first run, the CSS property is "display: none", but the Javascript CSS attribute won't have any value (they're not set automatically by the CSS engine)

so you want the "else" block to be the one that has to be executed at the first run as well

Posted

Hi guys!

 

Can someone give me the code or instructions to show a photo when you click a line of just text and close the photo when pressing it again. 

 

I tried this: 

<html> <head><title>Test</title><script language="JavaScript">function showDiv(objectID) {var theElementStyle = document.getElementById(objectID);if(theElementStyle.style.display == "none"){theElementStyle.style.display = "block";}else{theElementStyle.style.display = "none";}}</script></head><body><a href="#" onClick="showDiv('targetDiv');return false;">Test</a>	<div id="targetDiv"><img src="http://www.cssplay.co.uk/graphic/pc2.gif"></div> </body></html>

It shows the image and when i press it it will close, but i want to opposite of that.

 

 

Thanks!

 

 

Btw, the image is just random to test

[CPU: AMD FX-6100 @3.3GHz ] [MoBo: Asrock 970 Extreme4] [GPU: Gigabyte 770 OC ] [RAM: 8GB] [sSD: 64gb for OS] [PSU: 550Watt Be Quiet!] [HDD: 1TB] [CPU cooler: Be Quiet! Shadow Rock Pro Sr1]  -Did i solve your question/problem? Please click 'Marked Solved'-

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Solution

first, you set your div default to "display: none" in CSS, so that it won't show when the page loads

#targetDiv{	display: none;}

then, your code is good but you need to check things the other way around

if(theElementStyle.style.display == "block"){	theElementStyle.style.display = "none";}else{	theElementStyle.style.display = "block";}

because at the first run, the CSS property is "display: none", but the Javascript CSS attribute won't have any value (they're not set automatically by the CSS engine)

so you want the "else" block to be the one that has to be executed at the first run as well

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

first, you set your div default to "display: none" in CSS, so that it won't show when the page loads

#targetDiv{	display: none;}

then, your code is good but you need to check things the other way around

if(theElementStyle.style.display == "block"){	theElementStyle.style.display = "none";}else{	theElementStyle.style.display = "block";}

because at the first run, the CSS property is "display: none", but the Javascript CSS attribute won't have any value (they're not set automatically by the CSS engine)

so you want the "else" block to be the one that has to be executed at the first run as well

Thanks mate! :D I tested it and it worked! 

[CPU: AMD FX-6100 @3.3GHz ] [MoBo: Asrock 970 Extreme4] [GPU: Gigabyte 770 OC ] [RAM: 8GB] [sSD: 64gb for OS] [PSU: 550Watt Be Quiet!] [HDD: 1TB] [CPU cooler: Be Quiet! Shadow Rock Pro Sr1]  -Did i solve your question/problem? Please click 'Marked Solved'-

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

It might be a lot easier to work with jQuery, check it out.

Projects | > Project DisplayGRID < | > Portable Virtualization Server < | > CORE GTX < | Projects

Community | > Schnitzel Teamspeak Server < | Community

Guides | > Getting started with a NAS < | > Setting up your Ubiquiti Access Points < | > pfSense Guide < | Guides

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×