Get Adobe Flash player
דף הבית קישורים קישורים -מתקדם

האתר של רפאלי - קישורים, HTML

קישורים פנימי - בתוך מסמך

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

שיטת הפעולה במקרה זה מבוססת על שתי נקודות: נקודת מוצא ונקודת עוגן (סימניה). נקודת המוצא היא המקום בו לוחצים על הקישור, והעוגן היא סימון מקום היעד – המקום אליו הדפדפן עובר.

יצירת קישור פנימי מורכבת משני שלבים:

שלב א'

יוצרים עוגן (סימניה) בנקודה אליה צריך לעבור. את הסימניה בונים כמו קישור רגיל אך ללא תכונת href. במקומה יש להכניס את התכונה name או id. בשתי תכונות אלה עוד ניפגש בהמשך הקורס.

כללי כתיבת עוגן:

  • הערך הניתן לתכונה הוא העוגן. למשל, בהוראה: <a id="makom">נקודת העוגן </a>, העוגן הוא makom.
  • שם העוגן הוא ייחודי ואין להשתמש בו פעם שנייה בדף, לא כערך של id ולא כערך של name גם כאשר הם חלק מתוך תג אחר ובהקשר אחר
  • שם העוגן ייכתב תמיד באנגלית ובאותיות קטנות ו/או ספרות אך ללא רווחים.
  • שם העוגן יתחיל תמיד עם אות ולא עם ספרה. יש דפדפנים (Firefox למשל) שבהם הסימניה לא תעבוד
  • שם אחד - top, הינו שמור ואין להשתמש אלא במקרה מיוחד (ראה למטה - קישור אל ראש הדף) 
  • HTML5 - השפה העתידית, וגם במצבים מסוימים של XHTML, התכונה name מבוטלת. רצוי על כן להשתמש בתכונה id.

שלב ב'

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

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

<a href="#makom">קישור אל מקום במסמך</a>

אין משמעות לכיוון ההפנייה. אפשר לשים קישור בראש המסמך שיַפנֶה כלפי נקודה נמוכה יותר, ואפשר גפ להיפך.

קישור אל ראש הדף:

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

<a href="#top">אל ראש הדף </a>

קישור אל סימניה בדף אחר:

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

במקרה זה משלבים בין שתי השיטות. הפניה אל הסימניה perek5 הנמצאת בדף index.html ניראת כך- href="index.html#perek5".

ההוראה כולה תיראה כך:

<a href="index.html#perek5">עבור אל פרק 5 בדף הבית</a>

 

להדגמה לדפים כאלה, היכנס אל הקישור הבא

קישורים שונים בתוך תמונה אחת

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

שיטה זו מבוצעת ע"י תג <MAP> המאפשר קישורים שונים מתוך אזורים שונים בתוך תמונה אחת. מערכת כזו מחייבת מיפוי שטחה של התמונה וחלוקתה לקואורדינטות.

ניתן לאפיין בתמונה אזורי קישור בעלי צורות שונות כעיגול, ריבוע או מצולע.

קישורים מתוך מערכת קואורדינטות ריבועית:

התמונה שלפנינו היא ריבוע שגודל כל צלע היא 100 פיקסלים. גודלו של כל ריבוע פנימי הוא על כן 50x50 פיקסלים.

נסו להבין את הגדרות הקואורדינטות של התמונה הבאה

תמונה לצורך קישור ממפה

הגדרת הקואורדינטות של הפינה השמאלית-עליונה: 0,0

הגדרת הקואורדינטות של הפינה הימנית-תחתונה: 100,100

מידות ריבוע א' הן: פינה שמאלית עליונה: 0,0, פינה ימנית תחתונה: 50,50

 מידות ריבוע ד' הן: פינה שמאלית עליונה: 0,50 פינה ימנית תחתונה: 50,100

 

הנח את העכבר באזורים השונים, וראה את תוצאת תכונת title השונה מאזור לאזור. לחץ על כל אזור בנפרד, וראה את הקישורים.

התחביר מבוסס על שלושה שלבים:

  • הגדרת מפה ע"י התג ומתן שם (באמצעות name או id)<"tmuna"= map>
  • הגדרת הקואורדינטות והקישורים השייכים לחלקים השונים
  • הכנסת התמונה עצמה. הקישור בין התמונה לבין ה"מפה" נעשה באמצעות התכונה usermap שמקבלת את שם המפה בתוספת סולמית, ובדוגמא שבהמשך: #tmuna

תחביר פקודת הקישור הוא:

<map id="tmuna">

<area shape=”rect” coords="0,0,50,50" href="link_a.html" title="קישור א">
<area shape=”rect” coords="50, 0,100,50" href="link_b.html" title ="קישור ב">
<area shape=”rect” coords="50,50,100,100" href="link_c.html" title ="קישור ג">
<area shape=”rect” coords="0,50,50,100" href="link_d.html" title ="קישור ד">

</map>
<img src="rect.gif" width="100" height="100" alt="" usermap=”#tmuna”>
קישורים מתוך מערכת קואורדינטות של עיגול:

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

הדוגמא הבאה מתארת אזור עגול בתוך תמונה ריבועית שגודלה 200x200 פיקסלים. בתמונה זו יש שני קישורים, קישור באזור עגול וקישור ביתרת התמונה.

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

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

<map id="circle_block">

<area shape=”circle” coords="100,100,50" href="a.html" title="קישור א">
<area shape=”rect” coords="0, 0,200,200" href="b.html" title ="קישור ב">

</map>
<img src="rect.gif" width="100" height="100" alt="" usermap=”#circle_tmuna>

 בצורה דומה, ניתן גם להגדיר מערכת מצולעת

לקובץ דוגמא: לחץ כאן

קישור באמצעות כפתורים (לחצנים)

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

לחצן Submit

כפתור זה הוא חלק מטופס. יש לפתוח טופס ולתת לתכונת method את הערך get, ולתכונת action, תן כערך את כתובת האתר אליו תרצה להגיע.

<form method=”get” action="general/examples_html/marquee.htm" target="_blank">
<input type=”submit” value=”קובץ דוגמא”>
</form>
קישור באמצעות JavaScript

שילוב סקריפט קצר של ג'אוה סקריפט עם שילוב תכונת אירוע onClick (עליה תלמד מאוחר יותר בקורס), מאפשרת קישור פשוט יותר. לפניכם שתי אפשרויות שונות:

א. שימוש בכפתור "שלח" מסוג <input type="submit"> (ראו בפרק על טפסים)

<input type="submit" value="קישור לאתר הבית" onclick="window.location.href='http://calltuv.co.il';">
 

ב. שימוש בתג <button> המאפשר הצגת תמונה בתוך הכפתור. גם על כפתור זה, ראו בפרק טפסים

<input type="submit" value="קישור לאתר הבית" onclick="window.location.href='http://calltuv.co.il';">
 
אל השיעור הקודם