<script type="text/javascript">
function goImgWin(myImage,myWidth,myHeight,origLeft,origTop) {
myHeight += 24;
myWidth += 24;
TheImgWin = window.open(myImage,'image','height=' +
myHeight + ',width=' + myWidth +
',toolbar=no,directories=no,status=no,' +
The script to the left can be used exactly as is. It allows you to add multiple images and sizes on your page.

Copy and Paste the code into <Head>tag box under Advanced on Properties Editor
Note that the width and height in the call to goImgWin in the code below, match exactly that of the larger image to be opened in that window (so as to open a browser window of an appropriate size). All you need to do is to change the images and image sizes specified to reflect your requirements.
<a href="http://www.homesteadconnection.com/2009DesignChanges/SEO-puzzle.jpg" target="_blank"
return false;"><img src="http://www.homesteadconnection.com/2009DesignChanges/HdrHouse.jpg"
width="96" height="99" border="0"
alt="SEO PUZZLE" align="left" /></a>
The position and size of the window is determined by the four numbers in the line:
onclick="goImgWin('address of your image',289,302,100,50)

That means picture width is 289, height 302, top left corner of the popup will be in 100 from the left and down 50 from the top of the screen.
  • You will need to change items in RED - there are 2 - to the address of the image you want to open in the popup. 
  • Change the address in BLUE to the source image - the image that will show up on the page.
  • The two numbers in GREEN need to be changed to reflect the size of your popup image. VERY IMPORTANT that you change these to the real size of the image you want to pop up. IF you have simply made the picture smaller or larger using the 'handles' and are using those dimensions you probably aren't going to get the desired result.
  • The two numbers in PURPLE need to be changed to reflect the size of your small image - the one that will show on the page. These numbers need to be the true size of the image.
  • You can add a border around your small image by entering a line width - current setting is 0 which means no border.
  • Add the alt text for your image
Copyright 2006 - Homestead Connection - All Rights Reserved
Homestead Website Design and SEO - S&J Enterprises
Use the internal search feature to the right or the site map for easy access to information.
Home     Tools    FAQs     Web Design    Tips     Tutorials    Forum    Contact    Site  Map
Guides to using the Tools in the SiteBuilder program
Frequently asked questions about using Site Builder software
Homestead website design guides
Enhance the Homestead website with these tips
Tutorials to help Homestead users with creating their website
Homestead Connection Site Map and Search function
Homestead website design guides
Enhance the Homestead website with these tips
Create an Image to Image PopUp Window in SiteBuilder
<a href="http://www.homesteadconnection.com/Book_cover_WIP_3.jpg" target="_blank"
return false;"><img src="http://www.seobuildingblocks.com/files/QuickSiteImages/40_.jpg"
width="113" height="147" border="2"
alt="SEO Building Blocks Ebook" align="left" /></a>
SEO Building Blocks Ebook
Thanks to Stephen Chapman for writing the code in the first place and then helping me  troubleshoot it for use in SiteBuilder.
You can add multiple images on a page just by changing the image addresses and sizes.
In the code above the placement on the page where the popup will show is changed and a 2 pixel border was added to the small image.
Create an HTML box  and paste your code into it. Position it on the page where you want the small image to appear.