Close popup image if detects mouse click

[bebu]

I am a beginner with very basic knowledge of Javascript.

Please help me to modify this script. When somebody clicks on the thumbnail to open up the enlarged popup image ( not an html page).
I have seen somewhere where somebody tries to left click on the popup image or right click to save it, the popup closes by it self.
Self close timer won't for me. I tried watermarking for the images. People wipe the watermark and still use them as if their own. :(

[code=javascript]

<!-- ;
var newwindow = ''
function popitup(url) {
if (newwindow.loca tion && !newwindow.clos ed)
{ newwindow.locat ion.href = url; newwindow.focus (); }
else
{ newwindow=windo w.open(url,'htm lname','width=5 00,height=600,r esizable=1') ; }
}
function tidy()
{
if (newwindow.loca tion && !newwindow.clos ed) { newwindow.close (); }
}
// -->
</script>

<a href="javascrip t:popitup('imag e_to_open_in_po pup.jpg')"><img src="image_from _the_html_page. jpg" width="300" height="225" border="0" alt="image_name "></a>[/code]

[pbmods]

Heya, bebu. Welcome to TSDN!

Please use CODE tags when posting source code. See the REPLY GUIDELINES on the right side of the page next time you post.

Try this:

[code=javascript]
window.onclick = window.close;
[/code]

[bebu]

Thanks for your reply! Where should I add above code?

[pbmods]

Heya, bebu.

Thanks for your reply! Where should I add above code?

You'll want to put that in the code of the pop-up window, preferably in the HEAD element, since that way the User can't click the stop button to bypass your code.

[bebu]

Popup window opens only image. There is no head content or HTML document

[pbmods]

Heya, bebu.

Popup window opens only image. There is no head content or HTML document

Fair enough. In that case, you'll add a slightly different line of code right after you open the window:
[code=javascript]
newwindow.oncli ck = newwindow.close ;
[/code]

Where newwindow is the variable that references the newly-opened window.

[bebu]

Heya, bebu.



Fair enough. In that case, you'll add a slightly different line of code right after you open the window:
[code=javascript]
newwindow.oncli ck = newwindow.close ;
[/code]

Where newwindow is the variable that references the newly-opened window.

Where do I insert the above code? I tried, may be I am doing something wrong. I have very little knowledge of Javascript.

Thanks pbmods!

[pbmods]

Heya, bebu.

Ok. So we have here on line 7 of your OP:
[code=javascript]
newwindow=windo w.open(url,'htm lname','width=5 00,he ight=600,resiza ble=1')
[/code]

This opens a new window and 'stores' it in the newwindow variable. So far so good.

Now the goal is to set this up so that whenever the User clicks anywhere in that window, the window closes.

To do this, we'll set up an event handler that triggers when the User clicks the mouse in that window, also known as:
[code=javascript]
newwindow.oncli ck
[/code]

When the User clicks in the window, we want to close it. Fortunately, there is a function that does exactly that:
[code=javascript]
newwindow.close ()
[/code]

Now the trick is, we don't want to call newwindow.close () UNTIL the User clicks in that window (in other words, we don't want to call it until the onclick event fires for the new window).

So we have to chop off the '()' from the end:
[code=javascript]
newwindow.oncli ck = newwindow.close ;
[/code]

I wrote an article about why the '()' has to get removed from the end of the function name, but you don't have to worry about that right now. For now, just trust me that you have to do this.

So we now have our statement that will set up newwindow to close whenever the User clicks in it. But where do we put it?

The best place for it is directly after we create the new window:
[code=javascript]
if (newwindow.loca tion && !newwindow.clos ed)
{
newwindow.locat ion.href = url; newwindow.focus ();
}
else
{
newwindow = window.open(url ,'htmlname','wi dth=500,height= 600,resizable=1 ') ;
newwindow.oncli ck = newwindow.close ;
}
[/code]

[bebu]

:

[code=javascript]
if (newwindow.loca tion && !newwindow.clos ed)
{
newwindow.locat ion.href = url; newwindow.focus ();
}
else
{
newwindow = window.open(url ,'htmlname','wi dth=500,height= 600,resizable=1 ') ;
newwindow.oncli ck = newwindow.close ;
}
[/code]

Hi pbmods,

It works in Firefox/2.0.0.5 but not in IE 6.0.2. Why is that?

[pbmods]

Heya, bebu.

Hi pbmods,

It works in Firefox/2.0.0.5 but not in IE 6.0.2. Why is that?

Dunno. I have a Mac.

Does it give you an error?

[bebu]

Heya, bebu.



Dunno. I have a Mac.

Does it give you an error?

It doesn't give me any error. It closes with X but not with right or left click. And works fine in FireFox.

Am I allowed to post a link for the test page?

[pbmods]

Heya, bebu.

Am I allowed to post a link for the test page?

Sure. The rule against external links only applies to spam or commercial links. You are always welcome to post links to test pages and articles that help explain your posts.

[bebu]

Heya, bebu.



Sure. The rule against external links only applies to spam or commercial links. You are always welcome to post links to test pages and articles that help explain your posts.

Thanks pbmods!

Here is link ...
Test page

[pbmods]

Heya, Bebu.

Your page works as expected in Firefox on the Mac. However, it does not work in Safari, which would lead me to expect that this is a Firefox-only feature.

Here's what I would do. Instead of using an image as the URL for the pop-up, use an HTML document instead.

popup_image1.ht ml:
[code=html]
<html>
.
.
.

<body onclick="window .close();">
<img ... />
.
.
.
</body>
</html>
[/code]

And then in the original page:
[code=javascript]
newwindow = window.open('po pup_image1.html ' ... );
[/code]

[bebu]

Heya, Bebu.

Your page works as expected in Firefox on the Mac. However, it does not work in Safari, which would lead me to expect that this is a Firefox-only feature.

Here's what I would do. Instead of using an image as the URL for the pop-up, use an HTML document instead.

popup_image1.ht ml:
[code=html]
<html>
.
.
.

<body onclick="window .close();">
<img ... />
.
.
.
</body>
</html>
[/code]

And then in the original page:
[code=javascript]
newwindow = window.open('po pup_image1.html ' ... );
[/code]

I would like to avoid making HTML documents for the images, since I have over 150 images which has popup code.