10 דומע - JavaScript ל ךירדמ IMAGE טקייבואה
תא תונשל ,תגצומה הנומתה ידמימ תא תונשל ןתינ ותרזעב .תונומתב לפטמ IMAGE טקייבואה
.תרחאב ףילחהל ןתינ המצע הנומתה תא וליפאו ,הביבסש לובגה יבוע
וא document.image... הרוצב ליחתי דימת ןכלו DOCUMENT לש טקייבוא-תת אוה הז טקייבוא
.המוד ןפואב
:דרפנב רטמרפ לכ סחייתי הילא הנומתה תא ואצמת ןלהלש םירטמרפה תלבט דיל
.םידבוע אל הדשל ךרע םיסינכמ םהבש םיטפירקסה פייקסטנבש בל ומיש
.פייקסטנב תוארנ ןניא lowsrc ה תמגודבש BMP ה תונומת ,ןכ ומכ
.םילסקיפב הנומתה לובג
:הז אוה רותפכה תא רצויה דוקה
<form name=f1>
<input type=button value="Check border" onClick="window.status=
'The border is '+document.image1.border+' pixels wide.'">
</form>
.דצבש הנומתל יתתנש םשה אוה image1 רשאכ
BORDER ה תא תונשל רמולכ ,הכופהה הלועפה תא עצבל םג ןתינ
:אבה ןפואב לשמל .טפירקסה ךותמ
רותפכה לא התע ורזח ,לובגה יבוע תא םתינישו רפסמ םתסנכה םא
.םתתנש ךרעה אוה התע עיפויש ךרעהש וארו םדוקה טפירקסהמ
:אוה לובגה יוניש תא רשפאמה ספוטה תא רצויש דוקה
<form name=f2>
<font color=mediumvioletred>
<input type=text name=text size=2>
<input type=button value="Change border"
onClick="document.image1.border=document.f2.text.value">
</form>
.פייקסטנב שבתשי אוהש ןוויכמ תירבעב טסקטה תא דוקל יתסנכה אל
border
םייס ןפדפדה םא רמואה (true/false) ינאילוב ךרע והז
.הנומתה תא תולעהל
ידי לע גצותש הנומתה תעבקנ ובש טפירקס םכינפל
הנומתה םא ונל רמאי ןותחתה רותפכה .רחבנש וידרה רותפכ
םירקמב שמתשהל ןתינ COMPLETE רטמרפב .ןפדפדה לע תולעל המייס
םירחא םירבד ליעפהל םיצורו "תודבכ" תונומת םע םידבוע ונאש
.התומלשב הנומתה התלע אל דוע לכ
:COMPLETE קדובו תונומת ףילחמה טפירקסה תא רצויש דוקה
<form name=f3>
:הנומת רחב<BR>
<INPUT TYPE="radio" NAME="imageChoice" VALUE="image1" CHECKED
onClick="document.images[1].src='emaila.gif'">Email<BR>
<INPUT TYPE="radio" NAME="imageChoice" VALUE="image2"
onClick="document.images[1].src='searcha.gif'">Search<BR>
<INPUT TYPE="radio" NAME="imageChoice" VALUE="image3"
onClick="document.images[1].src='linksa.gif'">Links<BR>
<INPUT TYPE="button" VALUE="Is the image completely loaded?"
onClick="window.status='The value of the complete property is '
+ document.image2.complete">
</form>
complete
:BORDER רטמרפה לש ןורקיע ותוא לע
:יוצרה ךרעה תא עובקל םג ןתינו
.BORDER םוקמב HEIGHT תא יתמש קר .הלעמלש הלאל םיהז םה םידוקה
height
.הלאמשמ וא הנימימש טסקטה ןיבל הנומתה הצק ןיבש קחרמה תא עבוק
:הידיצ ינשמ טסקטו הנומתה םכינפל
Text on the left Text on the right
,טסקטה ןיבל הנומתה ןיב קחרמה תא תונשל תנמ לע
.BORDER םוקמב HSPACE תא יתמש קר .הלעמלש הלאל םיהז םה םידוקה
hspace
הנומת תולעהל ןתינ ,דאמ תודבכ תונומת םע םידבוע רשאכ
,רתוי הבוטה הנומתה תא טאל טאל דירוהל הילע זאו ,העורג תוכיאב
.הלוע ףדהש ןמזב קיר ךסמב טיבמ ונניא שלוגה ךכ .רתוי הדבכ םג איהש
.העורגה תוכיאב רחביתש הנומתה תא רידגמ הזה רטמרפה
.JPG ו BMP םיטמרופב ,תונומת יתשב תשמתשמ ינא הז הרקמב
ילוא - טנרטניאה לש הבוגתה ינמזב לבא ,תיסחי תונטק תונומתה םנמא
:טפירקסה לש דוקה .לוחכל םודאמ רבעמה ןמזב ,יונישה תא וארת
<SCRIPT>
function displayImage(lowRes,highRes)
{
document.images[4].lowsrc=lowRes
document.images[4].src=highRes
}
</SCRIPT>
<FORM NAME="form1">
<INPUT TYPE="radio" NAME="imageChoice" VALUE="image1" CHECKED
onClick="displayImage('low.jpg','low.bmp')">Blue<BR>
<INPUT TYPE="radio" NAME="imageChoice" VALUE="image2"
onClick="displayImage('low1.jpg','low1.bmp')">Red<BR>
<img src="low.bmp" lowsrc="low.jpg" name="image5">
</FORM>
lowsrc
:אוה טפירקסה לש דוקה
<form name=checkName>
<input type=button value="Check name" onClick="window.status=
'The image name is : '+document.images[5].name+'.'">
</form>
:הנומתה דוקו
<img src=../net.gif name="Clock Image" height=40 width=40>
.ךמסמב תונומתה לכ תא ליכמה ךרעמב יתשמתשה ןאכ
המשל סחייתמ document.images[5].name טנמלאה ,דוקב וארתש יפכ
בותכל יתלוכי אל .(0-מ רופסל םיליחתמ) ךמסמב תישישה הנומתה לש
יאש ןוויכמ ,הנומת התואל קוידב עיגהלו document.Clock Image.name
.האיגש תעדוהל םרוג הז .טפירקסה ךותב הנומתה םשב חוור היהיש רשפא
name
.התוא ליכמה ץבוקה תא רמולכ ,הנומתה לש רוקמה תא עבוק הז רטמרפ
:םוקימ ותואב תונומת ןיב ףליחהל ידכ וב שמתשהל ןתינ
:אוה הריחבה תבית לש טפירקסה
ןועש ררולפסקא :וידר ירותפכב
:טסקט תביתב וא
net.gif, ie.gif, emaila.gif, door.jpg :לשמל ויהי םיליבק םיכרע
:טסקטה תבית לשו וידרה ירותפכ לש טפירקסה
<form name=radio>
ןועש <input type=radio name=x1 onClick="document.image8.src='net.gif'">
ררולפסקא <input type=radio name=x1 onClick="document.image8.src='ie.gif'">
:וידר ירותפכב
<BR><BR>
<input type=text name=text size=10>
<input type=button value="Change image"
onClick="document.image8.src=document.radio.text.value">
</form>
.ןיקת ומצע טפירקסה ךא ,פייקסטנב שבושמ האריי תירבעב טסקטה
src
:BORDER רטמרפה לש ןורקיע ותוא לע
רותפכה לע וצחלת רשאכ
.היתחתמו הילעמש טסקטה ןמ הנומתה קחרמ תא רב-סוטטסה הארי
:יוצרה ךרעה תא עובקל םג ןתינו
Text above the image
Text under the image
.רותפכה לע וצחלו הדשב רפסמ וסינכה -
.BORDER םוקמב WIDTH תא יתמש קר .הלעמלש הלאל םיהז םה םידוקה
vspace
:BORDER רטמרפה לש ןורקיע ותוא לע
רותפכה לע וצחלת רשאכ
.הנומתה בחור תא רב-סוטטסה הארי
:יוצרה ךרעה תא עובקל םג ןתינו
.רותפכה לע וצחלו הדשב רפסמ וסינכה -
.BORDER םוקמב WIDTH תא יתמש קר .הלעמלש הלאל םיהז םה םידוקה
width
:IMAGE טקייבואה לש םיעוריא ילהנמל המגוד
.רגסיהל שקבי ןולחה ,הנומתה לע וצחלת םא
הנומתה ןמ ודרת רשאכו ,"Clock Image" רסמה רב-סוטטסב עיפוי הנומתה לעמ רבכעה םא :ררולפסקאב
.םלעיי רסמה
:םיטקפאהו הנומתה לש דוקה
<img src=door.jpg name="image10"
onMouseOver="status='Clock Image'"
onMouseOut="status=''"
onMouseDown="top.close()">
.שדח ןולחב חתפית איה הנומתה לע וקילקת םא :איה תרחא תורשפא
:הז אוה הנומתה לש דוקה
<img src=rain.gif name="image10"
onMouseDown="window.open('./java/rain.gif','','height=120,width=170')">