Hi everyone

I'm fairly new to web design, and i need to design a site for uni, so far ive got the page laid out and my links working, but now im really confused, the site im building looks like this - http://i4.photobucket.com/albums/y145/mrfoo_uk/SITEDESIGN.jpg - I need the div on the left to have the work listed with an icon which when clicked will load the image in a seperate div and also load a small description in another div below the image.

Does anyone know the best way to go about this??

Thanks

Paul

Hey, that question really should be under Javascript/DHTML.

Here's how you do it:
1) In the img tag of each icon, add this:
onmousedown="setimgdesc('BIGIMGSRC', 'DESCRIPTION');"
Replace BIGIMGSRC with the src of the image to be displayed when you click that icon and DESCRIPTION with the discription for that image.

2) Add this to you head section:
<script type="text/javascript">
function setimgdesc(s, d) {
document.getElementById("pic").src=s;
document.getElementById("desc").innerHTML=d;
}
</script>

3) Add this where you want the image to be displayed:
<img src='' id='pic' />
and this where you want the description:
<div id='desc'></div>
You can style these as much as you want, just keep there ids.

Thanks for the reply, will give it a bash now! sounds pretty simple, do you know if that will pre load the images? sorry about the stupid questions, but this web stuff confuses the ```` out of me!

No, it won't preload them. Here's a script that will preload them, plug in the url of every image you want preloaded into imgs:
<script type="text/javascript">
var imgs=newArray();
imgs[0]="URL";
imgs[1]="URL";
imgs[2]="URL";
imgs[3]="URL";
var preload=new Array();
for(var i=0; i<imgs.length; i++) {
preload[i]=new Image();
preload[i].src=pics[i];
</script>

:) thanks for the help G-com, after 4 days of reading it's fianlly working!
One last question though, when the page loads in IE and opera, before any work is selected from the list in the div that holds the images i get this - http://i4.photobucket.com/albums/y145/mrfoo_uk/website2.jpg - in IE and in opera it just says pics... in the top left.
Is there any way of hiding that or maybe inserting a default image just to fill that space?

Really appreciate the help!

Paul

Hey, I forgot to say it, but in the img tag:
<img src='' id='pic' />
You can change the src to anything you want, it'll just change when you click an icon.

Thanks so much mate you've been a real help.