האובייקט Image

‏ • 27 בפברואר, 2004

לפעמים ברצונינו ליצור תמונה שצורה דינמית, בלי לכתוב את תגי ה-<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!”)}


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



תכנות נעים!

תגיות: , , , ,

תגובות בפייסבוק