th********@hotmail.com (Steve) writes:
Hi, I have a nice little script that works well displaying images on
my website. It's a script where if you clik a thumbnail image a pop
up window opens that contains a larger version of the same image.
So "works well" means that it works if no popup blocker prevents to
window from openening, and if Javascript is enabeled.
What I would like to create is a link that can be clicked on to
close the window that contains the larger image.
Make it a button. Buttons are clicked for an effect. Links are clicked
to get to a new resource.
Where do you want the button placed, on the old page or the new?
This would make it easier for the users to close the window.
Depends on users. For me, using mouse gestures is faster than any
button. :)
Anyway, making it faster to close makes it sound like you want
the button on the popup page.
<script language="JavaScript">
The type attribute is required in HTML 4, and the language attribute
is not necessary when type is used:
<script type="text/javascript">
<!--
HTML-like comments are not necessary in Javascript.
function doNothing(){}
??
function popUp1(winFile, winHeight, winWidth) {
window.open(winFile, '', 'width=' + winHeight + ',height=' + winWidth
+',')
.... <p><a href="javascript: void doNothing()"
onClick="popUp1('images/P5210025.jpg',265,223)"><img
src="images/images1/P5210025_small.jpg" width="125" height="93"></a>
A good example of FAQ 4.24 <URL:http://jibbering.com/faq/#FAQ4_24>.
Your page is unusable in browsers without Javascript, and it doesn't
need to be.
Make the link:
<a href="images/P5210025.jpg"
onclick=popUp1(this.href,265,223);return false;"><img
src="images/images1/P5210025_small.jpg" width="125" height="93"></a>
This works with and without Javascript. With Javascript, you control the
opening of the window. Without, the user still sees the big image.
Now, to add a close button to the popup window, you need to control
the contents of the window. As it is now, you just open the image.
To make a close button, you need to open an html page. Try this:
---
function popUp1(winFile, winHeight, winWidth) {
var w = window.open('', '',
'width='+winHeight+',height='+winWidth+',resizable =yes');
var d = w.document;
d.open();
d.writeln("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" "+
"\"http://www.w3.org/TR/html4/strict.dtd\">");
d.writeln("<html><head><title>Image<\/title>");
d.writeln("<meta http-equiv=\"Content-Script-Type\" ",
"content=\"text/javascript\"><\/head>");
d.writeln("<body style='margin:0px;padding:0px;'>")
d.writeln("<div><img src='"+winFile+"' onclick='window.close()'><\/div>");
d.writeln("<\/body><\/html>");
d.close();
}
---
This opens a popup, just as before. Then it writes HTML into it,
making an img element. It sets the onclick on the image element to
close the window, so you can click anywhere in the window to close it
(faster than any button).
Good luck
/L
--
Lasse Reichstein Nielsen -
lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
