PDA

Click to See Complete Forum and Search --> : Clicking image

sync
02-17-2008, 01:12 PM
Hi,
I want an image on my web to open a larger image of itself when it is clicked upon. how do i do this please and if there's a code for it, i will very much appreciate if it is included and also where to put such code.
thanks.
phe
02-17-2008, 03:08 PM
I done this once for my images, but at the moment I don't want to rifle through all my old stuff to find the code. So I googled it, I know you could have doen this too.

Here's waht I found, based using one image (weell two images: one thumbnail, one large image):

Inside the <head>:
#zoom a {
float: right;
margin: 2px;
border: 1px solid #000;
text-indent: -1000em; /* hide the link text */
overflow: hidden;
display: block;
width: 125px; /* show only thumbnail */
height: 94px;
background: url(../images/zoom.jpg) no-repeat top left;
}

#zoom a:hover {
width: 300px; /* adjust size to zoomed photo */
height: 225px;
background-position: 0 -104px; /* move the image so only the big one shows */
}

Inside the body:
<div id="zoom">
<a href="/images/zoom.jpg">View photo</a>

Hope it works out ok
Centauri
02-17-2008, 03:51 PM
If you want the larger image to open up in a new popup type window when the small image is clicked, a little inline javascript can do that for you :<a href="large pic.jpg"onclick="window.open (this.href,'','scrollbars=yes,width=818,height=222'); return false" title="Click for a larger view" ><img src="small pic.jpg" alt="image description" style="border:none"></a>
The blue highlighted areas are the names of youir images, the red areas insert the size of your large image, and the green area is the alt description if the image is not available.