JavaScript Week Four Lecture

Let's look at rollovers and windowing techniques in order to gain some insight into their evolution.

Introduction to Rollovers

The <SCRIPT LANGUAGE="JavaScript"></SCRIPT> tag set separate a rollover script from the rest of the document. It's typical to enclose the entire content of the script tagset in an HTML comment if you are worried about accidentally displaying script code as text on older browsers.

Remember that comments in JavaScript can consist of the /* */ sequence anywhere within a script or consist two forward slashes // to indicate that all text that follows on the same line is ignored in processing the script. Comments are a good place to put any notes you would want to have should you inherit code from someone else.

Declaring Images in the Script

The first step in creating a rollover is to declare to your JavaScript the images the rollover will use. Declaring the images causes the JavaScript interpreter to load the images into browser memory before they become visible. Once the images are cached, the image swaps can happen instantaneously.

It is possible to use a rollover technique without declaring and preloading the images, but before an image changes the browser must first open a new connection, download the image, and load for viewing. This connection-download-load process takes long enough, even on fast connections, to make the rollover less effective than when you preload every image.

To preload the images efficiently, you can declare each with two lines of code in conjunction with an array. Arrays are like mini files in computer memory, storing several pieces of information in one sequential place for efficient access via a common labeled name for the array's components. Our array, named Rollimage, will store each image name, location, and bounds (the x and y dimension of the raster image):

The first line above initializes the array, and following numbered sets of lines are the declaration of each additional image. The first line of each set declares the image's size and the second assigns its address. The numbers inside the parentheses refer to the width and height of the image, in that order. A non-local image would need to have its full path presented within a well-formed URL in the second line of the code. The src property of an HTML IMG element holds the source of an image to be presented in a Web browser.

Early versions of JavaScript were case sensitive. More recent version claim to be partly case sensitive but the boundaries of when case matters and when it doesn't are unclear. To be on the safe side, be sure to refer to your variables and arrays with consideration of case. Rollimage is different than rollimage.

Naming Image Objects

To replace an image upon rolling over it's visual bounds, you need to give your JavaScript a way to identify which image to replace in each instance. Do this by including a name attribute in the <IMG> tag or learning to refer to images by using JavaScript's Array syntax:

By default, a Web browser counts every image on a page and refers to them numerically starting from the first image encountered sequentially in the code. The above refers to the third image tag the browser encounters when loading the HTML document. Consider that the browser conventionally counts starting with zero as the first item in memory is offset by zero objects from the location of the Array's label address.

I've found named images easier to keep track of so that's what I use in this example. The following image is named "Rupert":

Rollovers are often used to provide visual feedback during link selection on a menu. As a result, the rollover images typically nest inside open and closing anchor (A) tags:

What's "onMouseOver"?

onMouseOver and onMouseOut are event handlers that tell JavaScript what to do when an event occurs. The mouse cursor passing over the linked image's bounds is defined as an event because of these bits of code. onMouseOver="blorg()" would tell JavaScript to execute the function blorg().

Functions

That function's name is SwapOut(). The parentheses can be used in more complex scripts to send data that the function will work with. The guts of the function are written between the {} brackets.

SwapOut() tells the Rupert image's src attribute to equal Rollimage[1].src, which is the second image from the array created earlier. In English, it changes the source of the Rupert image. The other function in this document, SwapBack(), is almost the same as SwapOut() except that it switches back to the first image in the array:

Putting It All Together

That's basically it. Following is the complete code for a simple document with one rollover image. Try it out:

Notes on JavaScript rollovers:

Compare the JavaScript technique of creating a rollover with the CSS technique whereby we change the style of a Web page component via cascading style sheet features than via swapping images:

Here is the HTML used to create this rollover. You may notice that it is much shorter, and easier to remember than a JavaScript rollover. Essentially, you just need to define a class and everything else is handled with CSS

The key to making this work in all modern browsers is to define your links as block elements in your style sheet ( display: block ), and making the width the same as your image’s ( eg. width: 32px ). Choose a background colour for your link that matches your page background and a second colour that you want for the rollover effect ( defined in a:hover ). For example:

This will create one rollover image per line. You can then use nested <div> tags, tables, and/or CSS positioning to better control the placement of these rollovers on your page. For a working example, take a look at the left-hand navigation on this site.

Try an on-line rollover automation tool output example

There are many JavaScript automation tools available on-line. Once you've learned JavaScript, you'll be able to look behind the scenes to see how the JavaScript works and reverse engineer how each tool works (should you be interested). Here's the result of my use of a simple tool that created a simple, two item menu (the tool no longer exists online):

JQuery Rollovers

There are many rollover techniques to try with JQuery. We'll take a look at the code behind just one of seventeen time-tested examples you can admire.

JavaScript Window Popups with the window.open Function

The window.open() function creates a new browser window, customized to your specifications, without the use of an HTML anchor tag. In this example, we will be making a function that utilizes the window.open() function.

Display:

This works with pretty much any tag that can be clicked on, so please go ahead and experiment with this fun little tool. Afterwards, read on to learn more about the different ways you can customize the JavaScript window that pops up.

JavaScript Window.Open Arguments

Naming a window is very useful if you want to manipulate it later with JavaScript. However, this is beyond the scope of this lesson, and we will instead be focusing on the different properties you can set with your brand spanking new JavaScript window. Below are some of the more important properties:

Dependent, fullscreen, resizable, and status are all examples of ON/OFF properties. You can either set them equal to zero to turn them off, or set them to one to turn them ON. There is no inbetween setting for these types of properties.

Upgraded JavaScript Popup Window!

Now that we have the tools, let's make a sophisticated JavaScript popup window that we can be proud of!

Display:

Now, that is a prime example of a worthless popup! When you make your own, try to have them relate to your content, like a small popup with no navigation that just gives the definition or explanation of a word, sentence, or picture!

Expanded Tooltips

If you want to show additional information in a new layer but not have to generate a new window, you can expand on the tooltip concept like this framework here.

Basically, you can add new content to a page through an event handler. Let's look at a function that adds content via the document.getElementById() function and the innerHTML property available in JavaScript.

Take a look at the code:

<script>
function showme() {
   var txt=document.getElementById("popup");
   txt.innerHTML="<img src=yinyang.png>";
}

function removeme() {
   var txt=document.getElementById("popup");
   txt.innerHTML="";
}
</script>

which works with an existing DIV element:

<div id="popup" style="position:relative;top:0px;left:700px;height:182px;width:169px;z-index:5"></div>

JQuery windowing

Let's try an example of internal page popups with JQuery. The code is here:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Draggable - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <style type="text/css">
  body
  {
  	font-family:Verdana, Arial, Helvetica, sans-serif;
  	font-size:11px
  }
  #layer1
  {
  	position: absolute;
  	left:200px;
  	top:100px;
  	width:250px;
  	background-color:#f0f5FF;
  	border: 1px solid #000;
  	z-index: 50;
  	visibility: hidden;
  	cursor: pointer;
  }
  #layer1_handle
  {
  	background-color:#5588bb;
  	padding:2px;
  	text-align:center;
  	font-weight:bold;
  	color: #FFFFFF;
  	vertical-align:middle;
  }
  #layer1_content
  {
  	padding:5px;
  }
  #close
  {
  	float:right;
  	text-decoration:none;
  	color:#FFFFFF;
  }
  h1, h2
  {
  	font-size:20px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $("#layer1").draggable();
    $("#preferences").click(function() {
    	$("#layer1").css("visibility", "visible");
	});
	$("#close").click(function() {
    	$("#layer1").css("visibility", "hidden");
    });
  } );
  </script>
</head>
<body>
<h2>JQuery Tutorial Demo: Floating Dialog Windows</h2>
<p>Here is the demo on using floating dialog windows by using the form and interface plug-in of jQuery</p>

<div id="content"><input type="button" id="preferences" value="Edit Preferences" /></div>
<div id="layer1">
    <div id="layer1_handle">
    <a href="#" id="close">[ x ]</a>
    Preferences
    </div>
    <div id="layer1_content">
        <form id="layer1_form" method="post" action="save_settings.php">
        Display Settings<br />
        <input type="radio" name="display" checked="checked" value="Default" />Default<br />
        <input type="radio" name="display" value="Option A" />Option A<br />
        <input type="radio" name="display" value="Option B" />Option B<br /><br />
        Autosave settings<br />
        <input type="radio" name="autosave" checked="checked" value="Enabled" />Enabled<br />
        <input type="radio" name="autosave" value="Disabled" />Disabled<br /><br />
        <input type="submit" name="submit" value="Save" />
        </form>
    </div>
</div>
</body>
</html>

Workbook Available for Skills Practice

The relevant workbook is here for you to practice skills with the ideas presented in this document.

Week Four JavaScripting Notes

Example of a dropdown menu

Rollovers

Introduction to Rollovers

Declaring Images in the Script

Naming Image Objects

What's "onMouseOver"?

Functions

Putting It All Together

Notes on JavaScript rollovers:

CSS based rollovers

Try an on-line rollover automation tool output example

JQuery Rollovers

JavaScript Window Popups with the window.open Function

HTML & JavaScript Code:

Display:

JavaScript Window.Open Arguments

Upgraded JavaScript Popup Window!

HTML & JavaScript Code:

Display:

Expanded Tooltips

JQuery windowing

Workbook Available for Skills Practice