Unobtrusive Multistate Interface ButtonsToday I am going to share a technique I created to instantly tansform any plain old form submit button into a graphical multi-state interface element. Currently developers have the option of giving a standard HTML input button a type of “image” which replaces the plain old form button with a static graphic. This often looks much better than the standard form button but once this attribute is used, the button becomes a static image and loses many of the interactive qualities that make standard input buttons so usable. Buttons can be styled with CSS, but because of lackluster browser support for CSS :hover states, this is often a total pain.
Posted at 4pm on 03/30/07 | 3 comments | Filed Under: Design, Programming, UI, HTML, Javascript, Prototype read on
|
Easy Row Highlighting with PrototypeUsing the instrumental Prototype library, it is now extremely easy to add unobstrusive row highlighting effects to your HTML tables with a single Javascript function call. What is row highlighting? Quite simply, row highlighting iterates through a collection of table rows and attaches event observers for the OnMouseOver and OnMouseOut events. Once these events are triggered, prototype simply adds or removes a CSS class name that will allow you to style the highlighting effect however you want. The overall effect is a table whose rows light up when you run your mouse over them. |
