8. Special Effects

What We Will Cover

Elucidations

Questions from last class?

Homework Questions?

Homework Discussion Questions

  1. Did anyone search for free DHTML APIs and find one that seemed good? If so, what did you like about it?
  2. Besides animation, what else can you use DHTML to accomplish?
  3. Has anyone created animation effects before? If so, what tools or programming languages did you use? What are the advantages and disadvantages of the tool or programming language that you used?

^ top

8.1: Working with Image Objects

Learner Outcomes

At the end of the lesson the student will be able to:

  • Work with the JavaScript document.images collection
  • Create image objects and image object arrays
  • Set the properties of image objects

^ top

8.1.1: Introduction to Special Effects

  • In this lesson we learn how to create rollovers, menus, filters and transitions
  • We will look at how to create and use different types of effects in Web pages
  • In addition, we will learn how to use these effects as Web page navigation aids

Case Study: The World of Shakespeare

  • To help us learn, the textbook presents a case study on page JVS 215
  • You can see the design of the web site here: The World of Shakespeare
  • Our job is to create a rollover effect as shown in following diagram
  • This will give the page visual interest while providing a tangible clue that the pointer is over a link
  • To create this rollover effect, we first need to study how JavaScript can load and manage images

Rollover Effect

Rollovers

^ top

8.1.2: Referencing an Inline Image

  • JavaScript has supported images since the first DOM in Netscape Navigator 2.0
  • Each inline image is part of an array of images in the document called the image collection
  • To reference a specific object in the collection, you can use either of the following: 
    document.images["idref"]
document.images.idref
  • Where idref is either an index number of the value of the id or name attribute of an element
  • Other ways to get an image reference include: 
    document.getElementBy("id")
document.name
  • As an example, let us look at the The World of Shakespeare home page
  • By viewing the source, we see six inline images
  • Note that none of the images have a name or id attribute
  • We could add a name or id, but more browsers support the document.images object collection
  • We can access each of these images as shown in the diagram below
  • The images objects are numbered zero through five in the order they are listed in the HTML code

Accessing Image Objects

Image objects numbered 0 to 5

^ top

8.1.3: Creating and Modifying Image objects

  • You can create an image object that is not defined in the HTML
  • To create a new image object: 
    image = new Image(width, height);
  • For example: 
    var myImage = new Image(100, 200);
  • If you leave out width and height the image automatically sizes itself to match the dimensions of the graphic file

Properties of Image Objects

  • Like all objects, image objects have properties that determine how they appear and are used by browsers
  • You can see a list of these properties on page JVS 220 of the textbook
  • Also, you can view a list at the W3 Schools site: HTML DOM Image Object
  • Most of the properties will seem familiar since they are derived from the image attributes of HTML
  • As an example of creating a new image object and assigning it a source file: 
    var myImage = new Image();
myImage.src = "ed.jpg";
  • Then if I wanted to put a border around the image: 
    myImage.style.borderWidth = "5px";

Detecting Image Objects

  • It is possible that your users will be running a very early browser version
  • You can use object detection to determine each user's level of browser support 
    if (document.images) {
    // Code to create and modify images
}
  • You should write your code so users with such browsers can still navigate through the web site without problems

^ top

8.1.4: Summary

  • In this section we introduced special effects using DHTML
  • To support this discussion, we looked at how to create and modify image objects
  • To create a new image object: 
    image = new Image(width, height);
  • In addition, we discussed how to modify an image object by assigning values to its properties

Check Yourself

  1. Refer to page JVS 227 of the textbook and review the Session 5.1 Quick Check questions #1-2.

^ top

Activity 8.1

Take one minute to read over the following Quick Quiz questions. We will discuss the questions in one minute.

Quick Quiz

  1. Each inline image is part of an array of images in the document called the image .
  2. 1.JavaScript treats all inline images as objects known as ____________ objects.
    1. inline
    2. collection
    3. image
    4. id

  3. It is generally better to reference an image as document.name, instead of using other alternatives such as document.getElementById("id") or document.images.

    True
    False

Discussion Questions

^ top

8.2: Creating Rollovers

Learner Outcomes

At the end of the lesson the student will be able to:

  • Create image rollovers with image objects and the document.images collection
  • Create text rollovers

^ top

8.2.1: Creating an Image Rollover

  • An image rollover is created when you change the source of an inline image from one graphic file to another
  • You can see the images we will use in the case study below
Image Rollover Image
Image plays_out.jpg Image plays_over.jpg
Image son_out.jpg Image son_over.jpg
Image bio_out.jpg Image bio_over.jpg
Image globe_out.jpg Image globe_over.jpg
Image strat_out.jpg Image strat_over.jpg
  • When the user hovers a mouse pointer over the image on the left, we will replace it with the image on the right
  • When the mouse pointer moves off the image, we will redisplay the image on the left

^ top

8.2.2: Preloading the Images

  • Speed is an important consideration when creating a rollover effect
  • You do not want users to wait for a rollover while their browsers download a new image
  • Instead, you should preload all of the image objects a user may need, storing the images in the browser's memory
  • If many images are used, they can be stored in an array
  • For example: 
    if (document.images) {
    var imgOver = new Array();
    imgOver[0] = new Image();
    imgOver[1] = new Image();
    imgOver[2] = new Image();
    imgOver[3] = new Image();
    imgOver[4] = new Image();

    imgOver[0].src = "plays_over.jpg";
    imgOver[1].src = "son_over.jpg";
    imgOver[2].src = "bio_over.jpg";
    imgOver[3].src = "globe_over.jpg";
    imgOver[4].src = "strat_over.jpg";
// more code here

^ top

8.2.3: Swapping Image Objects

  • Once the images are preloaded, you can use JavaScript to swap the source for one image with the source for another
  • For example: 
    document.images[0].src = imgOver[0].src;
  • We can create a more general function to handle this
  • For instance: 
    function rollOver(i) {
    if (document.images) {
        document.images[i].src = imgOver[i].src;
    }
}

function rollOut(i) {
    if (document.images) {
        document.images[i].src = imgOut[i].src;
    }
}
  • The parameter i is used to specify the index of the object in the arrays

^ top

8.2.4: Running the Image Rollover

  • To run the rollover functions, we use event handlers
  • Recall that event handlers run in response to an event that occurs within an element
  • We will need two event handlers:
  • We can add these event handlers to the img elements like this:

    <img src="plays_out.jpg" alt="The Plays" onmouseover="rollOver(0)" onmouseout="rollOut(0)" />

^ top

8.2.5: Creating a Text Rollover

  • In addition to graphical images, you can apply rollovers to text
  • This is usually done with CSS using the hover pseudo-class
  • Syntax: 
    a:hover {styles}
  • For example: 
    a:hover { color: white; background-color: gray; }
  • Another way is to create a text rollover using JavaScript
  • You do this by modifying the style properties of an element in response to the rollover event
  • For an example, see the textbook on page JVS 227
  • Also, you can look at the example: Text Rollovers (view the source)

^ top

8.2.6: Summary

  • In this section we discussed how to do rollover effects
  • First we looked at image rollovers, which are create by changing the source of an inline image from one graphic file to another
  • Since you do not want users to wait while their browsers download a new image, you preload the rollover images
  • If you have several images, then you should store them in an array
  • To swap the image objects in the page, you write functions to handle the rollover and rollout events
  • For instance: 
    function rollOver(i) {
    if (document.images) {
        document.images[i].src = imgOver[i].src;
    }
}

function rollOut(i) {
    if (document.images) {
        document.images[i].src = imgOut[i].src;
    }
}
  • Then you use event handlers to call the functions like this:

    <img src="plays_out.jpg" alt="The Plays" onmouseover="rollOver(0)" onmouseout="rollOut(0)" />

Check Yourself

  1. Refer to page JVS 227-228 of the textbook and review the Session 5.1 Quick Check questions #3-6.

^ top

Activity 8.2

  • Turn your computer on and complete the exercises on these pages of the textbook:
    • JVS 216
    • JVS 222-226
  • You can download the tutorial 5 files here
    • You should save them to your Desktop
    • If you downloaded all the files previously, then you can use them instead
  • Your completed exercises should run without error and look like this
    • However, none of the links will work
    • We will address the links in the next section
  • If you have difficulty, ask a classmate or the instructor for help
  • When you are finished, let the instructor know

^ top

8.3: Working with Menus

Learner Outcomes

At the end of the lesson the student will be able to:

  • Work with pop-up and pull-down menus
  • Hide and unhide objects in a Web page

^ top

8.3.1: Introduction to DHTML Menus

  • In this section we look at how to create menus using DHTML
  • Menus can save screen space on your web pages and thus are often used by web designers
  • There are several types of menus including pop-up and pull-down
  • One common way to make a menu is to place it inside a div element
  • Then you hide the div element by setting the visibility style attribute
  • Let us look at how to apply this concept to pop-up and pull-down menus

Pop-Up Menus

  • In a pop-up menu, a user clicks an object on the page and the menu appears
    • Sometimes the menu appears under the mouse pointer
    • Sometimes the menu appears elsewhere on the page
  • The menu appears when the user clicks (or onmouseover, depending on the design) on a menu title
  • The menu operation is shown in the following two diagrams

Popup menu hidden
Popup menu displayed

Pull-Down Menus

  • In a pull-down menu, part of the menu is visible
  • When a user clicks the visible part, the rest of the menu is revealed
  • This pull-down menu operation is shown in the following two diagrams

Pulldown menu hidden
Pulldown menu displayed

^ top

8.3.2: Creating a Pull-Down Menu

  • Let us walk through creating a pull-down menu using the case study
  • Our job is to add pull-down menus to the page: plays.htm
  • Shakespeare wrote almost 40 plays and the this page provides links to all of them
  • Our "client" thinks that displaying all the links is too busy
  • Instead, she wants us to provide a menu structure for the links as shown in the following diagram

Menu Plan (Partially Shown)

Menu plan

^ top

8.3.3: Hiding the Menus

  • We start with page playstxt.htm which we save as plays.htm
  • As you can see all the page links are shown under the menu headings
  • The first thing we want to do is hide the menus
  • We accomplish this by adding the following embedded style before the closing </head> tag: 
    <style type="text/css">
  .Menu { visibility: hidden }
</style>
  • Now our menus are hidden
  • We need to write some JavaScript to display them

^ top

8.3.4: Creating Pop-Up Menu Functions

  • Our client want menus with the following behaviors:
    • Only one pop-up menu should be visible at a time
    • If a user clicks a menu title, the menu should be displayed
    • If a user clicks the page content outside the menu, any active menu should be hidden
  • To perform these tasks we have functions provided in the scripts.js file
  • Each script has a parameter named object which is some object on the page to hide or show
  • We need to include this external script file in our page using a script tag before the closing </head> tag:

    <script src="scripts.js" type="text/javascript"></script>

Displaying Menu Contents

  • Next we create two functions:
    • One to hide any active menu
    • Another to display a particular menu
  • The functions depend on a variable to keep track of which menu is active
  • You can see this code below:

    Pop-up functions

^ top

8.3.5: Calling the Menu Functions

  • We want to run the popMenu() function when the user clicks one of the menu titles
  • Each of the links is enclosed in a div element like this: 
    <div id="Comedy" class="MenuTitle">
    <a href="#">The Comedies</a>
</div>
  • Recall from lesson 5.1.4 that you can run JavaScript from a link using: 
    <a href="javascript:script">content</a>
  • We use this technique to call the popMenu() function like this:

    <div id="Comedy" class="MenuTitle">
        <a href="JavaScript:popMenu('ComedyMenu')">The Comedies</a>
    </div>

  • One last step is to hide the active menu when the user clicks the page
  • We can do this by adding an onclick event handler to the main div element 
    <div id="main" onclick="hideActive()">
  • You can see the end result by clicking here

Variations on the Menu Operation

  • Some people prefer menus that work with onmouseover rather than onclick events
  • You can implement this technique with only a few code changes
  • First you change the links to use the onmouseover event handler like:

    <div id="Comedy" class="MenuTitle">
        <a href="#" onmouseover="popMenu('ComedyMenu')">The Comedies</a>
    </div>

  • Then in the main div element you change the event handler from onclick to onmouseover 
    <div id="main" onmouseover="hideActive()">
  • You can see this variation by clicking here

^ top

8.3.6: Summary

  • In this section we looked at techniques to create DHTML menus
  • We learned that we could change visibility styles to hide and show objects
  • We then applied these techniques to our case study

Check Yourself

  1. Refer to page JVS 238 of the textbook and review the Session 5.2 Quick Check questions.

^ top

Activity 8.3

Take one minute to read over the following Quick Quiz questions. We will discuss the questions in one minute.

Quick Quiz

  1. In a menu, a user clicks an object on the page and the menu appears, sometimes elsewhere on the page.
  2. To create a pop-up menu you use the clip style attribute to "cut off" part of the menu.

    True
    False

  3. In a menu, part of the menu -- usually a header for the title -- is visible.

^ top

8.4: Working with Internet Explorer Filters and Transitions

Learner Outcomes

At the end of the lesson the student will be able to:

  • Implement Internet Explorer's filter styles
  • Apply Internet Explorer's transition styles
  • Create an interpage transition using the meta element

^ top

8.4.1: About Internet Explorer Filters

  • Another special effect you can use is called a filter
  • A filter is an effect that is applied to an object or page to change its appearance
  • Uses for filters include:
    • Making text or images appear partially transparent
    • Adding a drop shadow
    • Making an object appear to glow
  • Only IE supports filters and so you should be careful when using them
  • However, since most people use IE, it may be worth the investment in time to use them

Applying Filters

  • A filter can be applied in two ways:
    • Adding a filter style to the Web page's style sheet
    • Running a JavaScript command that applies a filter to an object
  • We will take a look at both of these in the following sections

^ top

8.4.2: Applying Filters by Using Styles

  • Filter styles were first introduced in IE version 4.0
  • Syntax: 
    filter: filterName(params)
  • Where filterName is one of the many filters available in IE 4.0
  • Filter syntax changed starting with IE 5.5 to:

    filter: progid:DXImageTransform.Microsoft.filterName(params)

  • For example, to apply a red drop shadow 5 pixels right and 10 down:

    filter: progid:DXImageTransform.Microsoft.dropSahdow(color=#FF0000, offX=5, offY=10);

  • IE 5.5 and later supports a wider range of filter effects than IE 4.0
  • Page JVS 241 of the textbook show how some of the version 4.0 filters match their 5.5 forms
  • IE 5.5 supports the filters from version 4.0
  • Thus, for compatibility, you may wish to restrict yourself to IE 4.0 filters

Determining Which Filter to Use

Combining Filters

  • You can combine filters to create different effects
  • Effects are applied in the order in which they are entered into the style declaration
  • The following two images shows the results of applying two filters but in a different order

Shadow first, opacity second
Opacity first, shadow second

^ top

8.4.3: Running Filters with JavaScript

  • Like other style attributes, you can apply filter styles using JavaScript: 
    object.style.filter = "filter text";
  • Where object is an object in the web page
  • For example, to apply the alpha filter to the first image in a document:

    document.images[0].style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=0, opacity=30)";

  • Internet Explorer's version of JavaScript also recognizes the filter collection
  • The filter collection is all the filters associated with an object
  • You can use either of these forms: 
    object.filters[idref];
object.filters["name"];
  • In addition, you can reference specific parameters within each filter using: 
    filter.param

Adding a Filter Effect to the Plays Page

  • As an example, let us add a filter to the plays.htm page
  • Let us apply a drop shadow to the menu areas
  • We can add following filter in the style element in the head element:

    .Menu { filter:progid:DXImageTransform.Microsoft.DropShadow(Color=#999999, offX=3, offY=3) }

  • You can see this addition by clicking here

^ top

8.4.4: Using Transitions

  • Another special effect supported only by IE is the transition
  • A transition is a visual effect that is applied to an object over an interval of time

Applying Transition Styles

  • Just like filters, the transition effect you use depends on the version of IE
  • IE 4.0 supports two kinds of transitions: blend and reveal
  • A blend transition is a transition in which one object is blended into another 
    filter: blendTrans(duration = value)
  • A reveal transition is a more general transition in which a visual effect is applied as one object is changed into another

    filter: revealTrans(duration = value, transition = type)

  • In IE 5.5, blendTrans() and revealTrans() were replaced with a library of effects
  • Also, the syntax changes to:

    filter: progid:DXImageTransform.Microsoft.transitionName(params)

  • For a list of transitions, see pages JVS 248-249 of the textbook
  • Also, the textbook has supplied a page for viewing transitions: demo_transitions.htm
  • Microsoft provides a similar page that you can view: Filters and Transitions Master Sample

^ top

8.4.5: Scripting Transitions

  • Code for scripting a transition follows the same syntax used for filters
  • For example, to apply the RadialWipe transition with a WipeStyle of "clock" to an object:

    object.style.filter = "progid:DXImageTransform.Microsoft.RadialWipe(WipeStyle=clock)";

  • Running a transition involves four steps:
    1. Setting the initial state of the object
    2. Applying a transition to the object
    3. Specifying the final state of the object
    4. Playing the transition
  • As an example, let us add a transition to the plays.htm page
  • Let us apply a transition to the menu areas
  • We can add transition in the style element in the head element using:

    .Menu { filter:progid:DXImageTransform.Microsoft.DropShadow(Color=#999999, offX=3, offY=3)
        progid:DXImageTransform.Microsoft.Blinds(direction=down, bands=1) }

  • In addition, we need to update the popMenu() function to: 
    function popMenu(M) {
    hideActive();
    ActiveMenu = document.getElementById(M);
    if (ActiveMenu.filters) {
        ActiveMenu.filters[1].apply();
    }
    showIt(ActiveMenu);
    if (ActiveMenu.filters) {
        ActiveMenu.filters[1].play(0.75);
    }
}
  • This will cause the menus to drop down slowly
  • You can see this menu transition by clicking here

^ top

8.4.6: Using Interpage Transitions

  • Yet another IE transition effect is the interpage transition
  • Interpage transitions involve effects applied to a page when a browser either enters or exits the page
  • You create interpage transitions using the meta element
  • There are four different types of transitions: 
    <meta http-equiv = "Page-Enter" content = "type">
<meta http-equiv = "Page-Exit" content = "type">
<meta http-equiv = "Site-Enter" content = "type">
<meta http-equiv = "Site-Exit" content = "type">
  • Where type is one of the IE transitions
  • As an example, we can add a transition to the page: ws.htm
  • To see the meta tag, view the source
  • To see the effect in action, click the link, "The Plays"

^ top

8.4.7: Summary

  • In this section we focused on styles supported exclusively by Internet Explorer
  • We looked at using filters to modify images and text
  • Also, we looked at using transitions to add a visual effect over a period of time
  • In addition, we looked at using interpage transitions
  • For more information on filters and transitions, see: Introduction to Filters and Transitions

Tips for working with Special Effects

  • Preload all images used in image rollovers to speed up the rollover effect
  • Place rollover images in image arrays to make it easier to write programs that swap the images
  • Place long lists of links into pop-up or pull-down menus to save screen space
  • Place filter styles in separate style declarations to avoid problems with older browsers
  • If you use filter or transition styles, test your Web site on non-Internet Explorer browsers to ensure that their use does not cause problems for those browsers

Check Yourself

  1. Refer to page JVS 258 of the textbook and review the Session 5.3 Quick Check questions.

^ top

Activity 8.4

Take one minute to read over the following Quick Quiz questions. We will discuss the questions in one minute.

Quick Quiz

  1. Filters and transitions are supported in Netscape version 5.0 and above.

    True
    False

  2. Internet Explorer 5.5 supports more filters and transitions than version 4.0.

    True
    False

  3. Filters and transitions can only be applied using style sheets.

    True
    False

^ top

Wrap Up

Due Next:
A8: Special Effects (10/30/06)
Discussion 7 and Quiz 7 (10/30/06)

^ top

Home | WebCT | Announcements | Schedule | Room Policies | Course Info
Help | FAQ's | HowTo's | Links

Last Updated: November 18 2006 @17:39:50