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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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