וובמאסטר - תיכנות ובניית אתרים

האובייקט Image

ניר/‏ 27 פברואר, 2004
F+
F-
לפעמים ברצונינו ליצור תמונה שצורה דינמית, בלי לכתוב את תגי ה-<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!")}

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



תכנות נעים!

תגיות: JS‏  /  Image‏  /  תמונה‏  /  אובייקט‏  /  דינאמי‏  

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

תגובות למאמר



תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות