ראשי > תפריטי dhtml נשלפים > תחקיר

תחקיר

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

חוקים:

1.      חובה ליצור את התפריטים הנשלפים ע"י שימוש ב-HTML דינמית, כיוון שג'אווה ופתרונות של PLUG-IN  הם כבדים מדי לטעמו של הלקוח ; יש להשתמש רק בגרסאות   +4 של נטסקייפ ושל אינטרנט אקספלורר  לתמיכה בתפריטים הנשלפים.

2.      כיוון שתוכן העניינים מופיע בכל עמוד באתר, גם הקוד של התפריטים הנשלפים צריך להופיע בכל עמוד.

3.      צריך תחזוקה מחזורית. הקישורים בכל תפריט נשלף חייבים להיות נגישים בקלות גם למי שאינו מתכנת.

היעד בצורה ויזואלית:

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

<img 	src	= "images/newsite6.gif"
	usemap	= "#sitemap"
	border	= 0
	id	= "tocimage"
	alt	= ""
	width	= 113
	height	= 211
	>
<map name	= "sitemap">
<area shape	= "rect" coords = "9,2,66,15"
	href	= "blahblah" alt="" onMouseOver="POPUP!">
<area shape	= "rect" coords = "9,17,38,31"
	href	= "blahblah" alt="" onMouseOver="POPUP!">
<area shape	= "rect" coords = "8,31,63,44"
	href	= "blahblah" alt="" onMouseOver="POPUP!">
<area shape	= "rect" coords = "9,46,48,60"
	href	= "blahblah" alt="" onMouseOver="POPUP!">
<area shape	= "rect" coords = "9,60,85,74"
	href	= "blahblah" alt="" onMouseOver="POPUP!">
<area shape	= "rect" coords = "7,76,32,88"
	href	= "blahblah" alt="" onMouseOver="POPUP!">
<area shape	= "rect" coords = "8,90,60,102"
	href	= "blahblah" alt="" onMouseOver="POPUP!">
<area shape	= "rect" coords = "9,104,81,117"
	href	= "blahblah" alt="" onMouseOver="POPUP!">
<area shape	= "rect" coords = "8,119,110,131"
	href	= "blahblah" alt="" onMouseOver="POPUP!">
<area shape	= "rect" coords = "7,134,98,146"
	href	= "blahblah" alt="" onMouseOver="POPUP!">
<area shape	= "rect" coords = "5,149,107,177"
	href	= "blahblah" alt="" onMouseOver="POPUP!">
<area shape	= "rect" coords = "2,178,37,191"
	href	= "blahblah" alt="" onMouseOver="POPUP!">
<area shape	= "rect" coords = "7,191,107,204"
	href	= "blahblah" alt="" onMouseOver="POPUP!">
</map>

כמובן ש"POPUP!  " אינו חלק מהקוד, זה פשוט מראה מאין אנחנו יכולים לשגר את הסקריפט  שעושה את כל העבודה. איך בעצם ליצור את התפריטים האלה? התשובה המתבקשת היא שימוש ברבדים  ((Layers, שידוע גם בשם   . CSS

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

בנקודה הזאת התוכנית נשמעת הוגנת למדי : יוצרים 13 רבדים, לכל אחד תפריט לנושא שלו. בתוך כל רובד יהיה קוד HTML שמכיל קישורים לכל מאמר. כאשר הדף נטען, הרבדים נוצרים אבל נסתרים מהעין. כאשר המשתמש מעביר את העכבר מעל אזור מתאים במפת התמונה, הרובד המתאים יופיע, וימוקם על המסך באופן יחסי למיקום העכבר. כאשר המשתמש יזיז את העכבר שלו מהתפריט, הרובד יוסתר שנית .

כרגע תוכנית האב מוכנה, ונותר רק להשלים את הפרטים החסרים.

לעמוד הקודם      לעמוד הראשי        לעמוד הבא