thanks kim and jeeves. very

citymaniac — Tue, 25 Nov 2008 17:14:19 +0000

thanks kim and jeeves.

very helpful.

best

Mr City

I'm going to take your

Kim01 — Tue, 11 Nov 2008 22:59:34 +0000

I'm going to take your advice and leave it as it is.
Thanks again Jeeves you have been most helpfull.

IE is pants. You should

JeevesBond — Tue, 11 Nov 2008 22:34:38 +0000

IE is pants. You should discover the greatness of Firefox + Firebug, or Opera + Dragonfly.

As you get into Web design you'll soon learn to hate Internet Explorer, it does many things slightly differently to all other browsers. Anyway, that's another topic.

Any idea how i put a close button or link in with that ?

That's a little more difficult than just opening a new window. You have a few options:

create a dynamic page (using PHP or whatever you have available), that takes the name of a file as an argument. Then open that page using Javascript, e.g. <a href="#" onClick="window.open('imageviewer.php?img=test.jpg','','width=380,height=620,status=0,scrollbars=0','screenx=300','screeny=200')"><img src="test.jpg" alt="img-01" width="120" height="200" class="thumb" style="display:inline"></a>
Write an entire HTML page using Javascript.
Create an HTML page for each popup, e.g. <a href="#" onClick="window.open('test.html','','width=380,height=620,status=0,scrollbars=0','screenx=300','screeny=200')"><img src="test.jpg" alt="img-01" width="120" height="200" class="thumb" style="display:inline"></a> Then put the image and a close link into test.html

Frankly though, particularly since you're just starting out, you don't need to bother. The window already has a close button on the top-right, there's no need to duplicate that.

Ok all works great ...Any

Kim01 — Tue, 11 Nov 2008 21:58:38 +0000

Ok all works great ...Any idea how i put a close button or link in with that ?

Yes perfect!! IE 7 ... Thank

Kim01 — Tue, 11 Nov 2008 21:11:07 +0000

Yes perfect!! IE 7 ...
Thank you again Jeeves.

Is that better? What browser

JeevesBond — Tue, 11 Nov 2008 21:08:00 +0000

Is that better? What browser are you using?

Oh dear the code you replied

Kim01 — Tue, 11 Nov 2008 20:59:30 +0000

Oh dear the code you replied with has vanished Jeeves ? The post is still there but code has gone.
All i see now is a scroll bar and no code ?

Ah thank you Jeeves, i will

Kim01 — Tue, 11 Nov 2008 19:34:03 +0000

Ah thank you Jeeves, i will impliment it later as I'm busy at the moment, but I'll be sure to post back here if i have any issues.
Really appreciate your help.
Does the rest of my code seem ok ? I just insert that code for every thumb i want to expand ? I want three so three times that code one for each thumb inside the div tag ?

arggghhh the html has

JeevesBond — Tue, 11 Nov 2008 19:27:00 +0000

arggghhh the html has displayed as in a browzer :S ?

We allow HTML on the forum, so people can format their posts and that. If you need to post HTML/CSS just put it inside <code> tags. Don't worry about getting it wrong, we can always fix it.

As for your problem, try changing your onclick code to:
<a href="#" onClick="window.open('test.jpg','','width=380,height=620,status=0,scrollbars=0','screenx=300','screeny=200')"><img src="test.jpg" alt="img-01" width="120" height="200" class="thumb" style="display:inline"></a>

The problem is the window is being set to the size of the image, but with the window border, scrollbars, and location bar the area the image appears in is smaller than the image itself. So, most browsers will scale the image down, giving you the + until you click the image.

So what I did to your code above is add 20px to the width and height of the window. You might need to add more if the problem continues. I also switched off the status bar -- at the bottom -- and the scrollbars, to save a little space.

Think of it like this: what you're setting is the width/height of the window's outer edges. Then the edges, location bar etc. have to be added on.