Setup for Pop-up Image

Instructions for Implementing
Pop-up Images

Implementation of the necessary code on your site is easy if you follow the four steps outlined below.

Step 1 - Copy the following to the <HEAD> section of your HTML code file.

<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

<SCRIPT Language="JavaScript1.2"> 

</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.

That's all there is to it.

Feel free to use this script provided that your include the copyright. Please click here for details.
I have spent many hours developing this script. It works well with Netscape (version 3 and later) and Internet Explorer (version 4 and later). It also works with Internet Explorer 3 but the windows are not automatically closed as they are when viewed by a newer browser.
I do like to look at web pages that implement this code. So, please email me and send me the URL.

Thanks,
Ray