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. Note: This list may be different in the final, shipping version of Internet Explorer 4.0.

Objects have a visibility property that allows you to put objects on the page without being seen. This very paragraph, in fact, originally had its visiblity property set to "hidden." It only became visible when you clicked on the "Visiblity and Display" heading at left. You can also "hide" an object by placing it off the page, but this is best used when you want to animate an object from off-page to on-page. Note that invisible objects still take up space on the page. Objects also have a display property that completely removes the object from the rendered page. 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 reaches 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 finished 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

Here is an example of a SCRIPT FOR construction.

<SCRIPT FOR=coolH1 EVENT="onclick()" LANGUAGE="vbscript">
  ' do something when H1 is clicked on 
</SCRIPT>
<H1 ID=coolH1>Click here for something cool</H1>

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

No filter is applied at this time. Select a filter from the list at left.
The alpha filter adjusts the opacity of an image. In this example, the overall opacity is set to 25%.
The alpha filter adjusts the opacity of an image. In this example, the overall opacity is set to 50%.
The alpha filter adjusts the opacity of an image. In this example, the overall opacity is set to 75%.
The alpha filter adjusts the opacity of an image. In this example, the overall opacity changes from 100% at left to 25% at right using a linear style.
The blur filter averages pixels together in a specified direction. The result makes it look as though the image is moving from that direction. The direction for this example is 115 degrees, or down and to the right. The strength is set to 5 pixels.
The chroma filter renders a specified color transparent. In this example, black is the transparent color. Note that colors are specified using a hexadecimal notation, starting with "&H" and specifying the red, green, and blue components. For example, green would be specified as &H00FF00.
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.
The flip horizontal filter flips the object from side to side.
The flip vertical filter flips the object from top to bottom.
The glow filter adds radiance around the outside of the visual object. You can specify the color of the glow.
The grayscale filter renders the object in shades of gray, removing all color from the object.
The invert filter inverts the hue, saturation, and color of the object.
The mask filter takes the selected visual object, paints the transparent pixels a specific color, and makes a transparent mask from its nontransparent pixels.
The shadow filter paints a solid silhouette of the visual object to create the illusion of a shadow. Unlike the drop shadow, you cannot specify the amount of offset. In addition, the shadow filter creates a shadow that fades away from the source object (a much more natural-looking shadow).
The wave filter applies a sine-wave distortion to the image (a rippling effect).
The x-ray filter renders the object in black and white to create the effect of a black and white x-ray image.