| |||||||||||||||||||
|
Animation Presentation
with CSS by Akira Kato
August 25, 2003
Move your mouse over her hair band.
What is “Deprecated”? According to the World Wide Web Consortium, a deprecated element or attribute is one that has been outdated by newer constructs. Deprecated elements are defined in the reference manual in appropriate locations, but are clearly marked as deprecated. Deprecated elements may become obsolete in future versions of HTML. User agents (including browsers) should continue to support deprecated elements for reasons of backward compatibility. Definitions of elements and attributes you can find at W3C clearly indicate which are deprecated. This specification includes examples that illustrate how to avoid using deprecated elements. In most cases these depend on user agent support for style sheets. In general, authors should use style sheets to achieve stylistic and formatting effects rather than HTML presentational attributes. HTML presentational attributes have been deprecated when style sheet alternatives exist.
Some say, the TABLE Tag is deprecated. No, it is not deprecated, but as the last paragraph of the previous section says, you should use style sheets to achieve stylistic and formatting effects rather than HTML presentational attributes. HTML presentational attributes have been deprecated when style sheet alternatives exist. Well, the above is not my opinion. I’ve mostly copied it from the W3C site. Although the table tag is not deprecated, you can achieve more or less the same formatting effects by the CSS (Cascading Style Sheet) specification. If you don’t know about CSS, please visit this page: CSS Table of Contents.
The above animation was originally coded with the TABLE tag as follows:
<table background="../images/pinup011.jpg"
width="472" height="629" border="0" cellpadding="0" cellspacing="0"> <tr><td align="left" valign="top">
<a href="javascript:alert('Sorry, only this message
</td></tr> will show up when you click this picture');" onMouseOver="displayWink()" onMouseOut="stopAnim()"> <img border="0" name="myGal" src="../images/spacer.gif" alt="1-pixel-by-1 transparent GIF image" width="120" height="120"></a> </table> <script language="javascript"> You can find the explanation on the above code in this page: How to reduce an animation-file size with Javascript.
The above animation is now coded with CSS specification as follows:
<div style="background-image:url(../images/pinup011.jpg);
width:472px; height:629px; text-align:left;">
<a href="javascript:alert('Sorry, only this message will
</div>
show up when you click this picture');" onMouseOver="displayWink()" onMouseOut="stopAnim()"> <img border="0" name="myGal" src="../images/spacer.gif" alt="1-pixel-by-1 transparent GIF image" width="120" height="120"></a> The Javascript code is exactly the same as that of the above code. As you see, with CSS, the code looks much simpler now.
For more information, please visit the following links:
Related Links
World Cup Trivia
The biggest upset in a final occurred at the 1998 World Cup, when Host France thrashed favorites
Brazil 3 - 0.
Possibly the most infamous goal in the World Cup was scored in 1986, when archrivals Argentina and England met. Argentina’s Diego Maradona leapt high for a ball and used his hand to tap it past the goalkeeper and into the net. The goal became known as the “The Hand of God”. The 1950 World Cup was the only competition without a real final. Host Brazil needed only a draw against Uruguay to win. A world record 200,000 fans watched as Uruguay came from behind to win 2 -1. For a few, winning in the World Cup is not everything. In 1990 United Arab Emirates players were promised a Rolls-Royce for every goal the team scored. UAE lost all three games, but scored twice. For safe, secure betting use North America’s first online Sportsbook Sports Interaction. Licensed and Regulated. | ||||||||||||||||||
|