Frames and JavaScript Basics

 

Introduction.  While it is certainly possible to make use of frames and enhance their functionality purely within HTML, it is possible to do much more in JavaScript.  Now we are going to change the basic functionality of our previous page so that the links will activate when the user uses a MouseOver the links.

This slightly different first page should be called OrganizingPageJ.html.

 

<html>
<head>
<title>Frame Organizing Page Using JavaScript</title>
</head>
<frameset cols="30%, *">
<frame src = "NavigationJ.html" name = "nav">
<frame src = "Contents.html" name = "contents">
</frameset>
</html>

 

This is essentially the same as the previous organizing page except we invoke a different page for navigation.

Now you need to develop the NavigationJ.html which will appear on the left.

 

<html>
<head>
<title>Navigation Page Using JavaScript</title>

<script language="JavaScript">

function changeContents(the_url)
{
// script to change the contents of the fram to the URL
var content_frame = parent.contents;
content_frame.location = the_url;
}

</script>

</head>

<body bgColor="000045" text="cccccc" link="aa00aa" vlink="880088">

<h2>Humor Navigation</h2>
<a href = "http://www.collegehumor.com/" onMouseOver="changeContents('http://www.collegehumor.com/');">
<font size=4><b>College Humor</b></font></a><br>
<a href = "http://www.comedycentral.com/" onMouseOver="changeContents('http://www.comedycentral.com/');">
<font size=4><b>ComedyCentral</b></font></a><br>
<a href = "http://www.montypython.net/" onMouseOver="changeContents('http://www.montypython.net/');">
<font size=4><b>Monty Python</b></font></a>

</body>
</html>

 

This page is significantly different from the Navigation.html.  Now we have developed a JavaScript function, changeContents(the_url) to open the new page in the contents frame of the page.  Notice we invoke parent.contents and then use this in the location to identify the target.

Now the links all have JavaScript code for onMouseOver that call the changeContents function and pass an appropriate URL.

Ultimately, what the user sees on the screen will not be any different, but how the page reacts to the user's inputs will be entirely different.