HTML Help

DanDad · Joined: 26 May 2009 Posts: 2

Is there a simple way to show an image when you 'click here' and is also easy to close the image ?

Thank You..
Dan

PayneLess Designs · Joined: 28 Feb 2007 Posts: 3593 Location: Biloxi, MS

Wrap this around your image/button or link:

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

Then:

Code: <div id="targetDiv">Your image goes here.</div>

Separate javascript code. Name it anything you want, but end it with *.js:

Code: function showDiv(objectID) {
var theElementStyle = document.getElementById(objectID);

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

Or, between the head tags:

Code: <script type="text/javascript">
function showDiv(objectID) {
var theElementStyle = document.getElementById(objectID);

if(theElementStyle.style.display == "none")
{
theElementStyle.style.display = "block";
}
else
{
theElementStyle.style.display = "none";
}
}
</script>

Might have a problem with page laout when images is hidden as it uses the display: none to hide.

sticks464 · Joined: 31 Dec 2006 Posts: 2309

There's an easy way to do a mouseover and show an image which hides on mouseout.

DanDad · Joined: 26 May 2009 Posts: 2

I'm sure everyone else is going " Oh, I get it " but I don't have a clue what you just said.

I have a photo, .jpg or .gif that I would like to show (and not have a full web page open) when you 'click here'. Then when you are through viewing the photo, you can close the photo box. ('X' out or 'close this window' or whatever.)

Is that what you wrote all that programing to do ?

Dan

sticks464 · Joined: 31 Dec 2006 Posts: 2309

Then you want something like Thickbox