פרק 21: מפת תמונות – Image Map

· הקדמה

· אופן יצירתו של Image Map

· דוגמה ליצירת Image Map

· תרגילים

הקדמה

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

אופן יצירתו של Image Map

כדי לייצור Image Map יש להוסיף אל מסמך ה-HTML את המרכיב MAP אשר כולל את תגית ההתחלה <MAP> ואת תגית הסיום </MAP>. כדי לאפיין שטח מסוים מתוך שטח התמונה כשטח שכל לחיצה עליו תפעל כלחיצה על קישור אשר מוביל ל-URL אחר יש להוסיף אל בין שתי תגיותיו של המרכיב MAP מרכיבים מסוג AREA.

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

אל תוך התגית <AREA> ניתן להוסיף מספר תכונות, ולקבוע באמצעותן את מאפייני השטח שיוצרים כדי שיפעל כקישור. התכונות, אשר ניתן להוסיף, כוללות את התכונות הבאות:

התכונה COORDS

ערכה של תכונה זו כולל אוסף של מספרי קואורדינטות אשר מציינים את המיקום של אותו שטח שפועל כקישור. אוסף המספרים אשר מופיע כשפסיקים מפרידים ביניהם מתאר את השטח בהתאם לצורתו:

אם רוצים לתאר שטח מלבני אז יש לקבוע את ערכה של התכונה COORDS כך שיהיה שווה למחרוזת תווים אשר כוללת ארבעה מספרים כשפסיקים מפרידים ביניהם: שני המספרים הראשונים יתארו את הקואורדינטות של הפינה השמאלית העליונה של המלבן, ושני המספרים שאחריהם יתארו את הקואורדינטות של הפינה הימנית התחתונה של המלבן. לדוגמא:

<AREA COORDS="20,40,100,60" HREF=" http://www.yahoo.com">

דוגמא זו מציגה תיאור של שטח מלבני אשר כל לחיצה עליו תגרום למעבר הדפדפן אל האתר של yahoo.com. רוחבו של המלבן המתואר הוא 80 פיקסלים, ואורכו 40. פינתו השמאלית של המלבן ממוקמת בנקודה שהקואורדינטות שלה הן (20,40).

אם רוצים לתאר שטח מעגלי אז יש לקבוע את ערכה של התכונה COORDS כך שיהיה שווה למחרוזת תווים אשר כוללת שלושה מספרים כשפסיקים מפרידים ביניהם: שני המספרים הראשונים יתארו את הקואורדינטות של מרכז המעגל והמספר השלישי יתאר את הרדיוס של המעגל. לדוגמא:

<AREA COORDS="120,160,100" HREF=" http://www.microsoft.com">

דוגמא זו מציגה שטח בצורת מעגל שמרכזו נמצא בנקודה (120,160) והרדיוס שלו הוא 100.

אם רוצים לתאר שטח בצורת פוליגון אז יש לקבוע את ערכה של התכונה COORDS כך שיהיה שווה למחרוזת תווים אשר כוללת בתוכה מספר זוגי של מספרים. כל זוג מספרים יתאר את הקואורדינטות של נקודה אחת מבין קודקודי הפוליגון. לדוגמא:

<AREA COORDS="100,100,150,50,200,100,200,400,100,400" HREF="http://www.yahoo.com">

דוגמא זו מציגה קישור לאתר של yahoo אשר מופעל על ידי לחיצה על שטח שצורתו דומה לבית.

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

התכונה HREF

ערכה של תכונה זו הוא URL (מלא או חלקי) או ציון מיקום מסוים במסמך באמצעות הסימן # כשאחריו שם המיקום שאליו הדפדפן ינוע. הלחיצה על השטח שנוצר באמצעות המרכיב AREA תגרום לדפדפן לעבור ולהציג את המסמך שה-URL נקבע כערכה של התכונה. תכונה זו נתמכת על ידי NetscapeNevigator החל מגרסה 2, ועל ידי Internet Explorer החל מגרסה 3.

התכונה NOHREF

בניגוד לשתי התכונות הקודמות, זוהי תכונה אופציונלית. תכונה זו – בהוסיפנו אותה אל תוך התגית <AREA> אנו קובעים כי השטח שהוגדר לא ישמש כקישור. תכונה זו לא מקבל אף ערך, ובעצם נוכחותה בלבד כדי לקבוע שהשטח האמור לא ישמש כקישור.

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

התכונה SHAPE

התפקיד של תכונה זו הוא להודיע לדפדפן על מספר הקואורדינטות שלהן עליו לצפות בתוך ערכה של התכונה COORDS. הערך שתכונה זו יכולה לקבל הינו אחת ממחרוזות התווים הבאות:

circle, poly, rect, polygon. קיימים מספר ערכים נוספים שניתן לתת לתכונה זו אך חלק מהם נתמכים רק על ידי אחד משני הדפפדנים הנפוצים: Internet Eexplorer ו- Netscape Nevigator.

התכונה TARGET

תכונה זו דומה בפעולתה לתכונה TARGET שניתן להוסיף אל תוך התגית <A> כאשר היא פועלת כקישור. תכונה זו נתמכת על ידי Netscape Nevigator החל מגרסה 2, ועל ידי Internet Explorer החל מגרסה 3.

אל תוך התגית <AREA> ניתן גם להוסיף שתי תכונות אשר באמצעותן ניתן לקבוע כי פקודות מסוימות ב-javaScript תתבצענה כתגובה לשני סוגי אירועים.

התכונה onMouseOver – בהוספתה אל תוך התגית <AREA> ניתן לקבוע שפקודות מסוימות תתבצענה כתגובה לכך שהמשתמש העביר את העכבר מעל אותו שטח שהוגדר.

התכונה onMouseOut – בהוספתה אל תוך התגית <AREA> ניתן לקבוע שפקודות מסוימות תתבצענה כתגובה לכך שהמשתמש העביר את העכבר אל מחוץ לגבולות השטח שהוגדר.

כדי שהגדרת המרכיבים MAP ו-AREA אכן תביא ליצירתו של ImageMap יש להוסיף אל תגית ה-IMG שמייצגת את התמונה אשר רוצים להפוך ל-ImageMap את התכונה USEMAP. את ערכה של התכונה הזו יש לקבוע כך שיהיה שווה לשם מרכיב ה-MAP שמתייחס אליו בתוספת התו '#' בתחילתו.

דוגמא ליצירת ImageMap

המסמך הבא מדגים את יצירתו של ImageMap.

<!-- file name : imageMapDemo.html -->

<!-- 2000(c) Zindell Publishing House Ltd. -->

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

<HTML>

<HEAD>

<TITLE>imageMapDemo.html</TITLE>

<SCRIPT LANGUAGE="javaScript1.2">

function setMsg(str)

{

document.myForm.tf.value = str;

}

</SCRIPT>

</HEAD>

<BODY>

<H1>Demo of an Image Map</H1>

<HR>

<IMG SRC="children.gif" USEMAP="#gardenMap">

<MAP NAME="gardenMap">

<AREA HREF="javascript:window.alert('HOUSE')"

COORDS="50,163,190,36,323,163,289,163,290,327,85,325,85,164"

SHAPE="poly"

onMouseOver="return setMsg('HOUSE')" onMouseOut="return setMsg('')">

<AREA HREF="javascript:window.alert('TREE')"

COORDS="494,325,494,205,406,183,386,110,421,53,508,23,593,35,639,80,645,148,587,197,528,204,530,327"

SHAPE="poly"

> onMouseOver="return setMsg('TREE')" onMouseOut="return setMsg('')"

</MAP>

<FORM NAME="myForm">

<BR><INPUT TYPE="text" SIZE="80" NAME="tf">

</FORM>

</BODY>

</HTML>

תרגילים

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

2000 © All the rights reserved to Haim Michael & Zindell Publishing House Ltd.

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