PDA

View Full Version : Images


Mik
12-18-2006, 03:50 AM
moved by dj

I have a page with a table set up and I've got small thumbnails over to one side and when one of those thumbs are clicked I want the larger of that image to appear in the cell next to it.
It seems I've kinda worked out how to do everything but, ie - I've worked out how to click on the thumbnail and have the 'larger' image appear on its own in the same cell, appear in a separate new page and so on, but not how to have it linked to appear in the next cell on the same page

If this isn't the same as what you're referring to George, sorry mate for getting off topic, but if it is can anyone elaborate on this?

(Oh, and I'm new to all this too so any help will be awesome! ;-) )

Thanx,
Mik.

davidj
12-18-2006, 08:42 AM
here you go


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
function swap(i){
p = document.getElementById("pic");
p.innerHTML = '<img src=\"Images/'+i+'\" />';
}
</script>
</head>
<body>
<table width="52%" height="375" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="Images/alfa_romeo_spiderT.jpg" width="150" height="100" onclick="swap('alfa_romeo_spider.jpg')"/></td>
<td><img src="Images/breraT.jpg" width="150" height="98" onclick="swap('brera.jpg')"/></td>
<td><img src="Images/honda-s2000T.jpg" width="150" height="85" onclick="swap('honda-s2000.jpg')"/></td>
<td><img src="Images/nissan-350zT.jpg" width="150" height="124" onclick="swap('nissan-350zT.jpg')"/></td>
</tr>
<tr>
<td height="19" colspan="4">&nbsp;</td>
</tr>
<tr>
<td height="232" colspan="4">

<div id="pic"></div>

</td>
</tr>
</table>
</body>
</html>


instructions for use..

paste this code into a balnk page and call it what you like

Create an Images directory called Images

create thumbnail images from your main images and place both sizes in the Images dir

where you have...
<img src="Images/alfa_romeo_spiderT.jpg" width="150" height="100" onclick="swap('alfa_romeo_spider.jpg')"/>
replace the src= to point to your thumb image and also change
onclick="swap('alfa_romeo_spider.jpg')"
to point to the main image.

this is where your main image will appear
<div id="pic"></div>
so move that to where ever you want

welcome to the forum mik

Mik
12-18-2006, 10:40 PM
WOH!! Thanx heaps mate, I'll give it a whirl :-D

cheers,
Mik.