Posted under CSS
Permalink
Tags CSS, HTML, Tip, Web
There are plenty of sites about showing how to do hover and click (=active) effects on an element (typically a link or image/image button) using Javascript, but with modern browsers (including IE7 and above but not IE6) this is completely unnecessary as it can be done entirely with CSS. The advantages are clear – no Javascript is needed, the CSS is straightforward, and no round trip to the server is needed. The typical effects used are to swap images or highlight using a different border or background.
These effects can now be performed on any element, not just a link, but check out compatibility as IE has had some issues with this. I have performed this on image buttons as well as links and had no trouble.
The W3schools article on Pseudo Classes is here. An example of using the hover effect to switch a background image via CSS may be found here. (Note the importance of setting an explicit width and height in the CSS – required because the example uses background images).
The pseudo class can be added to an existing style class. The following simple example shows an ICEfaces Image button with a style class, with modified pseudo classes used in the CSS to highlight the border differently on hover and active (active in CSS terms means click).
CSS
.ImageButton {
margin: 1px;
padding: 1px;
}
.ImageButton:hover {
padding: 0px;
border: 1px solid #ffa600;
}
.ImageButton:active {
padding: 0px;
border: 1px solid #ffd800;
}
JSF
<ice:commandButton image="images/arrow-up.gif"
styleClass="ImageButton">
</ice:commandButton>
Leave a Reply
You must be logged in to post a comment.