<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,' +
'menubar=no,scrollbars=no,resizable=no');
TheImgWin.resizeTo(myWidth+2,myHeight+30);
TheImgWin.moveTo(origLeft,origTop);
TheImgWin.focus();
}
</script>
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"
onclick="goImgWin('http://www.homesteadconnection.com/2009DesignChanges/SEO-puzzle.jpg',289,302,100,50);
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
Use the internal search feature to the right or the site map for easy access to information.
Create an Image to Image PopUp Window in SiteBuilder
<a href="http://www.homesteadconnection.com/Book_cover_WIP_3.jpg" target="_blank"
onclick="goImgWin('http://www.homesteadconnection.com/Book_cover_WIP_3.jpg',282,368,200,100);
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>
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.