Project 7: Exploring DHTML Essentials for Design JavaScript Level Two Michael Brooks

Copyright (c) 2005 Prentice-Hall. All rights reserved. 2 Objectives Manipulate inline styles Interact with style sheets Control positioning dynamically Create a drop-down menu effect Use text style properties Incorporate background and display properties

Copyright (c) 2005 Prentice-Hall. All rights reserved. 3 Why Would I Do This? Dynamic HTML (DHTML) – describes the integration of JavaScript, CSS, and HTML  Use JavaScript to change CSS rules JavaScript style object created for each CSS style  Properties of style object correspond to attributes set in CSS declaration

Copyright (c) 2005 Prentice-Hall. All rights reserved. 4 Manipulating Inline Styles Elements referenced using the ID tag Style object in JavaScript represents style property of HTML tag Style object  Change CSS attributes by using the style object Only for inline style sheets, not for styles created in style sheet

Copyright (c) 2005 Prentice-Hall. All rights reserved. 5 Use Style Object Properties Return

Copyright (c) 2005 Prentice-Hall. All rights reserved. 6 Interacting with Style Sheets Use getElementById() method of the document object Use getElementById() method  Pass in id of the HTML element  Be careful of spelling and capitalization Once you have referred to the element, you can change any aspect of its style

Copyright (c) 2005 Prentice-Hall. All rights reserved. 7 Reference Style Attributes in JavaScript Return

Copyright (c) 2005 Prentice-Hall. All rights reserved. 8 Control Positioning Dynamically Animate a single image rather than loading multiple images Animate a single image Use HTML, CSS, and JavaScript to create effects  Use HTML to create and display image on screen  Use CSS to control placement and move image  Use JavaScript to create a loop to animate

Copyright (c) 2005 Prentice-Hall. All rights reserved. 9 Animate an Element Return

Copyright (c) 2005 Prentice-Hall. All rights reserved. 10 Creating a Drop-Down Menu Effect Useful when information on site fits into easy- to-understand categories Use different technologies to create  Use CSS to create menus  Use CSS visibility property to determine if menu is visible  Use JavaScript to detect when mouse rolls over  Use JavaScript to hide or display menu Use JavaScript to hide or display menu

Copyright (c) 2005 Prentice-Hall. All rights reserved. 11 Disadvantages of Drop-Down Menus Not compatible with older browsers Difficult to create menus

Copyright (c) 2005 Prentice-Hall. All rights reserved. 12 Show and Hide Menus Return

Copyright (c) 2005 Prentice-Hall. All rights reserved. 13 Using Font and Text Properties CSS provides greater control of fonts and appearance of text elements Use JavaScript to control fonts as user interacts with page Use JavaScript to control fonts

Copyright (c) 2005 Prentice-Hall. All rights reserved. 14 Common CSS Attributes color – sets or retrieves text color  Corresponds to JavaScript Color property font – sets or retrieves font properties  Corresponds to JavaScript Font property font-size – sets or retrieves font size  Corresponds to JavaScript FontSize property text-justify – sets or retrieves the type of alignment  Corresponds to JavaScript textJustify property

Copyright (c) 2005 Prentice-Hall. All rights reserved. 15 Use Text Properties Return

Copyright (c) 2005 Prentice-Hall. All rights reserved. 16 Incorporating Background and Display Properties Use JavaScript properties to specify and position background images Use JavaScript to layer elements on page  Often called swapping depths Use JavaScript to hide or display objects

Copyright (c) 2005 Prentice-Hall. All rights reserved. 17 Common Attributes background-attachment – sets or retrieves whether the background image stays fixed  Corresponds to JavaScript backgroundAttachment property background-image – sets or retrieves the background image  Corresponds to JavaScript backgroundImage property display – sets or retrieves whether object is rendered  Corresponds to JavaScript display property

Copyright (c) 2005 Prentice-Hall. All rights reserved. 18 Common Attributes (cont.) position – sets or retrieves the type of positioning  Corresponds to JavaScript position property  Can also specify posLeft, posRight, etc. visibility – sets or retrieves whether an object displays on screen  Corresponds to JavaScript visibility property z-index – sets or retrieves the stacking order  Corresponds to JavaScript zIndex property

Copyright (c) 2005 Prentice-Hall. All rights reserved. 19 Swap Depths Return