HTML <img> תג
דוגמה
תמונה מוגדרת ככה:<img src="/images/w3html.png" alt="HTML" width="120" height="95" />
הגדרות ושימוש
תג <img>
מכניס תמונה לדף HTML
.
שימו לב, תמונה מבחינה טכנית לא נכנסת לדף HTML,
תמונות מחוברות לדפי
HTML. תג <img>
יוצר שטח עבור תמונה מקושרת.
תמיכת דפדפנים
תג
<img> נתמך בכל הדפדפנים המוביליםהבדלים בין HTML ו- XHTML
ב- HTML
לתג
<img>
אין תג סגירה.
ב-XHTML
תג <img>
חייב להיות סגור כרואי.
טיפים והערות
טיפ: תכונה alt
מיועדת לשימוש כי טקסט חלופי למקרה אם תמונה לא זמינה,
ולא כי טקסט שמופיע כשה מעבירים מצביע של עכבר מעליה.
כדי להציג טקסט בעברת עכבר מעל תמונה או מפת-תמונה תשתמשו בתכונה
title, לדוגמה:
<img src="/images/w3html.png" alt="HTML" title="HTML" />
הערה: כשהדף אינטרנט עולה, ברגע זה דפדפן באמת לוקח תמונה משרת-ווב ומכניס אותה לדף. לכן תהיו בטוחים, שתמונה נמצאת במקום שקשור עם דף-ווב, אחרת מבקרים שלכם יקבלו סימן של קישור שבור. סימן של קישור שבור מציג, שדפדפן לא מסוגל למצוא תמונה.
תכונות חובה
DTD: מציין באיזה HTML 4.01/XHTML 1.0 DTD תג מותר. S=Strict (קפדן), T=Transitional (מעבר), F=Frameset (מסגרות)
| תכונה | ערך | תיאור | DTD |
|---|---|---|---|
| alt | text | מגדיר טקסט חלופי של תמונה | STF |
| src | URL | מגדיר URL של תמונה | STF |
תכונות נוספות
| תכונה | ערך | תיאור | DTD |
|---|---|---|---|
| align | top bottom middle left right | לא מומלץ לשימוש. תשתמשו בסגנונות במקום זה. מגדיר יישור של תמונה בהתאם לאלמנטים מסביבו | TF |
| border | pixels | לא מומלץ לשימוש. תשתמשו בסגנונות במקום זה. מגדיר רוחב של מסגרת של תמונה | TF |
| height | pixels % | מגדיר גובה של תמונה | STF |
| hspace | pixels | לא מומלץ לשימוש. תשתמשו בסגנונות במקום זה. מגדיר שוליים מימין ומשמאל של תמונה | TF |
| ismap | ismap | מגדיר תמונה כי תמונת-מפה (צד של שרת). בשימוש לעתים נדירות.ראו במקום זה usemap | STF |
| longdesc | URL | מגדיר URL של מסמך, שמכיל תיאור מלא של התמונה | STF |
| title | text | מגדיר כותרת של תמונה | STF |
| usemap | #mapname | מגדיר תמונה כי תמונת-מפה (צד משתמש) | STF |
| vspace | pixels | לא מומלץ לשימוש. תשתמשו בסגנונות במקום זה. מגדיר שוליים מלמעלה ומלמתה של תמונה | TF |
| width | pixels % | מגדיר רוחב של תמונה | STF |
תכונות סטנדרטיות
Тег<img> поддерживает следующие стандартные атрибуты:| תכונה | ערך | תיאור | DTD |
|---|---|---|---|
| class | classname | מציין שם המחלקה עבור האלמנט | STF |
| dir | rtl ltr | מציין כיוון טקסט עבור תוכן של האלמנט | STF |
| id | id | מציין id ייחודי עבור אלמנט | STF |
| lang | language_code | מציין קוד שפה עבור תוכן של האלמנט | STF |
| style | style_definition | מציין סגנון מובנה עבור אלמנט | STF |
| title | text | מציין מידע נוסף עבור אלמנט | STF |
| xml:lang | language_code | מציין קוד שפה עבור תוכן של האלמנטים במסמכי XHTML | STF |
יותר מידע על תכונות ה-HTML.
אירועי ה-HTML
תג<img> תומך בתכונות אירועים הבאות:| תכונה | ערך | תיאור | DTD |
|---|---|---|---|
| onabort | script | סקריפט מופעל כשה טעינת תמונה נכשלה | STF |
| onclick | script | מפעיל סקריפט בלחיצת עכבר | STF |
| ondblclick | script | מפעיל סקריפט בלחיצת עכבר כפולה | STF |
| onmousedown | script | מפעיל סקריפט כשה כפתור של העכבר נלחץ | STF |
| onmousemove | script | סקריפט מופעל כשה מצביע עכבר זז | STF |
| onmouseout | script | מפעיל סריפט כשה מצביע עכבר יוצא מאלמנט | STF |
| onmouseover | script | מפעיל סקריפט כשה מצביע עכבר עובר מעל האלמנט | STF |
| onmouseup | script | מפעיל סקריפט כשה כפתור של העכבר שוחרר | STF |
| onkeydown | script | מפעיל סקריפט כשה מקש נלחץ | STF |
| onkeypress | script | סקריפט מופעל כשה מקש נלחץ ושוחרר | STF |
| onkeyup | script | סקריפט מופעל כשה מקש שוחרר | STF |
יותר מידע על אירועי ה-HTML.
דוגמה 1
כיצד להכניס תמונות מתיקיה אחרת או מאתר:<p>הכמסת תמונה מתיקיה אחרת:</p> <img src="/images/w3html.png" alt="HTML" width="120" height="95" /> <p>הכנסת תמונה מאתר אחר:</p> <img src="http://xhtml.co.il/images/logo/logo_jQuery_xhtml.gif" alt="jQuery" width="120" height="95" />
דוגמה 2
כיצד ליישר תמונה בתוך הטקסט:<p> תמונה <img src="/images/blue-green-axe.gif" alt="Axe" align="bottom" width="75" height="75" /> בתוך הטקסט תמונה <img src="/images/blue-green-axe.gif" alt="Axe" align="middle" width="75" height="75" /> בתוך הטקסט תמונה <img src="/images/blue-green-axe.gif" alt="Axe" align="top" width="75" height="75" /> בתוך הטקסט </p>
דוגמה 3
כיצד ליישר תמונה מימין או משמאל של הטקסט:<p> <img src="/images/blue-green-axe.gif" alt="Axe" align="left" width="75" height="75" /> פסקה עם תמונה. תכונה align של תמונה מוגדרת ל- "left". תמונה תיושר שמאלה יחסית לטקסט. </p> <p> <img src="/images/blue-green-axe.gif" alt="Axe" align="right" width="75" height="75" /> פסקה עם תמונה. תכונה align של תמונה מוגדרת ל- "right". תמונה תיושר ימינה יחסית לטקסט </p>
דוגמה 4
כיצד להוסיף קישור לתמונה:תמונה כי קישור <a href="http://Xhtml.co.il/he/"> <img src="/images/w3html.png" alt="HTML" width="120" height="95" border="0" /> </a>
דוגמה 5
תמונת-מפה, עם איזורים שניתן ללחוץ עליהם ותכונת target<p>תלחצו על אחד מהכוכבים כדי לראות אותם מקרוב:</p> <img src="/images/353915main_image_1377_428-321.gif" alt="Planets" width="350" height="263" usemap="#planetmap"> <map id="planetmap" name="planetmap"> <area shape="rect" coords="203,104,343,241" alt="Sun" title="sun" href="http://xhtml.co.il/tryit/sun.html" target="_blank" > <area shape="circle" coords="92,98,56" alt="Mercury" title="Mercury" href="http://xhtml.co.il/tryit/mercury.html"> </map>
האם מידע זה היה מועיל?
