| |||||||||||||||||||
Beaverland Music
|
Animation Presentation
with a FORM tag by Akira Kato
August 25, 2003
Hi there!
The above animation was originally coded without a FORM tag 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> <script language="javascript"> You can find the explanation on the above code in this page: Animation Presentation with CSS. (A new window will open.)
The above animation is now coded with a FORM tag as follows:
<div style="background-image:url(../images/pinup011.jpg);
width:472px; height:629px; text-align:left;">
<img name="myGal"
src="../images/spacer.gif" alt="1-pixel-by-1 transparent GIF image" width="120" height="120">
<div style="text-align:right; padding:20px;
</div>
font-weight:bold; font-style:italic; font-family:times new roman,cursive; font-size:30pt; color:red;"> Hi there!
<form>
</div>
<input type="button" value="Start" onClick="displayWink()"> <input type="button" value="Stop" onClick="stopAnim()"> </form> The Javascript code is exactly the same as that of the above code. Instead of Because you now use the start and stop buttons to control the animation, the anchor tag has been removed from the code. A nested DIV block defines both the welcome message and the position of the two buttons while the outer DIV block defines the background image of the pinup girl as well as the alignment of the spacer. You can find the explanation for the Javascript code in the following page: How to reduce an animation-file size with Javascript. (A new window will open up.)
For more information, please visit the following links:
Related Links
| ||||||||||||||||||
| |||||||||||||||||||
