Cascading Style Sheets (CSS) allows you to control the presentation and appearance of your Web page. You can create dynamic style effects by changing any style attribute for any page element at any time -- even after the page has loaded -- right on the client side, with no round trip to the server. This means you can control page appearance in the blink of an eye.

Cascading Style Sheets and Dynamic Styles
Working with Events
What's So Important Here?
Visual Filters
Transitions
Visibility and Display

© 1997 Microsoft Corporation. All rights reserved. Terms of use.


You can change styles locally or globally, using three different techniques:

Every page element and object has events that it can respond to. There are numerous standard events that you can use as triggers for all page elements. Some HTML tags support their own specific events. There are five kinds of events: keyboard, mouse, focus-related, element-specific, and events for specific objects. When using VBScript, you can create a sub for an event using the object_onEventName convention, such as window_onKeyPress. You can also use the <SCRIPT FOR> tag to associate a script with an object's event. All of the stuff you see happening on this page is happening in response to onMouseOver and onMouseOut events.

You might think to yourself, "Ho hum -- what's so dynamic about changing style attributes?" There are so many style attributes it will make your head spin. To wit and namely, here is a list of the things you can change with dynamic styles.

Objects have a visibility property that allows you to put objects on the page without being seen. Set the visibility property to "visible" to show an object, and to "hidden" to hide it. This very paragraph, for example, originally had its visibility property set to "hidden." It only became visible when you clicked on the "Visibility and Display" heading at left. Note: Invisible objects still take up space on the page. This is shown in a sample that sets the visibility property of some images. Objects also have a display property that completely removes the object from the rendered page. See the sample that sets the display property of the same images to see how the display property differs from the visibility property. You set the display property to "none" to remove the object, and to "" (null) to put it back in.

<span id="makePurple">Move the mouse over this text to change its color.</span>

sub makePurple_onMouseOver
  makePurple.style.color = "red"
end sub

sub makePurple_onMouseOut
  makePurple.style.color = "blue"
end sub
<HEAD><STYLE>
.redText   {color:"#FF0000"}
.blueText  {color:"#0000FF"}
</STYLE>
<SCRIPT LANGUAGE="VBSCRIPT">
sub TextExample2_onMouseOver
  TextExample2.className = "redText"
end sub
sub TextExample2_onMouseOut
  TextExample2.className = "blueText"
end sub
</SCRIPT></HEAD>
<BODY><SPAN ID="TextExample2" CLASS="blueText">Move the mouse over this text to 
see it change color.</SPAN></BODY>

You can add a new rule for a class of objects to the stylesheet object. This example adds a rule for level one headings to the stylesheet myStyleSheet.

var new_index

'Add a rule for H1 elements
new_index=document.styleSheets.myStyleSheet.add("H1", "color:red")

Press a key to see a keyboard event in action.

Keyboard Events:
onKeyDownThis event is triggered when the user presses a key. The shift state is passed to the event handler.
onKeyPressThis event is triggered when the user presses a key. The shift state is not passed to the event handler.
onKeyUpThis event is triggered when a key is released.
onHelpThis event is triggered when the user presses the F1 key or the help button in the browser.

Here's one way to trap keystrokes:

<BODY onkeydown="doKeyPress()">

sub doKeyPress
  aKey.innerHTML = "The key you pressed has the code <B>"+cSTR(window.event.keyCode)+"</B>"
end sub
Mouse Events:
onMouseDownThis event is triggered when a mouse button is clicked. It fires before the onClick event.
onMouseMoveThis event is triggered when the cursor moves over an object. Useful for dragging objects on the Web page.
onMouseUpThis event is triggered when a mouse button is released. Use it to drop objects on the Web page after a drag.
onMouseOverThis event is triggered when the cursor first passes over any part of an object. It is used extensively in this tutorial. Can also be used to trigger tooltips or status bar updates.
onMouseOutThis event is triggered when the cursor leaves an object.
onClickThis event is triggered when a mouse button is clicked. This is the workhorse of mouse-related events.
onDblClickThis event is triggered when a mouse button is double clicked.

Focus-Related Events:
onFocusThis event is triggered when the object receives the focus, such as when an object is clicked or tabbed to. Note that you can also give the focus to an object in a script, using the focus method: myTable.focus.
onBlurThis event is triggered when the object loses the focus. For example, you could use it to perform a calculation on a form when a user finishes entering text into a TEXT INPUT element.
Element-Specific Events:
onAbortIMG elementFires when the user aborts the downloading of an image.
onBounceMARQUEE elementFires when a MARQUEE is set to "alternate," and the marquee contents reach the specified side.
onChangeFORM-related elementsFires when the contents are committed, such as by hitting ENTER or leaving the element. This event fires before onBlur.
onErrorIMG elementFires when there is an error loading the image.
onFinishMARQUEE elementFires when the MARQUEE element finishes looping.
onLoadIMG element; document, windowFires immediately after the browser finishes loading the object.
onReadyStateChangeAPPLET, EMBED, FRAME, IFRAME, IMG, OBJECT, SCRIPT SRC= elements; document objectFires whenever the readyState for the object has changed. When an element changes to the loaded state, this event fires immediately before the firing of the load event.
onResetFORM elementFires when the user clicks the reset button.
onScrollwindow object and all elements that scrollOccurs when the scroll box is repositioned. The default action of this event is to scroll.
onSelectsome FORM elementsFires with each change in the selection.
onSubmitFORM elementFires when the submit button is clicked.
onUnloadwindowFires just before the window is unloaded.

Custom objects can also have events. These include objects that come with Internet Explroer 4.0, such as the sound mixer, ActiveX™ objects from third parties, or any other objects that are not Web page elements. Web page elements are the objects you typically see on a Web page -- BODY, H1, IMG, etc. The following snippet of source code shows the onMediaLoaded event for the sound mixer object in a VBScript script.

Sub Mixer_onMediaLoaded(Sound, Complete)
  if Sound is Narration and Complete = True then
    SoundChannel.Play
  end if
end sub

You can use the "object_onEventName" style only in VBScript!

// Change the page title when the user presses a key.
sub window_onKeyPress
  pageTitle.innerText = “Where have all the neutrons gone?”
end sub

An event is a notification that occurs in response to some action. It can be a change in state, or a response to a user action (such as a mouse click). When an event "fires," any script for that event is executed. For example, the following VBScript code would execute when a mouse clicks on the object with the ID "myObject":

sub myObject_onClick
  msgbox "You clicked on me!"
end sub

background, backgroundAttachment, backgroundColor, backgroundImage, backgroundPosition, backgroundPositionX, backgroundPositionY, backgroundRepeat, border, borderBottom, borderBottomColor, borderBottomStyle, borderBottomWidth, borderColor, borderLeft, borderLeftColor, borderLeftStyle, borderLeftWidth, borderRight, borderRightColor, borderRightStyle, borderRightWidth, borderStyle, borderTop, borderTopColor, borderTopStyle, borderTopWidth, borderWidth, clear, clip, color, cssText, cursor, display, filter, font, fontFamily, fontSize, fontStyle, fontVariant, fontWeight, height, left, letterSpacing, lineHeight, listStyle, listStyleImage, listStylePosition, listStyleType, margin, marginBottom, marginLeft, marginRight, marginTop, overflow, paddingBottom, paddingLeft, paddingRight, paddingTop, pageBreakAfter, pageBreakBefore, pixelHeight, pixelLeft, pixelTop, pixelWidth, posHeight, position, posLeft, posTop, posWidth, styleFloat, textAlign, textDecoration, textDecorationBlink, textDecorationLineThrough, textDecorationNone, textDecorationOverline, textDecorationUnderline, textIndent, textTransform, top, verticalAlign, visibility, width, zIndex

The drop shadow filter paints a solid silhouette of the object (it works on text and images) to make it look as though the object is casting a shadow onto the page. You can set the offset and direction of the shadow.