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.
Last Comment
ASKER CERTIFIED SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
How do I add the behaviour to the link or image?
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.cl
</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,winNam
window.open(theURL,winName
}
//-->
</script>
</head>
<body>
<a href="javascript:;" onclick="OpenPUWindow('/my
</body>
</html>
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.cl
</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,winNam
window.open(theURL,winName
}
//-->
</script>
</head>
<body>
<a href="javascript:;" onclick="OpenPUWindow('/my
</body>
</html>
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.
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.
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-Langua
<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,winNam
window.open(theURL,winName
}
//-->
</script>
</head>
<body>
<h1 align="center">Moorcroft Enamels</h1>
<p> </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>De
<td class="Price"><h2>Price</h
<td class="Picture"><h2>Pictur
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName">"Taw
<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('myp
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
</table>
</body>
</html>
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-Langua
<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,winNam
window.open(theURL,winName
}
//-->
</script>
</head>
<body>
<h1 align="center">Moorcroft Enamels</h1>
<p> </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>De
<td class="Price"><h2>Price</h
<td class="Picture"><h2>Pictur
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName">"Taw
<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('myp
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
<tr>
<td class="ItemNo"> </td>
<td class="ItemName"> </t
<td class="Description">
<td class="Price"> </td>
<td class="Picture"> </td
</tr>
</table>
</body>
</html>
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.cl
</tr>
</table>
</body>
</html>
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.cl
</tr>
</table>
</body>
</html>
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.cl
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('...
Hope that helps.
Cheers
If you look at the Second Step the code to close your popup window is
<a href="javascript:window.cl
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('...
Hope that helps.
Cheers
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?
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.
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,winNam
window.open(theURL,winName
}
//-->
</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> </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')">
<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')">
<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> </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(Eve
}
document.onmousedown=click
// -->
</script>
<!-- End of NO RIGHT CLICK code -->
</body>
</html>
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,winNam
window.open(theURL,winName
}
//-->
</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> </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')">
<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')">
<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> </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(Eve
}
document.onmousedown=click
// -->
</script>
<!-- End of NO RIGHT CLICK code -->
</body>
</html>
JavaScript
JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.
127K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
ASKER