Link to home
Start Free TrialLog in
Avatar of ziggles
ziggles

asked on

Frontpage 2003 Window Popup

When I add an image to my website I want to be able to click on the image and it open in a new window but without the icons etc... on the top.  I can create a window ok but I want o be able to make the window the same size as the image.  For example if you go to:  www.onmyboat.co.uk and click on one of the images like "Shower" and you will notice this person has made it so as it will open in a tidy window with having the address bar & icons etc... at the top.  I use Frontpage 2003 for my website.
ASKER CERTIFIED SOLUTION
Avatar of matrixnz
matrixnz
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of ziggles
ziggles

ASKER

How do I do this for a photo.  I want visitors to my site to be able to click on an image and the a pop up window pop up with a larger image in it.
Avatar of ziggles
ziggles

ASKER

How do I add the behaviour to the link or image?
Avatar of matrixnz
matrixnz
Hi Ziggles

The behaviours need to be added via code view, here are the steps you need to proceed, basically you need two pages the popup page and a content page, from the content page you have a thumbnail image with javascript link that opens the popup page which contains the large image.  Below are two pages I created, I hope you get the gist of what I'm saying.

Cheers

1. Create a new page called MYPOPUP.htm or whatever name you wish for e.g. here is a simple page with a link this will contain your content for your popup page
for e.g.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Popup Window</title>
<style type="text/css">
<!--
a {
      color: #990000;
      text-decoration: none;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 11px;
      font-weight: bold;
      margin: 10px;
}
-->
</style>
</head>

<body>
<table width="320" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="/images/lgimg.jpg" width="320" height="240" border="0" /></td>
  </tr>
  <tr>
    <td><a href="javascript:window.close();" class="style1">Close This Window</a></td>
  </tr>
</table>
</body>
</html>

2. Create your content page with thumbnail images this is where you apply the javascript mentioned above.
For e.g.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Content Page</title>
<script type="text/JavaScript">
<!--
function OpenPUWindow(theURL,winName,features) {
  window.open(theURL,winName,features);
}
//-->
</script>
</head>
<body>
<a href="javascript:;" onclick="OpenPUWindow('/mypopup.htm','mypopup','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=320,height=280,left=50,top=50')"><img src="/images/smimg.jpg" width="100" height="75" border="0" /></a>
</body>
</html>
Avatar of ziggles
ziggles

ASKER

Hi matrixnz

Finding it hard to follow you.  Perhaps if I explain why I want to know this.  If you go to http://jobray.users.btopenworld.com/cliftonmoorcroft/enamels.htm you will see two images there.  What I would like to do is when visitors click on either of the two images it pop up in a small window.  You will see that I have sort of managed to do it already.  What I would like to do is be able to right a small bit of text in the pop up window also with a link to close the window.  Also how to add a title to the pop up because as you see it comes up with the address instead of a title.  Your answers have been great so far I think im getting close to what I want.  
Avatar of matrixnz
matrixnz
Hi Ziggles

Please follow the next two posts, this post shows how you setup your intitial page, note that I've removed alot of unnessary code from your page, which Frontpage inserts and is not needed.

FIRST STEP

Make a backup of enamels1.htm now replace your enamels1.htm page with the following code

<html>
<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Moorcroft Enamels</title>
<style>
<!--
#OutLine {
      font-family: Times New Roman;
      font-size:10.0pt;
      height: 100%;
      width: 80%;
      border: 1px solid #000000;
      margin-left: 4.4pt;
}
h1 {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 24px;
      font-weight: bold;
      color: #000066;
      text-decoration: underline;
}
h2 {
      font-size: 14px;
      white-space: nowrap;
      color: #000066;
}
.ItemNo {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      vertical-align: top;
      white-space: nowrap;
      width: 62px;
      padding-top: 0cm;
      padding-right: 5.4pt;
      padding-bottom: 0cm;
      padding-left: 5.4pt;
      color: #000066;
}
.ItemName {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      vertical-align: top;
      white-space: nowrap;
      width: 145px;
      padding-top: 0cm;
      padding-right: 5.4pt;
      padding-bottom: 0cm;
      padding-left: 5.4pt;
      color: #000066;
}
.Description {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      vertical-align: top;
      white-space: nowrap;
      width: 308px;
      padding-top: 0cm;
      padding-right: 5.4pt;
      padding-bottom: 0cm;
      padding-left: 5.4pt;
      color: #000066;
}
.Price {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      vertical-align: top;
      white-space: nowrap;
      width: 43px;
      padding-top: 0cm;
      padding-right: 5.4pt;
      padding-bottom: 0cm;
      padding-left: 5.4pt;
      color: #000066;
}
.Picture {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      vertical-align: top;
      white-space: nowrap;
      width: 155px;
      padding-top: 0cm;
      padding-right: 5.4pt;
      padding-bottom: 0cm;
      padding-left: 5.4pt;
      color: #000066;
}
-->
</style>
<script type="text/JavaScript">
<!--
function OpenPUWindow(theURL,winName,features) {
  window.open(theURL,winName,features);
}
//-->
</script>
</head>
<body>
<h1 align="center">Moorcroft Enamels</h1>
<p>&nbsp;</p>
<div align="center">
      <table border="1" cellPadding="0" cellSpacing="0" bordercolor="#000066" id="OutLine">
            <tr>
                  <td class="ItemNo"><h2>Item No.</h2></td>
                  <td class="ItemNo"><h2>Item Name</h2></td>
                  <td class="Description"><h2>Description</h2></td>
                  <td class="Price"><h2>Price</h2></td>
                  <td class="Picture"><h2>Picture</h2></td>
            </tr>
            <tr>
                  <td class="ItemNo">&nbsp;</td>
                  <td class="ItemName">&quot;Tawny Owl Box&quot;</td>
                  <td class="Description">Hand painted by A J Rese. No 50 from a limited edition of 50 Featuring three owls painted inside and out and three owls and a baby owl round the side.<br>Exquiste piece 70 x 30mm</td>
                  <td class="Price">£595</td>
                  <td class="Picture"><a href="javascript:;" onclick="OpenPUWindow('mypopup.htm','mypopup','resizable=yes,width=320,height=500,left=50,top=50')"><img src="http://jobray.users.btopenworld.com/cliftonmoorcroft/moorcroftpictures2004017.jpg" width="155" height="100" border="0"></a></td>
            </tr>
            <tr>
                  <td class="ItemNo">&nbsp;</td>
                  <td class="ItemName">&nbsp;</td>
                  <td class="Description">&nbsp;</td>
                  <td class="Price">&nbsp;</td>
                  <td class="Picture">&nbsp;</td>
            </tr>
            <tr>
                  <td class="ItemNo">&nbsp;</td>
                  <td class="ItemName">&nbsp;</td>
                  <td class="Description">&nbsp;</td>
                  <td class="Price">&nbsp;</td>
                  <td class="Picture">&nbsp;</td>
            </tr>
            <tr>
                  <td class="ItemNo">&nbsp;</td>
                  <td class="ItemName">&nbsp;</td>
                  <td class="Description">&nbsp;</td>
                  <td class="Price">&nbsp;</td>
                  <td class="Picture">&nbsp;</td>
            </tr>
            <tr>
                  <td class="ItemNo">&nbsp;</td>
                  <td class="ItemName">&nbsp;</td>
                  <td class="Description">&nbsp;</td>
                  <td class="Price">&nbsp;</td>
                  <td class="Picture">&nbsp;</td>
            </tr>
            <tr>
                  <td class="ItemNo">&nbsp;</td>
                  <td class="ItemName">&nbsp;</td>
                  <td class="Description">&nbsp;</td>
                  <td class="Price">&nbsp;</td>
                  <td class="Picture">&nbsp;</td>
            </tr>
            <tr>
                  <td class="ItemNo">&nbsp;</td>
                  <td class="ItemName">&nbsp;</td>
                  <td class="Description">&nbsp;</td>
                  <td class="Price">&nbsp;</td>
                  <td class="Picture">&nbsp;</td>
            </tr>
            <tr>
                  <td class="ItemNo">&nbsp;</td>
                  <td class="ItemName">&nbsp;</td>
                  <td class="Description">&nbsp;</td>
                  <td class="Price">&nbsp;</td>
                  <td class="Picture">&nbsp;</td>
            </tr>
            <tr>
                  <td class="ItemNo">&nbsp;</td>
                  <td class="ItemName">&nbsp;</td>
                  <td class="Description">&nbsp;</td>
                  <td class="Price">&nbsp;</td>
                  <td class="Picture">&nbsp;</td>
            </tr>
            <tr>
                  <td class="ItemNo">&nbsp;</td>
                  <td class="ItemName">&nbsp;</td>
                  <td class="Description">&nbsp;</td>
                  <td class="Price">&nbsp;</td>
                  <td class="Picture">&nbsp;</td>
            </tr>
            <tr>
                  <td class="ItemNo">&nbsp;</td>
                  <td class="ItemName">&nbsp;</td>
                  <td class="Description">&nbsp;</td>
                  <td class="Price">&nbsp;</td>
                  <td class="Picture">&nbsp;</td>
            </tr>
            <tr>
                  <td class="ItemNo">&nbsp;</td>
                  <td class="ItemName">&nbsp;</td>
                  <td class="Description">&nbsp;</td>
                  <td class="Price">&nbsp;</td>
                  <td class="Picture">&nbsp;</td>
            </tr>
            <tr>
                  <td class="ItemNo">&nbsp;</td>
                  <td class="ItemName">&nbsp;</td>
                  <td class="Description">&nbsp;</td>
                  <td class="Price">&nbsp;</td>
                  <td class="Picture">&nbsp;</td>
            </tr>
            <tr>
                  <td class="ItemNo">&nbsp;</td>
                  <td class="ItemName">&nbsp;</td>
                  <td class="Description">&nbsp;</td>
                  <td class="Price">&nbsp;</td>
                  <td class="Picture">&nbsp;</td>
            </tr>
            <tr>
                  <td class="ItemNo">&nbsp;</td>
                  <td class="ItemName">&nbsp;</td>
                  <td class="Description">&nbsp;</td>
                  <td class="Price">&nbsp;</td>
                  <td class="Picture">&nbsp;</td>
            </tr>
            <tr>
                  <td class="ItemNo">&nbsp;</td>
                  <td class="ItemName">&nbsp;</td>
                  <td class="Description">&nbsp;</td>
                  <td class="Price">&nbsp;</td>
                  <td class="Picture">&nbsp;</td>
            </tr>
            <tr>
                  <td class="ItemNo">&nbsp;</td>
                  <td class="ItemName">&nbsp;</td>
                  <td class="Description">&nbsp;</td>
                  <td class="Price">&nbsp;</td>
                  <td class="Picture">&nbsp;</td>
            </tr>
            <tr>
                  <td class="ItemNo">&nbsp;</td>
                  <td class="ItemName">&nbsp;</td>
                  <td class="Description">&nbsp;</td>
                  <td class="Price">&nbsp;</td>
                  <td class="Picture">&nbsp;</td>
            </tr>
            <tr>
                  <td class="ItemNo">&nbsp;</td>
                  <td class="ItemName">&nbsp;</td>
                  <td class="Description">&nbsp;</td>
                  <td class="Price">&nbsp;</td>
                  <td class="Picture">&nbsp;</td>
            </tr>
            <tr>
                  <td class="ItemNo">&nbsp;</td>
                  <td class="ItemName">&nbsp;</td>
                  <td class="Description">&nbsp;</td>
                  <td class="Price">&nbsp;</td>
                  <td class="Picture">&nbsp;</td>
            </tr>
            <tr>
                  <td class="ItemNo">&nbsp;</td>
                  <td class="ItemName">&nbsp;</td>
                  <td class="Description">&nbsp;</td>
                  <td class="Price">&nbsp;</td>
                  <td class="Picture">&nbsp;</td>
            </tr>
            <tr>
                  <td class="ItemNo">&nbsp;</td>
                  <td class="ItemName">&nbsp;</td>
                  <td class="Description">&nbsp;</td>
                  <td class="Price">&nbsp;</td>
                  <td class="Picture">&nbsp;</td>
            </tr>
            <tr>
                  <td class="ItemNo">&nbsp;</td>
                  <td class="ItemName">&nbsp;</td>
                  <td class="Description">&nbsp;</td>
                  <td class="Price">&nbsp;</td>
                  <td class="Picture">&nbsp;</td>
            </tr>
            <tr>
                  <td class="ItemNo">&nbsp;</td>
                  <td class="ItemName">&nbsp;</td>
                  <td class="Description">&nbsp;</td>
                  <td class="Price">&nbsp;</td>
                  <td class="Picture">&nbsp;</td>
            </tr>
            <tr>
                  <td class="ItemNo">&nbsp;</td>
                  <td class="ItemName">&nbsp;</td>
                  <td class="Description">&nbsp;</td>
                  <td class="Price">&nbsp;</td>
                  <td class="Picture">&nbsp;</td>
            </tr>
            <tr>
                  <td class="ItemNo">&nbsp;</td>
                  <td class="ItemName">&nbsp;</td>
                  <td class="Description">&nbsp;</td>
                  <td class="Price">&nbsp;</td>
                  <td class="Picture">&nbsp;</td>
            </tr>
            <tr>
                  <td class="ItemNo">&nbsp;</td>
                  <td class="ItemName">&nbsp;</td>
                  <td class="Description">&nbsp;</td>
                  <td class="Price">&nbsp;</td>
                  <td class="Picture">&nbsp;</td>
            </tr>
            <tr>
                  <td class="ItemNo">&nbsp;</td>
                  <td class="ItemName">&nbsp;</td>
                  <td class="Description">&nbsp;</td>
                  <td class="Price">&nbsp;</td>
                  <td class="Picture">&nbsp;</td>
            </tr>
            <tr>
                  <td class="ItemNo">&nbsp;</td>
                  <td class="ItemName">&nbsp;</td>
                  <td class="Description">&nbsp;</td>
                  <td class="Price">&nbsp;</td>
                  <td class="Picture">&nbsp;</td>
            </tr>
            <tr>
                  <td class="ItemNo">&nbsp;</td>
                  <td class="ItemName">&nbsp;</td>
                  <td class="Description">&nbsp;</td>
                  <td class="Price">&nbsp;</td>
                  <td class="Picture">&nbsp;</td>
            </tr>
            <tr>
                  <td class="ItemNo">&nbsp;</td>
                  <td class="ItemName">&nbsp;</td>
                  <td class="Description">&nbsp;</td>
                  <td class="Price">&nbsp;</td>
                  <td class="Picture">&nbsp;</td>
            </tr>
  </table>
</body>
</html>
Avatar of matrixnz
matrixnz
SECOND STEP

Create your Popup page mypopup.htm do this by creating a new page and replacing the code with the following

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>PopUp Window Title</title>
<style type="text/css">
<!--
a {
      color: #990000;
      text-decoration: none;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 11px;
      font-weight: bold;
      margin: 10px;
}
body {
      margin: 0px;
      padding: 0px;
}
-->
</style>
</head>

<body>
<table width="320" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="http://jobray.users.btopenworld.com/cliftonmoorcroft/moorcroftpictures2004017.jpg" width="320" height="480" border="0" /></td>
  </tr>
  <tr>
    <td><a href="javascript:window.close();" class="style1">Close This Window</a></td>
  </tr>
</table>
</body>
</html>
Avatar of matrixnz
matrixnz
To change the Title just change the text between <title></title>

If you look at the Second Step the code to close your popup window is
<a href="javascript:window.close();" class="style1">Close This Window</a>

For additional pages remember that you can change the popup.htm file name but leave the second part mypopup in tact, that way when you click on additional images they'll open in the same popup window
onclick="OpenPUWindow('...htm','mypopup'

Hope that helps.

Cheers
Avatar of ziggles
ziggles

ASKER

Just had a play and done it no probs.  Thanks.  When you say frontpage inserts alot of unnessary coding which is not needed.  Can you explain this abit more just out of interest.  Also I have noticed when I have visited various other websites with pop ups they have an option in the pop up window to print.  How do you do this and is it an easy thing to do?  
Avatar of ziggles
ziggles

ASKER

I have hit a problem.  If you go to www.jbfarrieryservices.co.uk and click on the PHOTO GALLERY page.  Then on that page lower down you will see 6 photos.  The top right photo says error when you click on it.  What have I done wrong?  Can seem to figure it out.  
Avatar of matrixnz
matrixnz
Hi Ziggles

Firstly you haven't added the javascript to the header of your page, also on the popup page you need to replace .jpg with .JPG as the url won't display on the popup.

If you want replace the photo_gallery1.htm with the following code.

Cheers

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
<!--
body, html {
      background-color: #FFF;
      background-image: url(http://jobray.users.btopenworld.com/farrier/horsebackground.jpg);
      text-align: center;
      margin: 0;
      padding: 0;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 11px;
}

h1 {
      font-family: Georgia, Times New Roman, Times, serif;
      font-size: 28px;
      font-weight: bold;
      text-decoration: underline;
}
h2 {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 12px;
      font-weight: bold;
}
h3 {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 12px;
      font-weight: bold;
      color: RED;
}
a {
      color: #0057A4;
      text-decoration: none;
}
-->
</style>
<script type="text/JavaScript">
<!--
function OpenPUWindow(theURL,winName,features) {
  window.open(theURL,winName,features);
}
//-->
</script>
</head>

<body>
<h1>Photo Gallery</h1>
<h2>Welcome to my Photo Gallery.</h2>
<p>Click on the area in the top right of my vans windscreen below to view my Registration Badge <br />( only legal farriers have these - Click <a href="http://frc.gotadsl.co.uk:7000/frc/document.asp?page=registeredfarriers">HERE</a> for more info ).</p>
<p>&nbsp;</p>
<p><a href="javascript:;" onClick="OpenPUWindow('http://jobray.users.btopenworld.com/farrier/reg_badge.jpg','mypopup','resizable=yes,width=1024,height=768,left=50,top=50')"><img src="http://jobray.users.btopenworld.com/farrier/front_of_van1.jpg" width="260" height="195" border="0" /></a></p>
<h2>Here are a few photos of me at work.</h2>
<table border="0" cellspacing="10" cellpadding="0">
  <tr>
    <td><a href="javascript:;" onClick="OpenPUWindow('http://jobray.users.btopenworld.com/farrier/me_at_work_popup.htm','mypopup','resizable=yes,width=330,height=350,left=50,top=50')"><img border="0" src="http://jobray.users.btopenworld.com/farrier/DSCF0089.JPG" width="193" height="144"></a></td>
    <td><img border="0" src="http://jobray.users.btopenworld.com/farrier/DSCF0091.JPG" width="193" height="144"></td>
    <td><img border="0" src="http://jobray.users.btopenworld.com/farrier/DSCF0092.JPG" width="193" height="144"></td>
  </tr>
  <tr>
    <td><img border="0" src="http://jobray.users.btopenworld.com/farrier/DSCF0095.JPG" width="193" height="144"></td>
    <td><img border="0" src="http://jobray.users.btopenworld.com/farrier/DSCF0100.JPG" width="193" height="144"></td>
    <td><img border="0" src="http://jobray.users.btopenworld.com/farrier/DSCF0104.JPG" width="193" height="144"></td>
  </tr>
</table>
<p>Please view this page regularly as new photos of me at work will be added every few weeks.</p>
<p>&nbsp;</p>
<!-- Start of NO RIGHT CLICK code -->
<NOSCRIPT>
<h3>Please enable JavaScript in your browser preferences and then Reload this page!!!</h3>
</NOSCRIPT>
<script language="JavaScript">

<!--
var message="All photos and text are copyright protected.\n\nAll Rights Reserved"
// Right Click function

function click(e) {
if (document.all) {
if (event.button == 2) {
alert(message);
return false;
}
}
if (document.layers) {
if (e.which == 3) {
alert(message);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown=click;
// -->

</script>
<!-- End of NO RIGHT CLICK code -->
</body>
</html>