thumbnail pictures to (bigger) pictures

[RichardJones]

Hello,

I am putting a load of photos on a web site and am putting them in thumnail view. I want an option to make them bigger. I dont want a new page per photo so was hoping I could do something like is done here If you put the cursor over the persons name their picture appears. I want people to put their cursor over the tnumbnail and a bigger picture to appear. How do I do that?

If there are any other suggestions on how I could do it I would be grateful to here them.

Thanks for any help or advice

Richard

[Steven.Bentley]

I'm don't see anything like you describe in the linked page.

But the way to do it would be using code a bit like this

The big picture...
<img src="mainpic.jpg" name="mainpic" width=320 height=240>

The thumbnails
<a href="URL" onmouseover="document.mainpic.src='mainpic1.jpg'"> <img src="thumbname1.jpg" border=0 width=80 height=60></a>
<a href="URL" onmouseover="document.mainpic.src='mainpic2.jpg'"> <img src="thumbname2.jpg" border=0 width=80 height=60></a>

[RichardJones]

Hello,

Thanks for the quick reply. Sorry I did not check the page before/ It used to have something like what I want on it but obciously doesnt now. I'll try what you said and let you know how I got on

Thanks again

Richard

[RichardJones]

Hi

I have tried the code that you gave me and I cant get it to work. I havent messed around with it for long mainly because (from my brief knowledge of html) I think it will change the image and produce the new image on the page. This will give me loads of formatting problems. Ideally I want a box to appear with the new larger image in. When I say box I mean like the boxes the pop-up adverts appear in but with no title bar or anything like that.

Does anyone know the name for these boxes or how I can do it?
Sorry if I havent been clear. I just wish the web site I mentioned earlier still operated how I remember it.

Thanks

Richard

[Steven.Bentley]

Originally posted by RichardJones
Hi

I have tried the code that you gave me and I cant get it to work. I havent messed around with it for long mainly because (from my brief knowledge of html) I think it will change the image and produce the new image on the page. This will give me loads of formatting problems. Ideally I want a box to appear with the new larger image in. When I say box I mean like the boxes the pop-up adverts appear in but with no title bar or anything like that.

Does anyone know the name for these boxes or how I can do it?
Sorry if I havent been clear. I just wish the web site I mentioned earlier still operated how I remember it.

Thanks

Richard

Can you just confirm - you want the popup to open when the mouse goes over the thumbnail? That could get very very annoying.

[RichardJones]

what I want is when the mouse goes over the thumbnail a larger version of it will appear over it. Sorry Im not being clear over this. It just so people can see larger versions of the pictures without there having to be any need for loads of pages with larger pictures on and for there to be no formatting issues like there would be if the larger image was on the same page.

Im going to speak to the guy who did the web site I mentioned in my first post so that maybe I can give you a clearer idea of what I am looking for

Rich

[MishY]

You mean like standard image rollovers ? Like if you were to create a standard menu system ? Hover the mouse over the thumbnail, and then the image changes/expands ?

MishY

[maxximilian]

Richard,

I made a site here:

http://www.omnimaxx.com/~glassport/

The larger pictures appear with a click, but could be made to react to a rollover. Is this what you are looking for?

[lufbra]

Or here's one I created Richard!!!

Niagara Falls

Dave.

[RichardJones]

Hi guys

Sorry I havent replied sooner. maxximilian that is exactly what Im looking for. I dont really care if it appears on mouse click or mouse over. You couldnt share your secret could you?

lufbra I was going to do something similar to what you have done but there is a limit on the number of pages this web site can be and I did not want to use them all up on photos. Thank you anyway though. (there is a limit cos this is an assignment for university)

Cheers
Richard

[Steven.Bentley]

Here's how I'd do it

<script>
function popup(url,width,height){
width=width+10
height=height+10
newwin=window.open(url,"Photo","")
newwin.resizeTo(width.height)
}
</script>

then make the images links which point at

<a href="javascript:popup('pic1.jpg',640,480)"><img src="thumbnail1.jpg" width=80 height=60 alt="something descriptive about the picture" border=0></a>

Trust me - you don't want this script as a rollover :)

[RichardJones]

Thanks for the reply Steven.Bentley. With the javascript code newwin=window.open(url,"Photo","") do I put anything in the url, Photo and "" bits to customise it a bit.

Sorry for my ignorance

Richard

dont worry worked it out.

I do have one problem though. When the new window appears it appears the size I have set it then turns really small and you cannot see the image. If you click here and click on the top left image you will see what I mean. All you can see is the file and edit. Also how can I set it so the toolbars are not shown when the window opens. I have just tried it on line and they do not appear but when I preview it in dreamweaver I get it all. Is it a browser thing. (AOL and ms Iexplorer)

Sorry for being picky and asking more question.
Thanks for all help to everyone up to now

Richard

[oracle128]

Hey Richard, try this code:

<script>
function popup(url,width,height){
width=width+50
height=height+60
newwin=window.open(url,"Photo","scrollbars")
newwin.resizeTo(width,height)
}
</script>

<a href="javascript:popup('images/PHOTOS SECTION/ST PATS/quad1_large.jpg',640,480)"><img src="images/PHOTOS SECTION/ST PATS/quad1_small.jpg" width=140 height=100 alt="something descriptive about the picture" border=0></a>

edit: smiley problem

[RichardJones]

Thank you for all your help over the past few weeks. The results of the web site are here It is not completely finished and need tidying uo a bit.

Thanks again

Richard