Opening a new window

**Onesimus** · 04-16-2009, 04:32 PM

Hello - I am a newbie to the forum needing assistance with some HTML coding.

I am trying to create a page which has a number of small images acting as buttons. When an image is clicked, a new window is opened which displays that image in full size. I would like this page to contain a "Close Page" button which closes this page. Also, is there HTML code which prevents users from downloading images that appear in this new window?

I have found javascript code which closes a browser window:

<a href="javascript:window.close()">
<img border="0" src="closingwindows.gif" width="50" height="20">
</a>

but where do you put this code, given that the new page to display the full size image is created from the page that contains the thumbnail of that image?

Any help appreciated!

Onesimus

**jthayne** · 04-17-2009, 11:06 AM

From what I see, you have two questions. I will do my best to answer them.

First:

Originally Posted by Onesimus

I am trying to create a page which has a number of small images acting as buttons. When an image is clicked, a new window is opened which displays that image in full size. I would like this page to contain a "Close Page" button which closes this page.

I recommend switching to Lightbox for viewing your images larger. It is EXTREMELY simple to use and implement, and creates a very clean and professional look. You can download it at http://www.huddletogether.com/projects/lightbox2/#download

Second:

Originally Posted by Onesimus

Also, is there HTML code which prevents users from downloading images that appear in this new window?

There is javascript that disables right-clicking on a page, but that is typically frowned on for any sort of security for the following reasons:

If javascript is disabled, the user can still right-click and save the image.
Anything that is visually seen in a browser window is already downloaded via the internet cache.

If you are wanting to secure your images, place a watermark on them instead. That way, there is a visual reminder of who owns the image. This is a pretty simple thing to do, and there is a myriad of tutorials on how to do it using everything from MS Paint to Gimp (a free program on par with Adobe Photoshop).

**jessicasamuel** · 04-18-2009, 01:31 AM

How can you use this javascript on your site?

**Onesimus** · 04-19-2009, 02:13 AM

Hello All!

Thanks to all who replied! I have found a solution.

Here is the HTML coding for the page which contains the (thumbnail) images. In this example, there are 2 images.

<!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>Main Gallery</title>

<script>
function openWindow1()
{
window.open("Lorikeet1.html","Lorikeet 1","width=600,height=800,resizable=0");
}

function openWindow2()
{
window.open("Lorikeet2.html","Lorikeet 2","width=600,height=800,resizable=0");
}
</script>

</head>

<body>
<table width="22%" border="1" align="center">
<tr>
<td width="28%"><a href="javascript: openWindow1()"><img src="Lorikeet1S.jpg" width="124" height="175"></a></td>
<td width="72%"><div align="center">Rainbow Lorikeet </div></td>
</tr>
<tr>
<td width="28%"><a href="javascript: openWindow2()"><img src="Lorikeet2S.jpg" width="124" height="175"></a></td>
<td width="72%"><div align="center">Rainbow Lorikeet</div></td>
</tr>
</table>
</body>
</html>

Note that there is a javascript script for each image. I could not find a script which would deal with all images. Can anyone help here?

Next is the HTML code for a page which contains the enlarged image: This page would be repeated for each image:

!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>
function closeWindow()
{
// Close the current window
window.close();
}
</script>

</head>

<body>

<div align="center">
<p>Rainbow Lorikeet
<p><img src="Lorikeet1M.jpg" width="496" height="702">
<p><a href="javascript: closeWindow()">Close This Window</a>
</div>

</body>
</html>

The HTML coding that I use does overcome one problem - the inability of close.window to work in Firefox . To date, the solution works in both Safari and Firefox

Help this helps!

Onesimus

**Onesimus** · 04-20-2009, 12:14 AM

Since my last email, I have gone back and checked jthayne's suggestion to use Lightbox. Yes - he is right! It is simple to use and very elegant in its operation. Highly recommended! Thanks jthayne!

As a Mac user, I have found that ImageWell does a great job of creating watermarks on images.

Onesimus

**jthayne** · 04-21-2009, 09:23 AM

Originally Posted by Onesimus

As a Mac user, I have found that ImageWell does a great job of creating watermarks on images.

Thank you for the information. I have not been able to afford a Mac yet, so I am unaware of what is out there for Macs. This is good to know.

**adamsen** · 04-21-2009, 10:17 AM

Hey Onesimus, you are not a newbie. You are very good at making websites. You got talent. Welcome to the forums!

**Onesimus** · 04-21-2009, 04:44 PM

Thanks adamsen.

Yes, making websites is a hobby that I have been practising for years. At the moment, I am the website creator and updater of two church websites, one of which is:

http://www.parish.woll.catholic.org.au/home/rmeadow/

The other website is pretty much the same as this one.

At the moment, I am in the process of creating a website to sell my photography - hence my request. Very fortunately, the responses to my request "Opening A New Window" have brought in some fantastic answers and I am modifying the design in response to these answers. The only problem at the moment is that the website works perfectly in Safari but not in Firefox! There's no Mac version of Explorer.

Best wishes!

Onesimus

**jthayne** · 04-21-2009, 05:39 PM

Originally Posted by Onesimus

There's no Mac version of Explorer.

There used to be. Did they stop supporting it?

**Onesimus** · 04-21-2009, 10:13 PM

Hi jthayne - once Apple released the Safari browser, Microsoft ceased further development of Explorer for Mac. (Mac users have Microsoft Office - but no Outlook and Publisher). I believe the last IE for Mac was Version 5. It may still run under Mac OS 10.5 (Leopard), but I haven't tested it. The funny thing is that Safari now has a Windows version for XP and Vista. As I also run Windows XP on my Mac, I can test my websites using current Windows versions of Firefox, Safari and IE7.

Onesimus

**jthayne** · 04-22-2009, 09:02 AM

Awesome. Thanks for the update on that.

**adamsen** · 04-23-2009, 12:10 PM

Hi Onesimus

I will wish you the best luck with your projects.

Adamsen

**bassman** · 04-28-2009, 09:19 AM

Hello Onesimus. Just a little tip. Since you are already creating a separate page for each larger picture (rather then just pointing to the xxx.jpg file directly) you could simply create an HTML template and reuse it for each photo editing the photo file name and HTML file name accordingly. This would have the "Close" or "Return" or "Home" button in it and it would point to where you need. Simple HTML and no more problem with IE, FF, Safari, or any others.

Thread: Opening a new window

Thread Tools

Related

Verifing Window 'size' upon Opening a File. Forum: Javascript Forum

Opening New Window Forum: Javascript Forum

javascript-help with opening in frame window Forum: Javascript Forum

Page opening in new window - Help Forum: HTML Forum

problem with javascript opening a new window Forum: Javascript Forum

Opening a new window

Re: Opening a new window

Re: Opening a new window

Re: Opening a new window - solution

Re: Opening a new window

Re: Opening a new window

Re: Opening a new window

Re: Opening a new window

Re: Opening a new window

Re: Opening a new window

Re: Opening a new window

Re: Opening a new window

Re: Opening a new window

Tags for this Thread