» נושאי לימוד
» נושאי לימוד
יום שישי 29 במרץ 2024
העצם OnMouseOver
דף ראשי  בניית אתרים  ג'אווה סקריפט  העצם OnMouseOver גרסה להדפסה

העצם  OnMouseOver                   

הדוגמאות הבאות ממחישות את השימוש בג'אווה סקריפט למימוש פעולות בזמן מעבר העכבר על טקסט או אזור מסוים בדף.

 

דוגמא עבור קישור

עמוד עם סמן העכבר כאן, ובדוק מה קורה ב'שורת המצב'     (status bar) למטה.

אפקט זה נוצר ע"י קוד הג'אווה סקריפט הבא(הקוד מסומן בכתום):

 

  <A HREF="" 
  
onMouseOver="window.status='?שלום, מה נשמע'; 
   return true;"
>here</A> 

 

הערות:

1. הערך של = onMouseOver מסמן את הפעולה שתתבצע כשסמן העכבר ימוקם מעל לקישור. במקרה שלנו, ההודעה    " שלום, מה נשמע?" מוצגת. שים לב שההודעה נמצאת בתוך מרכאות (') והיא חלק מטקסט המופיע במרכאות כפולות (") שמכיל את הערך המוכנס לתוך onMouseOver .


2. ההודעה מוצגת בשורת המצב בשל הופעת הביטוי window.status .


3. הקוד הזה מהווה דוגמא לקוד ג'אווה סקריפט שלא חייב להופיע בתוך תג ה <script> .


דוגמא עבור תמונה/מפה

התמונה הבאה יוצרת מפה עם 4 אזורים שונים. כל אזור (מסומנים מ 1 עד 4) הוא קישור שנפתח בהקלקה על העכבר. בנוסף, כל כניסה לאחד מארבעת האזורים גורמת לשינוי מעניין בדף, נסה וראה מה קורה.

 

 

 

 

 

הקוד מאחורי התמונה הוא:

 

<center>
<img src="map.gif" usemap="#mymap" border=0>
    <MAP NAME="mymap">
    <AREA NAME="Area1" COORDS="0,0,116,54" 
   HREF=
/websites/files/webteacher/mouse1.htm
   
onMouseOver="document.bgColor='#000000';
     document.fgColor='#FFFFFF'"
>
    <AREA NAME="Area2" COORDS="116,0,232,54" 
   HREF=
/websites/files/webteacher/mouse2.htm
  
   
onMouseOver="document.bgColor='#FFFF00'">
    <AREA NAME="Area3" COORDS="232,0,348,54" 
   HREF=
/websites/files/webteacher/mouse3.htm
 
  
  onMouseOver="document.bgColor='#00FF00'">
    <AREA NAME="Area4" COORDS="348,0,468,54" 
   HREF=
/websites/files/webteacher/mouse4.htm 
    onMouseOver="document.bgColor='#FFFFFF';
     document.fgColor='#000000'"
>
    </MAP>
</center>
    

 


הערות:

 

1. התג  <MAP> הוא תג HTML שהוספו לו אלמנטים של ג'אווה סקריפט (מסומנים בכתום) ותפקידו ליצור אצל הלקוח את המפה שראינו (image map) .


2. התג <AREA> מסמן אזור נפרד במפה.התג <COORDS> נותן קוארדינטות לפיהן יש לחלק את המפה לאזורים.


3. הביטוי onMouseOver גורם לפעולה כלשהי בזמן שסמן העכבר עובר מעל אזור מסוים בדף.  הביטוי document.bgColor מחילף את צבע הרקע לכל אחד מארבעת האזורים במפה. מעבר על האזור הראשון והאחרון יגרום, בחלק מהדפדפנים, לשנוי צבע החזית בנוסף לרקע.באתר שלנו, מסיבות של התאמה צבע הרקע לא משתנה, אך אם תנסה זאת על דף הבית שלך, תראה את התוצאות

 



אם תקליק על אחד מאזורי המפה  שלמעלה תגיע לדף בו יש קישור חזרה לדף זה.

 

<a href="javascript:history.back()">חזור למעל"ה</a>

 

אתה יכול לראות שהקוד משתמש פה במתודה () back שהיא חלק מעצם (אובייקט) של ג'אווה סקריפט בשם history.
בשל השימוש ב "פרוטוקול" javascript, אפשר להתייחס ל   ()back כאל URL, אך מכיוון שלחיצה על הקישור מפעילה בעצם קוד ג'אווה סקריפט, זה נקרא פסאדו url שנראה דוגמאות נוספות ממנו בהמשך.

 

 


 

 16-02-04 / 18:00  עודכן ,  23-09-03 / 14:07  נוצר ע"י עזרא גנוט  בתאריך 
 OnLoad ו OnUnLoad - הקודםהבא - חישובים מתמטיים וטפסים 
תגובות הקוראים    תגובות  -  0
דרכונט
מהי מערכת הדרכונט?
אינך מחובר, להתחברות:
דוא"ל
ססמא
נושאי לימוד
חיפוש  |  לא פועל
משלנו  |  לא פועל
גולשים מקוונים: 5