Step One: Popup Window

[current materials] Umm.. um.. well, a computer with Notepad, Dreamweaver, anything that lets you affect a website's raw code.

----------------------------

The code is taken from a college site project that can be seen @
http://w3.tvi.cc.nm.us/~amartinez25/popup/enter.htm

Feel free to open that up and explore the code.

0) Preparation

Be sure that you know how to use basic html, such as how to apply a simple link.

1) Know the Code

Open the source code from the web page using View>Source.

Under the <title>Access: Aelice - 5.0 </title> html, is

<script language="JavaScript">
<!--
function aelice() {
PageWin= open("aelice.htm", "Page",
"width=750,height=450,status=no,toolbar=no,menubar=no,scrollbars=no,resize=no");
}
//
-->
</script>

Basically, the function -aelice()- tells the site that whenever that text is applied, the function in the code will happen. In this case, when you apply 'javascript: aelice();' to a link, the pop-up will happen.

open("aelice.htm" explains that I want to open that particular page, but as a pop-up window.

width=760,height=450 explains how large I want the pop-up to be.

status=no,toolbar=no,menubar=no,scrollbars=no,resize=no explains that I want a plain pop-up window.

That's all you need!

2) Apply it to YOUR site

You can replace aelice with the name of your website. For example, lets say you have a Legolas website, your site file name is 'index.html', you want the function link to be called 'legolas' for the heck of it, and you want the site window to be 300x300. This is what the code would look like.

<script language="JavaScript">
<!--
function legolas() {
PageWin= open("index.html", "Page",
"width=300,height=300,status=no,toolbar=no,menubar=no,scrollbars=no,resize=no");
}
//
-->
</script>

The actual link to make the pop-up work could be applied to an image, or regular text link.

<a href="javascript: legolas();">ENTER MY LEGOLAS SITE</a>

See? That's not too bad. ^__^ Try it out on your own site now!

----------------------------

Back to Tutorials