יצירת אינדקס כרטיסים אינטראקטיבי עם DHTML

בחלק הראשון של המאמר בעל שלושת החלקים, הדגמתי כיצד להשתמש ב-JavaScript כדי ליצור עצמים חוצי דפדפן לניהול הפערים ב-DHTML בין שני הדפדפנים, נטסקייפ נוויגטור 4.0 ומיקרוסופט אינטרנט אקספלורר 4.0. מאמר זה ישתמש בעצמים אלו ליצירת אינדקס כרטיסים עם תוכן מוטען מראש.

כשאני אומרת "מוטען מראש", הכוונה היא לתוכן שנטען לעמוד שמממש אפקטים של DHTML. התוכן יכול להיות מוצג מיידית, או שיוצג בתגובה לפעולה כלשהי של המשתמש. על בסיס זה, ועל הרצון לשמור על גודל עמוד סביר לטעינה, התוכן הוא בדרך כלל קצר. בעמוד ה-HTML הראשון של האינדקס, התוכן מורכב משמות וכתובות בדויים של 5 אנשים פיקטיביים.

יצירת תוכן העמוד

להוספת האפקט של אינדקס דמוי-כרטיס, יצרתי תמונת JPEG של כרטיס, והשתמשתי בה כרקע עבור השמות והכתובות. אז, יצרתי בלוק DIV עבור כל אחד מה"כרטיסים" שלי, בלוק אחד עבור כל כרטיס. השתמשתי בבלוקים של DIV כמקום אחסון עבור תוכן אחר של HTML,ושני הדפדפנים מממשים מיקום דינמי של בלוק DIV. בנוסף, שתי החברות ממשו שינוי דינמי של תכונות CSS-P, כמו left ו- topלמיקום אלמנט, הגובה והרוחב של אלמנט, אזור החיתוך שלו, z order או visibility.

השמות עבור כל כרטיס נוצרים תוך שימוש בכותרת מסוג H2, והכתובות נוצרות תוך שימוש באלמנט הפסקה <P>. מכיוון שרציתי רקע שקוף עבור הכותרת ורקע לבן עבור הכתובות, יצרתי שני עיצובים שונים של CSS1, שקובעים את צבעי הרקע ואת מיקום התוכן, וקובעים שכל האלמנטים יהיו בלתי נראים. בנוסף, יצרתי עיצוב עבור העמוד כולו, שכולל רקע בצבע לבן, טקסט בפונט Arial ומיקום קבוע של בלוקי ה-:DIV

<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; 
	      layer-background-color: white; 
	      width: 300; z-index: 3}
</STYLE>

שים לב לשימוש בתכונה z- index. זה דרוש כדי להבטיח שהרבדים של התוכן ימוקמו בצורה נכונה. בלוקים עם ערכי z-index גבוהים ימוקמו מעל בלוקים עם ערכי z-index נמוכים. בהמשך, יצרתי את תוכן העמוד. ראשית מוצב הבלוק שמכיל את תמונת הרקע. מוכרחים להשתמש בבלוק DIV כדי למקם במדויק את התמונה בעמוד:

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

לאחר תמונת הרקע, נוצרים הבלוקים של הכרטיסים. הבלוקים של הכרטיסים הם בעצם בלוק DIV אחד שמכיל את כותרת השם, ובלוק DIV אחר שמכיל את הכתובת. כל הכרטיסים משתמשים באותו גיליון סגנון, וכולם ממוקמים אחד מעל השני במחסנית:

לבסוף, בכדי לאפשר לקורא העמוד לנוע אחורה וקדימה בתוך מחסנית הכרטיסים, נוסיף עוד שני בלוקים לעמוד. בבלוק הראשון יש קישור לטקסט “Next Card", ובבלוק השני יש קישור לטקסט “Previous Card". כאשר הקורא לוחץ על הקישורים, נקראות פונקציות שמשנות את הכרטיס בראש המחסנית. גיליון הסגנון מותאם לאלמנטים החדשים, והגיליון החדש מופיע למטה בשלמותו:

<STYLE type="text/css">
	body { background-color: white; font-family: Arial }
      DIV { position:absolute }
      H2 { color: red;  }
      .indexcard { 	left: 100;
	  	top: 80;
		width: 200;
		visibility:	hidden;
		z-index: 3 }
      .card { 	margin-left: 0.5in;
	  	background-color: white;
		font-size	: 10pt; 
		layer-background-color: white;
		width: 200;
		z-index: 3}
      DIV A { 	text-decoration: none;
	  	color: black;
		font-weight: bold}
	.diff { color: red }
</STYLE>

לבסוף, שני האלמנטים האחרונים מתווספים למסמך ה-HTML :

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

עם האלמנטים שמאפשרים ניווט, כל התכנים של עמוד ה-HTML נמצאים. הצעד הבא הוא הוספת הקוד.