Exhibit: JavaScript

There are several JavaScript tutorials available on the Internet. For example, for non-programmers there is http://www.webteacher.com/javascript/. For experienced programmers there is http://www.wdvl.com/Authoring/JavaScript/Tutorial/.

One of the most useful sites for functional scripts is The JavaScript Source at http://javascript.internet.com/. Many of the scripts described below were either obtained directly from the site or slightly modified.

Pop-Up Window

An example script for pop-up windows follows:

In the "head" section of your page, include the following

<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function win ( pwidth, pheight, pleft, ptop, filename) 
{
      var windowprops = "scrollbars=yes, resizable=yes" + 
                                        ",left=" + pleft + ",top=" + ptop + 
                                        ",width=" + pwidth + ",height=" + pheight;
     window.open(filename,"",windowprops);
}

// End -->
</script>
</head>

And the links should be written  as

<a href="javascript:win(350, 150, 80, 80,'bytecodes.htm')"><b>bytecodes</b></a>

 

To see a demo of a pop-up window, click here.

For an actual example of a pop-up window, click here.

Back to Top

Mouseover

The following script can be used to reveal an image when the mouse is over it.

The following code should be placed between <head> and </head>.

<script LANGUAGE="javascript">
<!--
function SwapImg(idx, img)
{
     document.images[idx].src = img;
}
//-->
</script>

Each hidden image is placed between the <body> and </body> tags in the html page using code like:

<a href="#" onMouseOver="SwapImg(0, 'image1_visible.gif')" 
                     onMouseOut="SwapImg(0, 'image1_hidden.gif')">
<img border="0" src="image1_hidden.gif">
</a>

 

Notes:

To see a demo of image swapping using a mouseover, click here.

For an actual example of image swapping using a mouseover, click here.

A mouseover can be used to simulate image overlays, by replacing a simple image with an augmented image, as in this example.

Back to Top

Mouse Click

The following script presents one technique that can be used to make an image appear (and remain visible) when it is clicked.  

The following code should be placed between <head> and </head>.

<script LANGUAGE="javascript">
var click = false;
<!--
function ExchangeImg(idx, img1, img2)
{
     if (click) document.images[idx].src = img1;
     else document.images[idx].src = img2;
     click = !click
}
//-->
</script>

Each hidden image is placed between the <body> and </body> tags in the html page using code like:

<a href="#" onMouseUp="ExchangeImg(0, 'image1_hidden.gif', 'image1_visible.gif')" > 
<img border="0" src="image1_hidden.gif" >
</a>

Note that the first argument to ExchangeImg is 0 for the first image, 1 for the second, etc.

 

 

To see a demo of image swapping using a mouse click, click here.

For an actual example of image swapping using a mouse click, click here.

Back to Top

Remote Control (Table 0f Contents)

The script for constricting an index can be found at http://javascript.internet.com/navigation/remote-control.html, and is replicated below.

<!-- FIVE STEPS TO INSTALL REMOTE CONTROL:

1. Copy the first section into the HEAD of your main HTML document
2. Add the next code into the BODY of your HTML document
3. Open a new HTML file and save it as: remote-control.html
4. Paste the remote control HTML code into remote-control.html
5. Modify the links to point to the sections of your web site -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Ronnie T. Moore, Editor -->
<!-- Web Site: The JavaScript Source -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function showRemote() 
{
     self.name = "main"; // names current window as "main"
     var windowprops = "toolbar=0,location=0,directories=0,status=0, " +
                   "menubar=0,scrollbars=0,resizable=0,width=150,height=200";
     OpenWindow = window.open("remote-control.html", "remote", windowprops); // opens index
}
// End -->
</script>
</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document -->

<BODY>

<center>
<form>
<input type=button value="Open Index" onClick="showRemote();">
</form>
</center>

<!-- STEP THREE: Create a new HTML file and save it as: remote-control.html -->

<!-- STEP FOUR: Paste the following HTML code into your remote-control.html page -->

<!-- Put this in the remote-control.html file -->

<html>
<head>
<script language="JavaScript">
<!-- Begin
function closeRemote() 
{
     timer = setTimeout('window.close();', 10);
}
// End -->
</script>
</head>

<body bgcolor="#FFFFFF">

Index   
<p><a href="../../notes1.htm#index1" target="main" onClick="closeRemote()">Index 1</a>
<p><a href="../../notes1.htm#index2" target="main" onClick="closeRemote()">Index 2</a>
<p><a href="../../notes1.htm#index3" target="main" onClick="closeRemote()">Index 3</a>
<p><a href="../../notes1.htm#index4" target="main" onClick="closeRemote()">Index 4</a>

</body>
</html>

<!-- STEP FIVE: Change links above, but don't change the -->
<!-- target="main" or onClick="closeRemote" sections !! -->
<!-- Look for a demonstration of these changes in the linked example. -->

 

To see a version of this page that includes a Table of Contents, click here.

For an example of some web notes that include a remote control, click here.

Back to Top