In this article I would to show simply method to get animated, graphical buttons on your website using just Cascade Style Sheet and events.
Firstly we have to prepare buttons images using any graphic program like Gimp (I prefer using free application under GNU or BSD licence).
I will to use opacity feature, in-line JavaScript and events to make simple animation of button.
Tip: opacity feature has been different implemented in Firefox (and most browsers as well) and MS Internet Explorer because of that, we should to use both method to get animation effect in all browsers! - Firefox format: opacity:1
- IE format: filter:alpha(opacity=100)
Opacity equal 1 for Firefox or 100 for IE means object is 0% transparent (if value of opacity is lower transparency is bigger). Simple HTML code for link with image as button looks, for example: <a href=”link”><img src=”image link” /></a> Opacity feature we have to set for <img> tag <img src=”image link” style="opacity:1;filter:alpha(opacity=100) /> For animation we should add onmouseover and onmouseout attributes, as reaction for mouse pointer movement. <img src=”image link” style="opacity:1;filter:alpha(opacity=100)
onmouseover="this.style.opacity=0.7;this.filters.alpha.opacity=70;"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
/> If you note I have used smaller opacity value for onmouseover attribute – it is our animation as reaction for mouse pointer moving over menu button – you can use values from 0 to 1 for Firefox and 0-100 for IE. At the end we should to add reaction for onclick event because after click menu button will stay in mouseover state (for this example wit opacity=0.7). <img src=”image link” style="opacity:1;filter:alpha(opacity=100)
onmouseover="this.style.opacity=0.7;this.filters.alpha.opacity=70;"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onclick="this.style.opacity=1;this.filters.alpha.opacity=100"
/> The same animation method we can use for text based menu but we have to set style for <a> tag, for example: <a href="http://www.google.com" style="opacity:1;filter:alpha(opacity=100)"
onmouseover="this.style.opacity=0.7;this.filters.alpha.opacity=70;"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100;
onclick="this.style.opacity=1;this.filters.alpha.opacity=100;">Google</a>
Example file: menuopacity.html Sources: http://www.w3schools.com/Css/css_image_transparency.asp
http://www.quirksmode.org/css/opacity.html
Ostatnie uaktualnienie : 11-05-2010 05:28
|
(0 głos)
