Print This Page |
This script is from this website -- a good source: NOT DONE!!! :http://www.crays.com/jsc/
Step 1 - Copy
the following to the <HEAD> section of your HTML code file.
<!--BEGIN Pop-up Images
Script------------------------------------------->
<SCRIPT Language="JavaScript">
<!--
// Copyright 1999 - 2002 by Ray Stott, Pop-up Images Script ver 2.0
// OK to use if this copyright is included
// Script is available at http://www.crays.com/jsc
var pic = null
var popImg = null // use this when referring to pop-up image
var picTitle = null
var imgCount = 0
var imgWinName = "popImg"
function openPopImg(picName, windowTitle, windowWidth, windowHeight){
closePopImg()
picTitle = windowTitle
imgWinName = "popImg" + imgCount++ //unique name for each pop-up window
popImg = window.open(picName, imgWinName,
"toolbar=no,scrollbars=no,resizable=no,width="
+ (parseInt(windowWidth)+20) + ",height="
+ (parseInt(windowHeight)+15))
}
function closePopImg(){ // close pop-up window if it is open
if (navigator.appName != "Microsoft Internet Explorer"
|| parseInt(navigator.appVersion) >=4) //do not close if early IE
if(popImg != null) if(!popImg.closed) popImg.close()
}
function setStatus(msg){
status = msg
return true
}
//-->
</SCRIPT>
<SCRIPT Language="JavaScript1.1">
<!--
// for Netscape 3+ and IE 4+
var priorPic = new Array()
var noPic = 0
var foundit = false
function openPopImg(picName, windowTitle, windowWidth, windowHeight){
var i = 0
if(pic == picName && winOpen()){
popImg.focus()
}
else{
foundit = false
for(i=0; i<=noPic; i++){
if (priorPic[i] == picName)
foundit = true
}
pic = picName
closePopImg()
picTitle = windowTitle
imgWinName = "popImg" + imgCount++ //unique name for each pop-up window
if(!foundit){
priorPic[noPic++] = pic
}
popImg = openPopImgWin(imgWinName, windowWidth, windowHeight)
}
}
function openPopImgWin(imgWinName, windowWidth, windowHeight){
var winFeatures = "toolbar=no,scrollbars=no,resizable=no,width="
+ windowWidth + ",height=" + windowHeight
return window.open("pimg.htm", imgWinName, winFeatures)
}
function winOpen(){
if(popImg != null){
if(popImg.closed != true) return true; else return false
}
else
return false
}
//-->
</SCRIPT>
<SCRIPT Language="JavaScript1.2">
<!--
// Use this function to control placement of pop-up window
// in Netscape 4+ and Internet Explorer 4+
function openPopImgWin(imgWinName, windowWidth, windowHeight){
var leftX = 20 // distance of window's left side from left of screen
var topY = 20 // distance of window's top side from top of screen
var winFeatures = "toolbar=no,scrollbars=no,resizable=no,width="
+ windowWidth + ",height=" + windowHeight
if (leftX>0){
winFeatures += ",screenX=" + leftX + ",left=" + leftX
+ ",screenY=" + topY + ",top=" + topY
}
return window.open("pimg.htm", imgWinName, winFeatures)
}
//-->
</SCRIPT>
<!--END Pop-up Images Script-------------------------------------------->
Step 2 - Put a call to the closePopImg() function in your <BODY> tag as shown below.
<BODY onUnload="closePopImg()"> |
Step 3 - Use the following syntax for each image you wish to open in a pop-up window.
<A HREF="JAVASCRIPT:openPopImg(picName, windowTitle, windowWidth, windowHeight)" onMouseOver="return setStatus('Click to display picture.')" onMouseOut="return setStatus('')"> <IMG SRC=name_of_thumbnail_file ALT=alt_text></A> |
where:
picName - name of file for image that will be displayed in
pop-up window. example: 'anthony.jpg'
windowTitle - text to be displayed in pop-up window's title.
example: 'Anthony'
windowWidth - width of image in pixels. example: '226'
windowHeight - height of image in pixels. example: '221'
name_of_thumbnail_file - name of file that will be displayed as
thumbnail picture. example: 'anthonyi.jpg'
alt_text - the alternant text for the image. example: 'Anthony'
Important Note: Each of the above parameters is setoff using single quotes ('), the apostrophe on your keyboard. Do not use double quotes (") in this case. The parameters are already contained in strings that are setoff by double quotes, so the single quote must be used.
So an example of the necessary html code renders as follows: <A HREF="JAVASCRIPT:openPopImg('anthony.jpg', 'Anthony', '226', '221')" onMouseOver="return setStatus('Click to display picture.')" onMouseOut="return setStatus('')"> <img src="anthonyi.jpg" alt="Anthony"></A>
Step 4 - Copy the following to a new file and save it as pimg.htm. Put a copy of it in the same directory as file that contains the script from step 1.
<HTML>
<HEAD>
<!--
This code is part of a Pop-up image Script that is available at http://www.crays.com/jsc
--->
<TITLE>Loading</TITLE>
<SCRIPT Language="JavaScript">
<!--
function fabricatePage(){
var htmlStr =
'<HTML><HEAD><TITLE>' + window.opener.picTitle + '</TITLE></HEAD>'
+ '<BODY background="' + window.opener.pic + '"></BODY></HTML>'
document.open()
document.write(htmlStr)
document.close()
}
//-->
</SCRIPT>
</HEAD>
<BODY bgcolor="#CCCCCC" onLoad="fabricatePage()">
<SCRIPT Language="JavaScript">
<!--
if(!window.opener.foundit){
document.write("Loading Picture...<BR>")
document.write('<img src="' + window.opener.pic + '" width=100% height=80%>')
document.close()
}
//-->
</SCRIPT>
</BODY>
</HTML>
The Pop-up Images Script is
- FREE for use on all Sites that are family oriented. Please click here for details.
- Easy to setup on your page using the instructions provided here.
- Designed to work with all browsers.
Pop-up Windows are managed by this Script so that
- Image is displayed in the full available space of pop-up window with no borders seen.
- Pop-up becomes the top window anytime a link or thumbnail is clicked.
- Only one image pop-up is open at any time.
- Image is shown as it loads so that surfer knows something is happening (most browsers).
- Location of pop-up on the screen can be specifically set (most browsers).
- Pop-up is closed when document that called it is closed.
<TABLE border=0 cellpadding=6 cellspacing=0
bgcolor="Ivory">
<TR><TD colspan=2><hr></TD></TR>
<TR>
<TH colspan=2>
<FONT size=5 color="#669999">
Demonstration of Script<BR>
<FONT size=3>
(Click on Thumbnail to view)<BR>
</FONT></FONT>
</TH></TR>
<TR>
<TD width=200>
Picture #1 - I borrowed this from my Nephew's page.
</TD><TD>
<A HREF="JAVASCRIPT:openPopImg('img/anthony.jpg', 'Anthony', '226', '221')"
onMouseOver="return setStatus('Click to display picture of Anthony.')"
onMouseOut="return setStatus('')">
<img src="img/anthonyi.jpg" alt="Anthony" border=0></A>
</TD></TR>
<TR>
<TD width=200>
Picture #2 - This is my dog named Buttons.
</TD><TD>
<A HREF="JAVASCRIPT:openPopImg('img/buttons.jpg', 'Buttons', '367', '286')"
onMouseOver="return setStatus('Click to display picture of Buttons.')"
onMouseOut="return setStatus('')">
<img src="img/buttonsi.jpg" alt="Buttons" border=0></A>
</TD></TR>
<TR><TD colspan=2><hr></TD></TR>
</TABLE>
Example:
|
This page is under construction