A revolving earth (earthani.gif--64x64) Beaverland Net
Net Art
 
Japanese Version (japanv.gif--100x36)

Beaverland Net Art logo (netart2.gif--140x365)

Beaverland Net HTML Made Easy! logo (html02.gif--140x160)

Beaverland Net JavaScript Made Easy! logo (javascrx.gif--140x233)

Beaverland Unlisted Slang logo (slangs2.gif--140x260)

Beaverland Historica logo (histbanr.jpg--140x360)

Beaverland Mythology logo (mythbanr.jpg--140x255)

Beaverland Stries logo (stories.jpg--140x276)

Beaverland Webs & Internet Secrets logo (web100.jpg--140x250)

Beaverland Cleopatra Gallery logo (galleryt.gif--177x275)

Beaverland Ciold War Years logo (coldwrbn.jpg--140x320)


onstore.gif (140x93)

beavbook.gif (120x160)

beavcomp.gif (120x160)

beavmovi.gif (120x160)

beavgift.gif (120x160)

beavtrav.gif (120x160)

music.gif (50x50) Beaverland Music
 
Animation Presentation
with CSS
August 25, 2003
 

Move your mouse over her hair band.
To stop, move your mouse
out of her head.

 

 

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
        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>
</td></tr>
</table>
<script language="javascript">
<!---- to hide

var myTimerID=null

 

function displayWink() {
  document.myGal.src="../images/pinup013.jpg"
  myTimerID=setTimeout("displaySpacer()",2000)
  }

function displaySpacer() {
  document.myGal.src="../images/spacer.gif"
  myTimerID=setTimeout("displayWink()",2000)
  }

function stopAnim() {
  clearTimeout(myTimerID)
  document.myGal.src="../images/spacer.gif"
  }

//--->
</script>

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
    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>
</div>
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





Rate article:
Excellent Good Neutral Poor Worst

Your Name:
Your Email Address:
Comments:


  Comments
 
Maybe, this is a stupid question, but what is the double-dot in the above code?

    - Micky Seymore


It is a symbol used in relative addressing. You can find more information in this page: What the heck is this double dot?

    - Akira


Do you think you can use buttons, instead of moving a mouse pointer over her head?

    - Aria Giovanna


Of course, I can. I’ll show it in the next page: Animation Presentation with a FORM tag.

    - Akira

 
 
Copyright Akira Kato
About this author:
  • Educated both in Canada and Japan
  • Traveled extensively in Europe, Far East, and North America
  • Worked as management consultant, computer systems analyst, college instructor and freelance writer.
Akira Kato
World Cup Trivia

The biggest upset in a final occurred at the 1998 World Cup, when Host France thrashed favorites
Brazil 3 - 0.

Soccer player and fallen goalkeeper (socer22.jpg--137x103) 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.

Three soccer players (socer12.jpg--138x106) 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.


 

Soccer ball animation  (soccer2.gif--120x60)

For safe, secure betting use North America’s first online Sportsbook Sports Interaction. Licensed and Regulated.


Beaverland Forum
Featuring thought-provoking
columns and stories
inserted by FC2 system