HTML/מפת תמונה: הבדלים בין גרסאות בדף
תוכן שנמחק תוכן שנוסף
שורה 32:
==יצירת מפת תמונה צד לקוח==
קודם כל ניצור
{{קוד מקור||קוד=
ראשית ניצור אלמנט map. חובה לתת לו את המאפיין id שכן נקרא לו מאלמנט img אחר כך. שנית, חשוב מאוד לתת לו את המאפיין name ושערכו יהיה זהה לזה של id בשל סיבות של תאימות לאחור.▼
<pre>
<h2> בחר את הצורה האהובה עליך! </h2>
<p><img src="Shapes.png" alt="מפת תמונה לבחירת צורה אהובה" /></p>
</pre>
}}
אחר כך ניצור את ה'''מפה'''. אוסף האיזורים והקישור מכל איזור.
▲
{{קוד מקור||קוד=
<pre>
<h2> בחר את הצורה האהובה עליך! </h2>
<map id="MyMap" name="My Map"> </map>▼
<p><img src="Shapes.png" alt="מפת תמונה לבחירת צורה אהובה" usemap="MyMap" /></p>
▲<map id="MyMap" name="My Map" > </map>
</pre>
}}
שורה 48 ⟵ 60:
* במאפיין '''href''' ניתן את הקישור שאליו אנחנו רוצים להפנות את המשתמש אם הוא לחץ על האיזור.
* אם אנחנו לא רוצים לקשר מהאזור, ניתן להשתמש במאפיין הבולאני '''nohref''' בצורה הזו: {{קוד בשורה||1=nohref="nohref"}}.
אלמנט area הוא אלמנט ריק.
{{קוד מקור||קוד=
<pre>
<h2> בחר את הצורה האהובה עליך! </h2>
<p><img src="Shapes.png" alt="מפת תמונה לבחירת צורה אהובה" usemap="MyMap" /></p>
<map id="MyMap" name="My Map">
<area shape ="rect" coords ="0,0,80,120" href ="מרובע.html" alt="מרובע" />
<area shape ="circle" coords ="100,55,18" href ="עיגול.html" alt="עיגול" />
<area shape ="poly" coords ="200,10,180,100,220,100" href ="משולש.html" alt="משולש" />
<area shape ="poly" coords ="130,55,160,0,170,90,170,200,160,250" href ="מצולע.html" alt="מצולע" />
<area shape ="default" href ="אחר.html" alt="אפשרות אחרת" />
</map>
</pre>
}}
בתוך אלמנט ה-map, מלבד אלמנטים מסוג area ניתן להכניס אלמנטים מסוג גוש. אלמנטים אלו נראים למשתמש במידה והדפדפן אינו תומך במפת תמונה! חשוב לשים בתוכם את הקישורים בצירוף הסבר מתאים!
{{קוד מקור||קוד=
<pre>
<h2> בחר את הצורה האהובה עליך! </h2>
<p><img src="Shapes.png" alt="מפת תמונה לבחירת צורה אהובה" usemap="MyMap" /></p>
<map id="MyMap" name="My Map">
<area shape ="rect" coords ="0,0,
<area shape ="circle" coords ="
<area shape ="
<area shape ="poly" coords ="130,55,160,0,170,90,170,200,160,250" href ="מצולע.html" alt="מצולע" />
<area shape ="default" href ="אחר.html" alt="אפשרות אחרת" />
<p> <a href="מרובע.html"> מרובעים </a> </p>
<p> <a href="עיגול.html"> עיגולים </a> </p>
<p> <a href="משולש.html"> משולשים </a> </p>
<p> <a href="מצולע.html"> מצולעים </a> </p>
<p> <a href="אחר.html"> אחר </a> </p>
</map>
</pre>
| |||