This page requires Javascript support!

Javascript (browser windows)



Another thing you can do with the status bar is use it to annotate a link. You can add JavaScript commands into the HTML anchor tags. Here is an example:


<BODY>
<H1>Irasshaimasse!(Welcome!)</H1>
<H2>Use the links to find out more about <A HREF="chris.html" onMouseover="window.status= 'The author of this page!';return true"onMouseout="window.status=' ';return true">Chris</A> or his son <A HREF="miyuki.html" onMouseover="window.status='A excellent little boy!';return true" onMouseout="window.status=' ';return true">Liam</A>.</H2>
</BODY>

The onMouseover command is used to tell the computer to do this action when the mouse goes over a specified area, which in this case is to put a line of text in the status bar(window.status). The ;return true is just necessary to display the message. Try this example:


Irasshaimasse!(Welcome!)


Use the links to find out more about Chris or his son Liam.


(These links don't actually work)


Good job, so far you've learned how to use simple JavaScript code to make your pages more interactive. Next we're going to cover how to work with browser windows. Exciting! The next script is going to teach you how to open a new window. Here is an example:

<SCRIPT LANGUAGE=JAVASCRIPT
TYPE="TEXT/JAVASCRIPT">
<!-- Hide script from old browsers

function newWindow() {
polyWindow = window.open('P.GIF','polyWin','width = 220, height=200')
}
// End hiding script from old browsers --> </SCRIPT>
</HEAD>
<BODY BGCOLOR=WHITE>
<P>Click<A HREF="javascript:newWindow()"> Polygon</A>
</BODY>

This function will open a window with the height and width attributes(Netscape uses the whole page) and place a specified picture within it. Here is a working example:

Click Polygon


This next script will enable you to open windows with different contents using multiple links. Here is an example:

<SCRIPT LANGUAGE=JAVASCRIPT
TYPE="TEXT/JAVASCRIPT">

<!-- Hide script from older browsers

function newWindowA(polygifA) {
polyWindowA = window.open(polygifA, 'polyWin', 'width=220, height=200')
polyWindowA.focus()
}

// End hiding script from older browsers -->
</SCRIPT>
<BODY BGCOLOR=WHITE>
<H2>Click on the link to see different color polygons:
<P><A HREF="javascript newWindowA('BP.gif')">A black polygon</A>
<P><A HREF="javascript newWindowA('P.gif')">A red polygon</A>
</BODY>

Here is a working example:

Click on the links to see different color polygons(make sure you close the first window before opening another):

A black polygon

A red polygon


First you declare a function called newWindowA. Next in the variable polyWindow, your opening the window object. The content is held in polygif and the name of the window, as well as the paremeters, have been defined. The focus() command brings the window to the front. Lastly, the link fills the window with the image BP.GIF or P.GIF.


The next thing that I'm going to show you is how to open a new window using an image link. Here is an example:

<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE=JAVASCRIPT
TYPE="TEXT/JAVASCRIPT">

<!-- Hide script from older browsers

function newWindowB(polygifB){
polyWindowB = window.open(polygifB,'polywin') //I set no height or width attributes in this example
polyWindowB.focus()
}

// End hiding script from older browsers -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=WHITE>
<P>Click on the polygon to see a bigger version</P>
<A HREF="javascript: newWindowB('POLYBIG.GIF')"><IMG SRC="P.GIF" width=100 height=87></A>

Here is a working example:

Click on the polygon to see a bigger version(maximize the resulting window):





MORE