|
Ever wondered how those
pop windows were created ? Well here I will explain how.
The way I have implemented
is by using Javascript to open a new window and write the relevant
HTML code to it. I have an "include type state in the start
of the page that inserts the common Javascript code into the page
and then the actual code that calls the Javascript function.
<Script language = "JavaScript"> <!--
document.write("<SCRIPT SRC=\"/windows.js\"><\/SCRIPT>");}
//-->
</script>
The file windows.js
contains the code needed to open the new window and give it it's
HTML format. Below I have included an extract. What I did was
create the page in a HTML editor and then added the Javascript
function to write it out to the new window.
The actual file has
two functions. One for displaying an image in portrait mode and
the other in landscape mode.
// Two functions, one to show the picture in Portrait (v) and the
// other in Landscape (h)
//
function Showpich(Whatpic) {
myWin= open("", "displayWindow","toolbar=0,menubar=0,location=0,directories=0,status=0,
scrollbars=0,resizable=0,copyhistory=0,width=640,height=450"); // open document for further output
myWin.document.open();
// create document
myWin.document.write("<html><head><title>www.ManuelNegri.com</title>");
myWin.document.write('</head><body bgcolor="#000000" text="#FFFFFF" >');
myWin.document.write('<p align="center">');
myWin.document.write('</p><div align="center"><table border="0" width="100%"><tr>');
myWin.document.write('<td width="100%" valign="middle" align="center"><img border="0" src=');
myWin.document.write(Whatpic +' ></td></tr></table></center></div>');
myWin.document.write('<p align="center"><font face="verdana" size="1">© 2000 ');
myWin.document.write('<a href="http://www.manuelnegri.com">Manuel Negri</a> All Rights Reserved.</font>');
myWin.document.write('</body></html>');
// close the document - (not the window!)
myWin.document.close();
}
The variable Whatpic
is what is passed from the calling Javascript code. It contains
the reference to the HTML image that we want to display. I have
displayed what the variable is below. To call the function insert
the Javascript function call as demonstrated. And that is it.
<a href="javascript:Showpicv( '../images/sila_cD01.jpg');"><img border="0" src="../thumb/sila_cD01.jpg" width="53" height="80" alt="Click to enlarge"></a>
|
