יש הבדל בין הכנסת תמונה ל- עמוד אינטרנט והפיכת התמונה לקישור הניתן ללחיצה. למרות ש HTML דומה, קישור מסתמך על לְעַגֵן אלמנט בעוד שהתמונה משתמשת ב img אֵלֵמֶנט. עם זאת, תמונה עשויה לקנן בתוך עוגן, מה שהופך את התמונה ללחיצה כקישור.
הכנסת תמונות לאלמנטים עוגניים
שימוש נפוץ בקישור מבוסס תמונה הוא גרפית הלוגו של האתר, אשר מקושרת חזרה לדף הבית של האתר.
כך תוכל להציב תמונה שאינה ניתנת ללחיצה במסמך ה- HTML:
כדי להפוך את התמונה לקישור, הוסף את קישור העיגון, פתח את אלמנט העוגן לפני התמונה וסגר את העוגן לאחר התמונה. טכניקה זו דומה לאופן קישור הטקסט, אלא שבמקום לעטוף את המילים, אתה עוטף את התמונה:
כשאתה מוסיף סוג זה של HTML לדף שלך, אל תניח רווחים בין תג העוגן לתג התמונה. אם כן, חלק מהדפדפנים יוסיפו קרציות קטנות לצד התמונה, שייראו מוזרות.
הלוגו משמש כעת גם ככפתור דף הבית, שהוא פחות או יותר סטנדרט אינטרנט בימינו.
שים לב שאיננו כוללים סגנונות חזותיים, כגון רוחב וגובה התמונה, בסימון ה- HTML שלנו. אנו נשאיר סגנונות חזותיים אלה ל- CSS ונשמור על הפרדה נקייה בין מבנה HTML וסגנונות CSS.