Hello i have a site that has small images and i want it that when click on a image a popup window will open and then you can close it when finshed.

I hope was hoping to do this in HTML or CSS but if i can't please point me in the right places please.

Thanks

You'll need to use Javascript to firstly open a page, and then another script (or snippet) to close the window.

Do you no of any java script already coded that i could use just to get it started. As i not started learning java yet.

Java and Javascript are completely different things.

Basically, when you click on one of your images, a new page is displayed showing the larger version and the close button. This page that is opened is just another HTML file.

Use the window.open method in the onClick within a img tag.

window.open("http://www.domain.com/popup.html","Photograph","resizable=1,width=200,height=100");

With the window.open() method, you have several properties that can be specified, such as window title, whether it's resizable, etc. They are all self explanatory.

Then, with the HTML file that is to be pop-uped, you need to add a self.close() method.

This can be done with any element, however it is easily accomplished with the <a> tag:

 <a href="javascript: self.close()" title="Close current window">Close</a>

Ok this is what i have is this the best way todo it.

Just two things i would like changed.

1,Can i put all the javascript on its on file as i have lots of images and code would get very long.

2,when you the mouse does not change to let you no it can be clicked how do i do this.

the images is on the main page the 2 images can be clicked on:
http://www.marinetreat.info

<a href="window.open("http://www.domain.com/popup.html","Photograph","resizable=1,width=200,height=100");" style="cursor: pointer;" title="View Photograph"><img></a>

The style="cursor: pointer;" will make the hand appear on hover (if it doesn't then set a:hover{cursorointer;} in the CSS file / header.

As the address for the image changes, putting the Javascript in it's own file would be pointless.

If you just want the image to open in a new window, without a "Close Window" button, simply use the <a> and target="_blank". The Javascript window.open is basically for making pop-up windows. But with your current doctype, this isn't applicable.