Print This Page


This script is from this website -- a good source: NOT DONE!!!  :http://www.crays.com/jsc/

  1. Example of this script at the bottom of this page.
  2. Copy this script into your computer clipboard memory,
  3. Paste where you want the script to appear in your web page.

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

Pop-up Windows are managed by this Script so that

<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>&nbsp;
</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:


Demonstration of Script
(Click on Thumbnail to view)
 
Picture #1 - I borrowed this from my Nephew's page. Anthony
Picture #2 - This is my dog named Buttons. Buttons

This page is under construction