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 |
Click on the headings at left for more information.
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.
Visual Filters allow you to apply a wide variety of effects to visual objects. In this example, the object is an image, but you can also apply these effects to text. For example, you could use the shadow effect to create a drop shadow for a text headline. Choose a visual filter from the list below to see examples, and click the source code samples at bottom to see changes.
There are two kinds of transition filters: Reveal and Blend. The Reveal Transition uses one of 23 transition styles to reveal what is "behind" a visual object. The Blend transition fades the visual object in or out. Click the button below to see an example of a reveal transition.
sub myButton_onClick if fadingOut then call Image3.filters.item(0).Apply() Image3.src = "images/eman9.gif" call Image3.filters.item(0).Play() else call Image3.filters.item(0).Apply() Image3.src = "images/world2.gif" call Image3.filters.item(0).Play() end if end sub
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.
onKeyDown | This event is triggered when the user presses a key. The shift state is passed to the event handler. |
onKeyPress | This event is triggered when the user presses a key. The shift state is not passed to the event handler. |
onKeyUp | This event is triggered when a key is released. |
onHelp | This 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
onMouseDown | This event is triggered when a mouse button is clicked. It fires before the onClick event. |
onMouseMove | This event is triggered when the cursor moves over an object. Useful for dragging objects on the Web page. |
onMouseUp | This event is triggered when a mouse button is released. Use it to drop objects on the Web page after a drag. |
onMouseOver | This 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. |
onMouseOut | This event is triggered when the cursor leaves an object. |
onClick | This event is triggered when a mouse button is clicked. This is the workhorse of mouse-related events. |
onDblClick | This event is triggered when a mouse button is double clicked. |
onFocus | This 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. |
onBlur | This 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. |
onAbort | IMG element | Fires when the user aborts the downloading of an image. |
onBounce | MARQUEE element | Fires when a MARQUEE is set to "alternate", and the marquee contents reaches the specified side. |
onChange | FORM-related elements | Fires when the contents are committed, such as by hitting ENTER or leaving the element. This event fires before onBlur. |
onError | IMG element | Fires when there is an error loading the image. |
onFinish | MARQUEE element | Fires when the marquee element finishes looping. |
onLoad | IMG element; document, window | Fires immediately after the browser finished loading the object. |
onReadyStateChange | APPLET, EMBED, FRAME, IFRAME, IMG, OBJECT, SCRIPT SRC= elements; document object | Fires 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. |
onReset | FORM element | Fires when the user clicks the reset button. |
onScroll | window object and all elements that scroll | Occurs when the scroll box is repositioned. The default action of this event is to scroll. |
onSelect | some FORM elements | Fires with each change in the selection. |
onSubmit | FORM element | Fires when the submit button is clicked. |
onUnload | window | Fires 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