Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.

# Thread: Image HELP!

1. ## Image HELP!

Good Morning:
I have a series of pictures (thumbnails) lined up in rows on the screen. What I would like to happed is that when the user clicks on an image it enlarges to a much larger picture, then when clicked again it returnes to a thumbnail size.
Can anyone provide me with coding for the above or possibly stear me in the right direction.
Thanks very much in advance.

• Google for lightbox,fancybox, thickbox, thinbox etc

• Thanks very much for your reply. I have googled what you advised and found very long complicated codes. I am looking for a simple code that allows the user to click on a small picture to make it larger then another click returns it to the small size. Must I use flash or like to accomplish this. Is there a straight html/css that will get it done?

• Something quick a dirty without and js or flash would be to insert the larger images and style them with 0 width and height. Then use pseudo code hover and set width and height for the image. When the user hovers over that image, the hover css causes the image to appear. Not the most elaborate way to do it though.

• Teed as always you come to my rescue. If your ever in the Miami Beach area let me know. I own a hotel and it would be my pleasure to host you for a night or two.
Anyhow, I am assuming the css would look something like-

img {
height:0px;
width:0px;}

.hover{
height:100px;
width:100px;}

<img src=class hover "C:\Documents and Settings\Administrator\Desktop\ee.bmp" width="263" height="62" border="0" align="left">

• Been to Miami once, but only drove through...lol Might look you up someday! haha

Something like this:

html:

Code:
<div id="links">Some text here.<a href="images/imagevisamccode.jpg" target="_blank">last three numbers from the back of your card<img src="images/imagevisamccode.jpg"  /></a>Some more text here......</div>
css

Code:
#links a img {
height: 0; width: 0; border-width: 0;
}

#links a:hover img {
position: absolute;
top: 950px;
left: 350px;
height: 200px;
width: 300px;
}

• Thanks Teed:
I tried it but the text that reads "enter the last 4 digits of your card #" apparently is linked when I click on it it brings up another page with my photo. When I am done viewing it I just x out of the page. In the project I am working on I have 10 thunbnail photes lines up in rown. I would like when the user clicks on an image (not mouseover) it enlarges then when clicked again it returns to its smaller size.

<style type="text/css">

#links a img {
height: 0; width: 0; border-width: 0;
}

#links a:hover img {
position: absolute;
top:950px;
left:350px;
height:200px;
width:300px;
}

</style>

<div id="links">Some text here.<a href="C:\Documents and settings\Administrator\Desktop\beach.jpg" target="_blank">last three

numbers from the back of your card<img src="C:\Documents and Settings\Administrator\Desktop\beach.jpg" /></a>Some more text

here......</div> tried it (see below) but the text that says "

• That was some code right off a site I did a while back. For someone to hover over some text and then the image pops up and shows the security code for different credit cards.

I just gave you that as a basis for what you could do for eacg image you have. Basically you would insert the larger version of each image, and style it as a "hidden" div.

Do you have this site live so I can look at how its laid out?

• Your the best. Im at work but when I get home I will get it to you!

•

#### Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•