1998 on the Web Home Technology Diary 1998 Predictions Tips and Tools Awards to Win Your Comments  



Adding Dynamic HTML Effects to Button Objects(IE4)

Cascading Style Sheets and Dynamic HTML are features of the Microsoft Internet Explorer 4 Web browser. CSS is a mechanism for implementing document styles within a Web page or globally within an entire site. CSS has built-in controls that combined with the object model allow dynamic changes in appearance, size and interaction. This 1998 on the Web tip demonstrates these dynamic effects on button objects. Sorry Netscape Communicator 4 browser users, these effects are for Internet Explorer 4 only.

Get Internet Explorer


The first example demonstrates changing a button background and text color. Hover your mouse over the Tips and Tools button above, then move it off the button. Notice the change?

Here you can observe change in text properties when the button above is clicked.

When you move your mouse over the 1998 on the Web button above, it changes size, background color, and text color.

The source code for the samples is below. If you have any questions or comments about these CSS and Dynamic HTML techniques, let me know.
Add these <STYLE> and <SCRIPT> tags to the <HEAD> section of your page.

<style>
.bigChange {color:white; font-weight:bolder; font size:120%; letter-spacing:4px;
text-transform:uppercase; background:black}
.start {color:yellow; background:navy}
</style>

<script language="javascript">
function highlightButton(s) {
if ("INPUT"==event.srcElement.tagName) event.srcElement.className=s
}
</script>

Put the <FORM> tags in the <BODY> section of your page.

<form name="highlight">
<input type="button" value="Tips and Tools" onmouseover="highlightButton('start')" onmouseout="highlightButton('')">

<input type="button" value="Click Here" onmousedown="this.style.fontStyle='italic'" onmouseup="this.style.fontStyle=''" onclick="this.value='Button Clicked'">

<input type="button" value="1998 on the Web" onmouseover="highlightButton('bigChange')" onmouseout="highlightButton('')">
</form>

   E-mail the Author    View WebTracker Statistics

Copyright © 1997, 1998 Internet Brothers . All Rights Reserved.