• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Workshop

Quiz

1:Assume that you've made a picture of a button and named it button.gif. You also made a simple GIF animation of the button flashing green and white and named it flashing.gif. Write the HTML and JavaScript to make the button flash whenever someone moves the mouse pointer over it, and link to a page named gohere.htm when someone clicks the button.
A1:
<a href="gohere.htm"
OnMouseOver="flasher.src='flashing.gif';
OnMouseOut="flasher.src='button.gif'">
<img name="flasher" src="button.gif" border=0 /></a>

2:How would you modify what you wrote for question 1 so that the button starts flashing when someone moves the mouse over it, and keeps flashing even if he or she moves the mouse away?
A2:
<a href="gohere.htm"

OnMouseOver="flasher.src='flashing.gif'">
<img name="flasher" src="button.gif" border=0 /></a>

3:Write the HTML for a form that automatically calculates a total order cost, based on the number of widgets the user wants and a price of $25 per widget.
A3:
<html><head><title>widget order form</title>
<script language="javascript">
<!--
function CalculateTotal() {
document.orderform.total.value=
parseInt(document.orderform.qty.value)*25}
//-->
</script></head><body>
<form name="orderform" method="post"
action="/htbin/generic">
Please send me
<input name="qty" size=3 onblur="CalculateTotal()">
widgets at $25 each = TOTAL:
<input name="total" size=5>
<input type="submit" value="Order Now">
</form>
<script language="javascript">
<!--
document.orderform.qty.value=0;
document.orderform.total.value=0;
//-->
</script>
</body></html>


					  

Exercises

  • Hey, what are you waiting for? Now that you're an HTML expert, get yourself a copy of the new Sams Teach Yourself JavaScript in 24 Hours, Second Edition and take the next quantum leap in Web publishing!


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint