Manage Learn to apply best practices and optimize your operations.

Mouse over effects on buttons using JavaScript and CSS

This tip will allow your buttons to have a life

This tip will allow your buttons to have a life by simply changing its colors whenever the user points the mouse on it, and changing back when moving it out.

The trick is using a combination of JavaScript and CSS

Put this code in your HTML Head Content:

"<Style>
.button  
{ width:98%; 
  text-align:center;  
  cursor:hand;
  font:bold 8pt verdana;  
  border:1pt solid #000000;  
  background:FFCC99;
}
.out
{ width:98%; 
  text-align:center;  
  cursor:hand;  
  font:bold 8pt verdana;  
  border:1pt solid #000000;  
  background:99CC99;
}  
</Style>"

And put this code into your buttons HTML Property:

Class: button
Other: onMouseOut="this.className='button'" onMouseOver="this.className='out'"

Enjoy!

Dig Deeper on Domino Resources - Part 4

Start the conversation

Send me notifications when other members comment.

Please create a username to comment.

-ADS BY GOOGLE

SearchWindowsServer

Search400

  • iSeries tutorials

    Search400.com's tutorials provide in-depth information on the iSeries. Our iSeries tutorials address areas you need to know about...

  • V6R1 upgrade planning checklist

    When upgrading to V6R1, make sure your software will be supported, your programs will function and the correct PTFs have been ...

  • Connecting multiple iSeries systems through DDM

    Working with databases over multiple iSeries systems can be simple when remotely connecting logical partitions with distributed ...

SearchDataCenter

SearchContentManagement

Close