המדריך הישראלי ל-JavaScript, פרק 20

פרק 20: האובייקט Image

· הקדמה

· התכונות שקיימות באובייקט Image

· ה-Event Handlers שקיימים באובייקט Image

· תרגילים

הקדמה

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

באובייקט Image שנוצר קיימות תכונות אשר מאפשרות לנו להחליף את התמונה המוצגת על ידי מרכיב ה-HTML בתמונה אחרת (שימוש שכיח באפשרות זו הוא ביצירתה של תמונה אשר נראית ככפתור לחיץ, ושמתחלפת לתמונה אחרת כאשר העכבר נמצא מעליה וכאשר המשתמש לוחץ עליה עם העכבר). האובייקט Image נתמך על ידי Internet Explorer החל מגרסה 3, ועל ידי Netscape Nevigator החל מגרסה 3.

אובייקט נוסף שייסקר בפרק זה הוא האובייקט Area אשר נוצר על ידי הדפדפן כדי לייצג את תגית ה-Area במסמך ה-HTML.

האובייקט Area נתמך על ידי על ידי Internet Explorer החל מגרסה 3, ועל ידי Netscape Nevigator החל מגרסה 2.

התכונות שקיימות באובייקט Image

בחלק זה ייסקרו התכונות שקיימות באובייקט Image.

התכונה src

תכונה זו מכילה מחרוזת תווים אשר מתארת את ה-URL של התמונה המוצגת. תכונה זו נתמכת על ידי Netscape Nevigator החל מגרסה 3, ועל ידי Internet Explorer החל מגרסה 3. תכונה זו איננה read only, וניתן לשנות את ערכה ובכך לגרום לאובייקט ה-Image שנתון להציג תמונה אחרת. בדוגמא האחרונה שהוצגה בפרק הקודם הוצגה האפשרות לשנות את התמונה שמוצגת על ידי מרכיב IMG במסמך כתגובה למעבר העכבר מעל התמונה וכתוצאה מלחיצה על העכבר כאשר הוא מצביע עליה.

הודות לקיומה של תכונה זו ניתן ליצור אובייקט חדש מטיפוס Image, מבלי שייצג מרכיב מסוג IMG במסמך ה-HTML, ולקבוע את ערכה של התכונה SRC אשר קיימת בו כך שיהיה שווה ל-URL תמונה כלשהי. בדרך זו, ניתן להעלות אל הזיכרון של הדפדפן קבצי תמונה מבלי להציגם באופן מיידי, וכך ניתן להחליף את תמונה שמוצגת על ידי מרכיב ה-IMG במסמך מבלי שהמשתמש יצטרך להמתין עד לטעינתה של התמונה החדשה לדפדפן.

התכנית הבאה מציגה את האפשרות לטעון אל זיכרון הדפדפן תמונות מבלי להציגן בשלב ראשוני, ולהציגן רק בהמשך כתגובה למעבר העכבר מעל התמונה וכתגובה ללחיצה על העכבר כאשר הוא מצביע עליה (על התמונה). כדאי לשים לב לשימוש שנעשה ב-constructor כדי לייצור אובייקט Image אשר מייצג תמונה בממדים מסוימים.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

<TITLE>preLoadingImgDemo.html</TITLE>

pubOver = new Image(160,80);

pubClick = new Image(160,80);

webOver = new Image(160,80);

webClick = new Image(160,80);

softOver = new Image(160,80);

softClick = new Image(160,80);

trainOver = new Image(160,80);

trainClick = new Image(160,80);

aboutOver = new Image(160,80);

aboutClick = new Image(160,80);

pubDefault = new Image(160,80);

webDefault = new Image(160,80);

softDefault = new Image(160,80);

trainDefault = new Image(160,80);

aboutDefault = new Image(160,80);

function loadingPic1()

{

pubDefault.src = "pubDefault.gif";

webDefault.src = "webDefault.gif";

softDefault.src = "softDefault.gif";

trainDefault.src = "trainDefault.gif";

aboutDefault.src = "aboutDefault.gif";

document.pub.src = pubDefault.src;

document.web.src = webDefault.src;

document.soft.src = softDefault.src;

document.train.src = trainDefault.src;

document.about.src = aboutDefault.src;

}

function loadingPic2()

{

pubOver.src = "pubOver.gif";

pubClick.src = "pubClick.gif";

webOver.src = "webOver.gif";

webClick.src = "webClick.gif";

softOver.src = "softOver.gif";

softClick.src = "softClick.gif";

trainOver.src = "trainOver.gif";

trainClick.src = "trainClick.gif";

aboutOver.src = "aboutOver.gif";

aboutClick.src = "aboutClick.gif";

}

</SCRIPT>

</HEAD>

<H1>Demo of preloading images</H1>

<HR>

<A HREF="publishing.html"

onMouseOver="document.pub.src=pubOver.src;return true"

onMouseDown="document.pub.src=pubClick.src;return true"

onMouseOut="document.pub.src=pubDefault.src;return true">

<BR>

<A HREF="websiteDev.html"

onMouseOver="document.web.src=webOver.src;return true"

onMouseDown="document.web.src=webClick.src;return true"

onMouseOut="document.web.src=webDefault.src;return true">

<BR>

<A HREF="softwareDev.html"

onMouseOver="document.soft.src=softOver.src;return true"

onMouseDown="document.soft.src=softClick.src;return true"

onMouseOut="document.soft.src=softDefault.src;return true">

<BR>

<A HREF="trainingServices.html"

onMouseOver="document.train.src=trainOver.src;
return true"

onMouseDown="document.train.src=trainClick.src;
return true"

onMouseOut="document.train.src=trainDefault.src;
return true">

<BR>

<A HREF="about.html"

onMouseOver="document.about.src=aboutOver.src;
return true"

onMouseDown="document.about.src=aboutClick.src;
return true"

onMouseOut="document.about.src=aboutDefault.src;
return true">

<BR>

</BODY>

</HTML>

כפי שניתן להבחין, בתכנית זו מתבצעת טעינה של התמונות בשתי קבוצות. קבוצת התמונות הראשונה שנטענת היא קבוצת התמונות שצריכות להופיע כאשר המסמך מוצג לראשונה. קבוצת התמונות השניה שנטענת לדפדפן היא קבוצת התמונות שאמורות להופיע לאחר מכן במקום התמונות שנטענו לראשונה, כתגובה לאירועים שנוצרים כאשר המשתמש מעביר את העכבר מעל כל אחת מהתמונות ו/או לוחץ על העכבר כאשר הוא מצביע עליהן. באמצעות טכניקה זו, המשתמש לא צריך להמתין לטעינתן של התמונות שאמורות להופיע במקום התמונות שכבר מופיעות. כאשר קובעים את ערכה של התכונה SRC כך שיהיה שווה ל-URL של קובץ שמתאר תמונה אחרת, הממדים של התמונה שתוצג יהיו זהים לממדי התמונה שהוצגה לפני כן.

הדוגמא הבאה מציגה את האפשרות להשתמש בתכונה SRC כדי להציג פרסומת מסוג banner אשר תתחלף בפרסומת אחרת כל X שניות.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

<TITLE>bannerDemo.html</TITLE>

var i=0;

var bannerVec = new Array(6);

var index;

var intervalId;

for (index=0; index<bannerVec.length; index++)

{

bannerVec[index] = new Image(240,80);

bannerVec[index].src = "banner"+index+".gif";

}

function startBanning()

{

intervalId = setInterval("changeBanner()",4000);

}

function stopBanning()

{

clearInterval(intervalId);

}

function changeBanner()

{

i++;

if(i==bannerVec.length)

i=0;

document.bannerImg.src = bannerVec[i].src;

}

</SCRIPT>

</HEAD>

<BODY>

<H1>Demo of a simple banner</H1>

</FORM>

</BODY>

</HTML>

התכונות border, height, hspace, name, vspace ו- width

תכונות אלה זהות בשמן לשמות של תכונות אשר ניתן להוסיף אל תוך התגית <IMG> במסמך ה-HTML. תכונות אלה הן read-only, וכל אחת מהן מאפשרת גישה לערכה של התכונה המתאימה במסמך ה-HTML. תכונות אלה נתמכות על ידי Internet Explorer החל מגרסה 4, ועל ידי Netscape Nevigator החל מגרסה 3.

התכונה complete

תכונה זו מכילה בתוכה ערך בוליאני שמשמעותו האם התמונה נטענה במלואה. באמצעות פניה לערכה של תכונה זו ניתן לדעת האם טעינת התמונה הסתיימה. התכונה נתמכת על ידי Internet Explorer החל מגרסה 4, ועל ידי Netscape Nevigator החל מגרסה 3. כפי שיוצג בהמשך, קיימת האפשרות לציין בתוך תגית ה-IMG במסמך ה-HTML את התכונה LOWSRC אשר מכילה את ה-URL של תמונה באיכות נמוכה יותר אשר נטענת לפני התמונה העיקרית (SRC). אם תגית ה-<IMG> כוללת גם את התכונה SRC וגם את התכונה LOWSRC אז ערכה של התכונה complete יהיה true כבר מיד לאחר טעינתה של התמונה שצוינה באמצעות התכונה LOWSRC.

כיוון שתכונה זו לא פועלת תמיד על פי הצפוי לא מומלץ להשתמש בה.

התכונה lowsrc

אל תוך תגית ה-<IMG> במסמך ה-HTML ניתן להוסיף את התכונה LOWSRC, ולקבוע את ערכה כך שיהיה שווה ל-URL של תמונה ראשונה שתעלה ותתפוס את מקומה של התמונה השניה עד אשר תסתיים טעינתה. באמצעות התכונה LOWSRC ניתן לקבוע כי עד שתסתיים התמונה שאמורה להופיע, תוצג תמונה אחרת (התמונה הראשונה) באיכות נמוכה יותר (כלומר, זמן טעינה נמוך יותר). התכונה lowsrc שקיימת באובייקט Image מתארת את ערכה של התכונה lowsrc שהוספה אל תוך התגית <IMG> במסמך ה-HTML. תכונה זו נתמכת על ידי Internet Explorer החל מגרסה 4, ועל ידי Netscape Nevigtator החל מגרסה 3. התכונה lowsrc אשר קיימת באובייקט Image היא read-only, כלומר, ניתן לקבל את ערכה אך לא ניתן לשנותו.

התכונות x ו- y

תכונות אלה מכילות את הקואורדינטות של הפינה השמאלית העליונה של התמונה אשר מיוצגת על ידי אובייקט ה-Image. שתי התכונות הללו הן read-only, כלומר, ניתן לקבל את ערכן אך לא ניתן לשנותו. תכונה זו נתמכת על ידי Netscape Nevigator החל מגרסה 4, והיא איננה נתמכת על ידי Internet Explorer. התכנית הבאה מדגימה את שתי התכונות הללו בפעולה.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

<TITLE>xyAttributesDemo.html</TITLE>

function setMsg()

{

var x,y;

x=document.pic.x;

y=document.pic.y

document.myForm.tf.value = "The picture is in

("+x+","+y+")";

}

</SCRIPT>

</HEAD>

<BODY>

<H1>Demo of the x any y attributes</H1>

<HR>

<HR>

</FORM>

</BODY>

</HTML>

ה-Event Handlers שקיימים באובייקט Image

בחלק זה של הפרק אסקור את ה-events אשר יכולים להתרחש בתמונות שמיוצגות באמצעות האובייקט Image ואת אופן הטיפול בהם.

onAbort ו- onError

באמצעות הוספת התכונה onError אל תוך התגית <IMG> וקביעת ערכה כך שיהיה שווה ל-פקודה/פקודות ב-javaScript ניתן לגרום לכך שאותה/אותן פקודה/ות תתבצע/נה כאשר מתרחשת תקלה שמונעת את השלמת טעינתה של התמונה לדפדפן ואת הצגתה.

באמצעות הוספת התכונה onAbort אל תוך התגית <IMG> וקביעת ערכה כך שיהיה שווה לפקודה/פקודות ב-javaScript ניתן לגרום לכך שאותה/אותן פקודה/פקודות תתבצע/נה כאשר המשתמש לוחץ על הכפתור stop של הדפדפן.

שתי התכונות הללו נתמכות על ידי Netscape Nevigator החל מגרסה 3, ועל ידי Internet Explorer החל מגרסה 4.

onLoad

בכל אחד משלושת המצבים הבאים נוצר ונשלח אל האובייקט Image האירוע load:

1. כאשר מסתיימת טעינתה של התמונה שצוינה בתכונה LOWSRC.

2. כאשר מסתיימת טעינתה של התמונה שצוינה בתכונה SRC (כאשר התכונה LOWSRC לא קיימת).

3. כאשר מסתיימת טעינתו של כל אחד מה-frames שמרכיבים תמונת אנימציה מסוג gif.

בכל אחד משלושת המקרים הללו נוצר האירוע load. באמצעות הוספת התכונה onLoad אל תוך התגית <IMG> במסמך ה-HTML ניתן לגרום לפקודות שיקבעו כערכה של התכונה onLoad לפעול כתגובה להיווצרות האירוע.

התכונה onLoad נתמכת על ידי Internet Explorer החל מגרסה 4, ועל ידי Netscape Nevigator החל מגרסה 3.

תרגילים

1. כתוב/כתבי מסמך ב-HTML אשר יציג למשתמש קבוצה של כפתורי רדיו אשר כל לחיצה על כל אחד מהם בנפרד תגרום להצגת תמונה אחרת במרכזו של המסמך.

No parts of the contents of this paper may be reproduced or transmitted in any form by any means

without the written permission of the publisher ! This book can be used for personal use only !!!

Brought to you by Zindell

(http://www.zindell.com)

לנוחיותך, להלן תוכן העניינים של הספר:

פרק 1 : הבסיס
פרק 2 : ערכים בסיסיים
פרק 3 : אופרטורים
פרק 4 : משפטי בקרה ולולאות
פרק 5 : פונקציות
פרק 6 : אובייקטים
פרק 7 : אובייקטים מובנים בשפה
פרק 8 : אופן פעולת האובייקטים
פרק 9 : תבניות טקסט
פרק 10 : שילוב של JavaScript ו- HTML
פרק 11 : טיפול באירועים
פרק 12 : האובייקטים שנוצרים בדפדפן
פרק 13 : האובייקט Navigator
פרק 14 : האובייקט Window
פרק 15 : האובייקט Document
פרק 16 : האובייקט Location
פרק 17 : האובייקט History
פרק 18 : יצירת cookies
פרק 19 : האובייקטים Link ו- Anchor
פרק 20 : האובייקט Image
פרק 21 : יצירת Image Map
פרק 22 : האובייקט Form
פרק 23 : טכנולוגית ה- LiveConnect