1. Working with Special Effects
DHTML Tutorial 3 Creating Rollovers, Menus, Filters, and Transitions
New Perspectives on DHTML, 2e
Tutorial 3

2. New Perspectives on DHTML, 2e
Objectives
Create and work with image objects
Create image rollovers
Learn about text rollovers
Learn about and create pop-up and pull-down menus
New Perspectives on DHTML, 2e
Tutorial 3

3. New Perspectives on DHTML, 2e
Objectives
Work with Internet Explorer’s filters and transitions
Create interpage transitions
New Perspectives on DHTML, 2e
Tutorial 3

4. Working with Image Objects
A rollover effect is achieved by changing a graphical image when a mouse pointer moves over an object on the page
Knowledge of how DHTML creates and manages image objects is necessary to create a rollover
New Perspectives on DHTML, 2e
Tutorial 3

5. Referencing an Image Object
To reference an image: document.ImageName
Where ImageName is name of the image
This approach works for all DOMs with the exception of nested objects in the NS4 DOM
New Perspectives on DHTML, 2e
Tutorial 3

6. Referencing an Image Object
You may also use: document.images[i]
Where i is the index number of the image
Use the images collection to create reusable code: function ChangeImage(i) {
JavaScript commands to modify document.images(i) }
New Perspectives on DHTML, 2e
Tutorial 3

7. New Perspectives on DHTML, 2e
Image Properties
alt
Text displayed by nongraphical browsers in place of the inline image
border
The size of the border around the image, in pixels
complete
A Boolean variable indicating whether the browser has finished loading the image
height
The height of the image, in pixels
hspace
The horizontal space around the image, in pixels id
The id of the inline image
New Perspectives on DHTML, 2e
Tutorial 3

8. New Perspectives on DHTML, 2e
Image Properties
lowsrc
The URL of a low-resolution version of the image displayed as the high-resolution version downloads
name
The name of the inline image
src
The URL of the inline image
vspace
The vertical space around the image, in pixels
width
The width of the image, in pixels
New Perspectives on DHTML, 2e
Tutorial 3

9. New Perspectives on DHTML, 2e
Image Properties
NS 4 DOM: you cannot change the appearance of an image once it is loaded
IE and W3C DOMs: you can dynamically change the attributes of inline images
New Perspectives on DHTML, 2e
Tutorial 3

10. New Perspectives on DHTML, 2e
Image Event Handlers
A rollover occurs when the mouse moves over an image
The onMouseOver and onMouseOut events are commonly used: <img name=“Swap” src=“out.jpg” onMouseOver=“this.src=‘over.jpg’ ” onMouseOut=“this.src=‘out.jpg’ ” />
The keyword “this” refers to the current object
New Perspectives on DHTML, 2e
Tutorial 3

11. New Perspectives on DHTML, 2e
Image Event Handlers
NS 4 does not support onMouseOver and onMouseOut for the <img> tag
Use the <a> tag with the href property: <a href=“#swap” id=“swap” onMouseOver=“document.Swap.src=‘over.jpg’ ” onMouseOut=“document.Swap.src=‘out.jpg’ ”>
<img name=“Swap” src=“out.jpg” border=“0” />
</a>
New Perspectives on DHTML, 2e
Tutorial 3

12. New Perspectives on DHTML, 2e
Preloading Images
Preloading images increases performance
To store the image in the browser’s cache:
Create an image object in the head section of the HTML page
Specify the source of the image object
New Perspectives on DHTML, 2e
Tutorial 3

13. New Perspectives on DHTML, 2e
Preloading Images
To create an image object: ImageVariable = new Image(width, height);
Where ImageVariable is the name of the image object
Where height and width are measurements in pixels and are optional
To specify the source of an image object: ImageVariable.src = “ImageFile”;
Where ImageFile is the URL of the image object
New Perspectives on DHTML, 2e
Tutorial 3

14. New Perspectives on DHTML, 2e
Preloading Images
Arrays are more efficient
Write functions to access images by the index number
var ImgOver = new Array(); ImgOver[0] = new Image(); ImgOver[1] = new Image(); ImgOver[2] = new Image(); ImgOver[0].src = “over1.jpg”; ImgOver[1].src = “over2.jpg”; ImgOver[2].src = “over3.jpg”;
New Perspectives on DHTML, 2e
Tutorial 3

15. New Perspectives on DHTML, 2e
Object Detection
Use object detection to hide code from older browsers that lack support for image objects:
function RollOver(i) {
if (document.images) {
document.images[i].src = ImgOver[i].src; }
Where i is the index number of the inline image
New Perspectives on DHTML, 2e
Tutorial 3

16. Creating an Image Rollover
New Perspectives on DHTML, 2e
Tutorial 3

17. New Perspectives on DHTML, 2e
Text Rollovers
Use the hover pseudo-class: a:hover {style when the mouse is hovering}
Example:
a:hover {color:red; font-weight:bold}
This does not work with IE browsers prior to IE 5 or with NS browsers prior to NS 6
New Perspectives on DHTML, 2e
Tutorial 3

18. Text Rollovers with the Internet Explorer and W3C DOMs
For IE 4 and above, modify the style properties in response to a rollover:
<style>
.Rollover {color: red; font-weight: bold}
</style>
<p onMouseOver=“this.className=‘RollOver’ ”;
onMouseOut=“this.className= ‘’ ”> The Globe</p>
Using empty ‘’ will set the object to its default appearance
New Perspectives on DHTML, 2e
Tutorial 3

19. Text Rollovers with Netscape 4
For NS 4, first enclose text between <layer> tags:
<layer name=“Globe” onMouseOver = “Over()” onMouseOut = “Out()”> The Globe</layer>
New Perspectives on DHTML, 2e
Tutorial 3

20. Text Rollovers with Netscape 4
Then, use document.write() and document.close() methods:
function Over() { document.Globe.document.write(“font color=‘red’> <b>The Globe</b></font>”); document.Globe.document.close(); }
function Out() { document.Globe.document.write(“The Glove”); document.Globe.document.close(); }
New Perspectives on DHTML, 2e
Tutorial 3

21. New Perspectives on DHTML, 2e
Working with Menus
New Perspectives on DHTML, 2e
Tutorial 3

22. New Perspectives on DHTML, 2e
Creating a Pop-Up Menu
User clicks on an object and the menu appears
Place menu contents within a set of <div> tags
Use JavaScript to change the visibility attribute
New Perspectives on DHTML, 2e
Tutorial 3

23. New Perspectives on DHTML, 2e
Pull-Down Menus
User clicks on part of the menu and the rest appears
Place the contents within a set of <div> tags
Use JavaScript to change the clip attribute
New Perspectives on DHTML, 2e
Tutorial 3

24. Creating Functions for the Pop-Up Menu
To display and hide <div> elements in NS 4 DOM: document.id.visibility = “hide” document.id.visibility = “show”
In the IE DOM: id.style.visibility = “hidden” id.style.visibility = “visible”
In the W3C DOM: document.getElementById(“id”).style.visibility=“hidden” document.getElementById(“id”).style.visibility=“visible”
New Perspectives on DHTML, 2e
Tutorial 3

25. Displaying Menu Contents
To display a menu, create a function that will
Hide the active menu
Display the menu indicated by the user’s actions
Make this menu the active menu
Call this function using the onMouseOver event handler
New Perspectives on DHTML, 2e
Tutorial 3

26. Displaying Menu Contents
New Perspectives on DHTML, 2e
Tutorial 3

27. Displaying Menu Contents
New Perspectives on DHTML, 2e
Tutorial 3

28. Working with Filters in Internet Explorer
A filter is an effect that is applied to an object or page to change its appearance:
Transparency
Drop shadows
Masking effects
New Perspectives on DHTML, 2e
Tutorial 3

29. Working with Filters in Internet Explorer
In IE 4.0, filters may be applied only to the following elements:
<div> and <span> (with a defined height, width or absolute position)
<img> and <marquee>
<button>, <input>, and <textarea>
<table>, <tr>, <th> <td>, <thead>, <tfoot>
New Perspectives on DHTML, 2e
Tutorial 3

30. Applying Filters by Using Styles
To apply a filter in IE 4.0: filter: filter_name(params)
Where filter_name is the name for the IE 4.0 filter
Where params are required values (if any) that apply to the filter
To apply a filter in IE 5.5 and up: filter: progid:DXImageTransform.Microsoft.filter_name(params)
New Perspectives on DHTML, 2e
Tutorial 3

31. Applying Filters by Using Styles
IE 5.5 provides more filter effects than does IE 4.0
IE 5.5 supports IE 4.0 filters
If compatibility is a consideration, use IE 4.0 filters
New Perspectives on DHTML, 2e
Tutorial 3

32. New Perspectives on DHTML, 2e
Using a Light Filter
The Light filter presents the illusion of light
To create a light source filter in IE 4.0: filter: Light()
In IE 5.5 and above: filter: progid:DXImageTransform.Microsoft.Light()
Once the filter is created, the object must be illuminated using: addAmbient(), addPoint(), or addCone()
New Perspectives on DHTML, 2e
Tutorial 3

33. New Perspectives on DHTML, 2e
Using a Light Filter
To apply an ambient light: object.filters.Light.addAmbient(red,green,blue, strength)
To create a light source hovering directly above: object.filters.Light.addPoint(x, y, z, red, green, blue, strength)
To shine a light source at an angle: object.filters.Light.addCone(x, y, z, x2, y2, red, green, blue, strength, spread)
New Perspectives on DHTML, 2e
Tutorial 3

34. New Perspectives on DHTML, 2e
Using a Light Filter
To change a light filter:
object.filters.Light.moveLight(light, x, y, z, absolute)
object.filters.Light.changeColor(light, red, green, blue, absolute)
object.filters.Light.changeStrength(light, strength, absolute)
To remove the effect of a light source, set strength to 0
To remove all of the light sources applied to an object: object.filters.Light.clear()
New Perspectives on DHTML, 2e
Tutorial 3

35. Applying Filters Using JavaScript
IE filter styles in CSS cause problems in NS 4
Use JavaScript to apply IE filter styles
Apply a filter using a text string: object.style.filter = “filter string”;
Where object is the name of the object on the page
Where filter string is the filter name and parameters
New Perspectives on DHTML, 2e
Tutorial 3

36. Applying Filters Using JavaScript
You may also treat the filter as part of the DOM:
object.filters[index].parameter = value or
object.filters[“filter_name”].parameter = value
Where object is the name of the object containing filters
Where index is the index number of the filter
Where filter_name is the name of the filter
Where parameter is the name of the filter parameter
New Perspectives on DHTML, 2e
Tutorial 3

37. Creating a Rollover Effect with Filters
Apply a filter for the onMouseOver event
Remove the filter for the onMouseOut event
New Perspectives on DHTML, 2e
Tutorial 3

38. Adding a Filter Effect to the Plays Page
New Perspectives on DHTML, 2e
Tutorial 3

39. Working with Transitions in Internet Explorer
A transition is a visual effect applied over time
IE 4.0 and IE 5.5 follow different syntax as in filters
New Perspectives on DHTML, 2e
Tutorial 3

40. Blend and Reveal Transitions (IE 4.0)
A blend transition blends one object into another: filter: blendTrans(Duration = value)
Where value is the time in seconds
A reveal transition provides choices for the transition effect: filter: revealTrans(Duration = value, Transition = type)
Where type is a number from 0 to 23 specifying the transition effect
New Perspectives on DHTML, 2e
Tutorial 3

41. Blend and Reveal Transitions (IE 5.5)
To create a transition in IE 5.5 and above: filter: progid:DXImageTransform.Microsoft.transition_name(parameters)
Where transition_name is the name of the transition
Where parameters are parameters used with that transition
New Perspectives on DHTML, 2e
Tutorial 3

42. Scripting Transitions
Syntax for scripting transitions follows the same syntax as for filters: object.style.filter = “progid:DXImageTransform.Microsoft.transition_name (parameters)”;
Where transition_name is the name of the transition
Where parameters are parameters used with that transition
New Perspectives on DHTML, 2e
Tutorial 3

43. New Perspectives on DHTML, 2e
Running a Transition
After a transition has been defined:
Set the initial state of the object (can include visibility, image source or HTML code)
Apply a transition to the object object.filters[filter].apply();
Specify the final state of the object (the state of the object after the transition)
Play the transition object.filters[filter].play(duration);
New Perspectives on DHTML, 2e
Tutorial 3

44. Adding a Transition to the Plays Page
Use IE transitions to give the illusion of a menu unwrapping
For IE 4.0, use the Wipe Down transition
For IE 5.5 and above, use the Blinds transition
New Perspectives on DHTML, 2e
Tutorial 3

45. Using Interpage Transitions
Interpage transitions are created using the <meta> tag:
<meta http-equiv = “Page-Enter” content = “transition_type” />
<meta http-equiv = “Page-Exit” content = “transition_type” />
<meta http-equiv = “Site-Enter” content = “transition_type” />
<meta http-equiv = “Site-Exit” content = “transition_type” />
Where transition_type is one of the transitions supported by Internet Explorer
New Perspectives on DHTML, 2e
Tutorial 3

46. New Perspectives on DHTML, 2e
Review
Use the ‘new’ keyword to create new image objects
For image rollovers, preload images to speed up processing during the rollover
To create text rollovers, the CSS pseudo-classes work for newer browsers
For text rollovers in older browsers, other approaches must be taken
New Perspectives on DHTML, 2e
Tutorial 3

47. New Perspectives on DHTML, 2e
Review
To create a pop-up menu, toggle the visibility property
To create a pull-down menu, clip the object to hide and reveal menu options
Use Internet Explorer’s proprietary features to apply filters and page transitions
New Perspectives on DHTML, 2e
Tutorial 3