יחידת בונוס

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
	"http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>Index Card Application - Version 2.0</TITLE>
<STYLE type="text/css">
	body { background-color: white; font-family: Arial }
      DIV { position:absolute }
      H2 { color: red;  }
      .indexcard { 	left: 100;
	  	top: 80;
		width: 300;
		visibility: hidden;
		z-index: 3 }
      .card { margin-left: 20px;
	  background-color: white;
	  font-size: 10pt;
	 layer-background-color: white;
	 width: 300;
	z-index: 3}
      DIV A { text-decoration: none;
	  color: black;
	font-weight: bold}
	.tags { top: 90;
	           visibility: hidden;
	          width: 80; z-index: 1 }
	.names { top: 25;
		visibility:hidden;
		z-index: 2 }
	.nameshref { color	: red;
		      font-weight: 400;
		      font-size: 10pt }
	.diff { color   : red;
	         font-weight: 400 }
</STYLE>
<SCRIPT src="ns4_obj.js" language="javascript1.2">
</SCRIPT>

<SCRIPT src="ie4_obj.js" language="jscript">
</SCRIPT>

<SCRIPT LANGUAGE = "JAVASCRIPT">
<!--
// global
var cardNumber = 1;
LASTCARD = 5;

// show navigational text, first index card
// position tag elements
function start() {
   wdvlObjs["contents1"].objShow();
   wdvlObjs["nextbutton"].objShow();
   for (var i = 1; i <= 5; i++) {
	wdvlObjs["tag" + i].objSetLeft(i * 80);
      wdvlObjs["tag" + i].objShow();
      wdvlObjs["name" + i].objSetLeft(i * 80 + 15);
	}
}

// show card based on which tag clicked
function show_card(cardnum) {
   wdvlObjs["contents" + cardNumber].objHide();
   cardNumber = cardnum;
   wdvlObjs["contents" + cardNumber].objShow();
}

// show card based on using navigational text
// next card
function next_card() {
   wdvlObjs["contents" + cardNumber].objHide();
   cardNumber++;
   wdvlObjs["contents" + cardNumber].objShow();
   set_buttons();
}

// show card based on using navigational text
// previous card
function prev_card() {
   wdvlObjs["contents" + cardNumber].objHide();
   cardNumber=cardNumber - 1;
   wdvlObjs["contents" + cardNumber].objShow();
   set_buttons();
}

// show/hide navigational buttons 
// depending on which card is showing
function set_buttons() {
   if (cardNumber > 1)
      wdvlObjs["prevbutton"].objShow();
   else
      wdvlObjs["prevbutton"].objHide();

   if (cardNumber < LASTCARD)
      wdvlObjs["nextbutton"].objShow();
   else
      wdvlObjs["nextbutton"].objHide();
}

// globals for animation
MOVEINCR = 7;
LASTCOUNT = 10;
count = 0;

// create tag animation
function move_tags() {
   if (count == 0) {
	wdvlObjs["nextbutton"].objHide();
	wdvlObjs["prevbutton"].objHide();
	}

   // if animation is not finished
   // find current top position and 
   // decrement it by animation movement amount
   if (count < LASTCOUNT) {
	var topVal = wdvlObjs["tag1"].objGetTop();
	topVal = topVal - MOVEINCR;
      for (var i = 1; i <= 5; i++)
	   wdvlObjs["tag" + i].objSetTop(topVal);
	count++;
      setTimeout("move_tags()", 100);
	}

   // show tag text
   else
	for (i = 1; i <= 5; i++)
	    wdvlObjs["name" + i].objShow();
}     
//-->
</script>
</HEAD>

<BODY onload="wdvlCreateObjects();start()">

<!-- index card background -->
<DIV style="position:absolute;
		left: 80;
		top: 50;
		width: 400;
		z-index: 2">
<img src="Card.jpg" width=400>
</DIV>

<!-- index card contents -->
<DIV id="contents1" class="indexcard">
<h2>Adams</h2>
<DIV class="card">
Terry Adams<br>
1234 SomeWhere Lane<br>
SomeTown, Vt. 05458<p>
(802) 555-1212
</DIV>
</DIV>

<DIV id="contents2" class="indexcard">
<h2>Butler</h2>
<DIV class="card">
Sara Butler<br>
P.O.Box 1<br>
Glad Town, Wa. 99141<p>
(206) 555-1212
</DIV>
</DIV>

<DIV id="contents3" class="indexcard">
<h2>Carter</h2>
<DIV class="card">
Joey Carter<br>
18 Nonesuch Lane<br>
Township, OR  98272<p>
(503) 555-1212</DIV>
</DIV>


<DIV id="contents4" class="indexcard">
<h2>Dunard</h2>
<DIV class="card">
Bill Dunard<br>
Box 1.<br>
Anna, WI.  01000<p>
(888) 555-0000
</DIV>
</DIV>

<DIV id="contents5" class="indexcard">
<h2>Jones</h2>
<DIV class="card">
Mark and Helen 
<a href="" onclick="move_tags();
	return false" class="diff">Jones</a><br>
1600 Penn Ave.<br>
Bigtown, MT.  01000<p>
(501) 555-1212
</DIV>
</DIV>

<!-- index card tags -->
<DIV id="tag1" class="tags">
<img src="tag.jpg" width=80>
</DIV>
<DIV id="name1" class="names">
<a href="" onclick="show_card(1);
	return false" class="nameshref">Adams</a>
</DIV>
<DIV id="tag2" class="tags">
<img src="tag.jpg" width=80>
</DIV>
<DIV id="name2" class="names">
<a href="" onclick="show_card(2);
	return false" class="nameshref">Butler</a>
</DIV>
<DIV id="tag3" class="tags">
<img src="tag.jpg" width=80>
</DIV>
<DIV id="name3" class="names">
<a href="" onclick="show_card(3);
	return false" class="nameshref">Carter</a>
</DIV>
<DIV id="tag4" class="tags">
<img src="tag.jpg" width=80>
</DIV>
<DIV id="name4" class="names">
<a href="" onclick="show_card(4);
	return false" class="nameshref">Dunnard</a>
</DIV>
<DIV id="tag5" class="tags">
<img src="tag.jpg" width=80>
</DIV>
<DIV id="name5" class="names">
<a href="" onclick="show_card(5);
	return false" class="nameshref">Jones</a>
</DIV>

<!-- navigational buttons -->
<DIV id	= "nextbutton"
		style= "left: 500;
		top: 120;
		visibility:hidden">
<a href="" onclick="next_card();
	return false">Next Card</a>
</DIV>
<DIV id	= "prevbutton"
		style= "left: 500;
		top: 140;
		visibility: hidden">
<a href="" onclick="prev_card();
	return false">Previous Card</a>
</DIV>

</BODY>
</HTML>
תוכל לנסות את הגרסה הזו של האפליקציה. ברגע שתגיע לכרטיס האחרון (ששמו "Jones"), לחץ על השם האחרון בחלק הכתובות בשביל להתחיל את האפקט.
יחידת בונוס: מעט אנימציה לא תזיק
