האובייקט Image

לפעמים ברצונינו ליצור תמונה שצורה דינמית, בלי לכתוב את תגי ה-<img> בקוד ה-HTML. על מנת לעשות זאת, באפשרותינו להשתמש באובייקט Image. המאמר הבא יסביר וידגים כיצד לעשות זאת. כמו כן נלמד על אובייקט ה-Image עצמו ותכונותיו.

האובייקט Image() יוצר תמונת HTML. כל תמונה שנוצרת במסמך נכנסת למערך ה-images (images=תכונה של אובייקט ה-document).
אם יש לך תמונה ספציפית שנוצרה ע"י התגית img (HTML). אז אתה יכול להשתמש בה בתוך האינדקסים של המערך images .
ליצירת תמונות ברמת ה-JS אפשר להשתמש בבונה של JS עם האופרטור new כך :

1 2 3

<script language="JavaScript" type="text/JavaScript"> var MyImage = new Image(width, height); </script>

הפרמטרים width ו- height הם אופציונאליים (שלא חייבים להשתמש בהם) המציינים את הרוחב והגובה בתצוגה.
כדי לקבוע איזה תמונה תיטען בתוך האובייקט נשתמש בתכונה src של האובייקט :

1 2 3 4

<script language="JavaScript" type="text/JavaScript"> var MyImage = new Image(width, height); MyImage.src = "logo.jpg" </script>

וכמובן שאפשר ליצור תגית IMG עם ID ואז דרכה להשתמש בתכונות (שיפורטו בהמשך) של אובייקט התמונה :

1 2 3 4 5

<img src="banner.jpg" id="myImage" /> <script language="JavaScript" type="text/JavaScript"> var obj = document.getElementById("myImage"); Obj.src = "logo.jpg" </script>

תכונות האובייקט :

מסגרת – border

תכונה  המסמלת את עובי המסגרת של התמונה בפיקסלים. אם התמונה נוצרה ע"י הבונה של JS אז המסגרת שלה תהיה שווה 0.
תחביר :

1	ImageObj.border=1

completed

תכונה לקריאה בלבד שמקבלת ערכים בוליאניים (true/false) המסמלת האם התמונה סיימה לעלות או לא.
תחביר :

1 2 3

if(imageObj.completed){     //code }

גובה – height

תכונה המסמלת את גובה התמונה בפיקסלים. תמונה שנוצרה ע"י הבונה של JS מקבלת את הגובה האמיתי של התמונה ולא את של התצוגה
תחביר :

1	imageObj.height=45

רוחב – width

תכונה המסמלת את הרוחב של התמונה. תמונה שנוצרה ע"י הבונה של JS תקבל את הרוחב של התמונה במקור ולא בתצוגה
תחביר :

1	ImageObj.width=200

hspace

תכונה שמסמלת את המרחק בפיקסלים מימין ומשמאל לתמונה. תמונה שנוצרה ע"י הבונה של JS מקבלת ערך null בתכונה זו.
תחביר :

1	ImageObj.hspace=3

vspace

תכונה המסמלת את המרחק בפיקסלים מעל ומתחת לתמונה. תמונה שנוצרה ע"י הבונה של JS מקבלת ערכי Null בתכונה זו.
תחביר :

1	ImageObj.vspace=4

כתובת לרזולוציות נמוכות – lowsrc

תכונה המקבלת/מחזירה ערכי URL (כתובת) לרזולוציות נמוכות. הדפדפן קודם טוען את התמונה לרזולוציה הנמוכה ולאחר מכן אם יש צורך מחליף אותה לתמונה הרגילה.
תחביר :

1	ImageObj.lowsrc = "littleLogo.jpg"

שם – name

תכונה המסמלת את השם של התמונה (ערך ה-name בתגית ה-img). תמונה שנוצרה ע"י הבונה של JS מקבלת ערך null בתכונה זו.
תחביר :

1	ImageObj.name="MyImg"

כתובת – src

תכונה המקבלת/מחזירה ערכי URL (כתובת) של התמונה
תחביר :

1	ImageObj.src = "logo.jpg"

ארועים

על מנת להצהיר על פעולה מסויימת שתתבצע בזמן ארוע כלשהו על התמונה, נשתמש בתחביר הבא:

1	ImageObj.eventName = // statements

לדוגמא:

1 2 3

ImageObj.onerror = this.style.display="none" ImageObj.onclick = function(){alert("click!")}

דוגמא לשימוש במאפייני האובייקט

תכנות נעים!