תצוגה מקדימה (Tooltip) של תמונה במעבר עכבר על קישור טקסטואלי / תמונה מוקטנת

 בפוסט הבא נלמד כיצד להציג תמונה בתצוגה מקדימה במעבר עכבר על קישור טקסטואלי או תמונה מוקטנת – Thumbnail, לפיצ'ר הבא יכולים להיות שימושים רבים בין אם רוצים להציג תמונת רקע של דף הבית אליו אתם מפנים
ללא צורך במעבר לקישור המדובר או בין אם אתם רוצים להציג גלריה של תמונות.

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

<h2>גלריית תמונות ללא כותרת טקסט</h2>

<ul>
<li><a href="11.jpg"><img src="1s1.jpg" alt="gallery thumbnail" /></a></li>
<li><a href="21.jpg"><img src="2s1.jpg" alt="gallery thumbnail" /></a></li>
<li><a href="31.jpg"><img src="3s1.jpg" alt="gallery thumbnail" /></a></li>
<li><a href="41.jpg"><img src="4s1.jpg" alt="gallery thumbnail" /></a></li>

</ul>
<br />

<h2>גלריית תמונות כולל כותרת טקסט</h2>

<ul>
<li><a href="11.jpg" title="נהרות המדבר"><img src="1s1.jpg" alt="gallery thumbnail" /></a></li>
<li><a href="21.jpg" title="דייג דגים"><img src="2s1.jpg" alt="gallery thumbnail" /></a></li>
<li><a href="31.jpg" title="שדה פינאלי"><img src="3s1.jpg" alt="gallery thumbnail" /></a></li>
<li><a href="41.jpg" title="סקי בדצמבר"><img src="4s1.jpg" alt="gallery thumbnail" /></a></li>
</ul>

הcss מכיל הגדרות עיצוב כלליות כמו מיקומים,כיוונים של שתי הרשימות שדיברנו עליהן סוג פונט ועוד, נציג בפניכם את הקוד במלואו אך הדגש הוא בעיצוב ה"מיכל" של התמונה שתוצג במעבר העכבר preview# :

body {
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}h1{
font-size:180%;
font-weight:normal;
color:#555;
text-align:right;
}
h2{
clear:both;
font-size:160%;
font-weight:normal;
color:#555;
margin:0;
padding:.5em 0;
direction:rtl;
text-align:right;
}
a {
text-decoration:none;
color:#f30;
}
p {
clear:both;
margin:0;
padding:.5em 0;
}

img {border:none;}
ul,li {
margin:0;
padding:0;
}
li {
list-style:none;
float:right;
display:inline;
margin-right:10px;
}

/*  */
#preview {
position:absolute;
border:2px solid #000;
background:#333;
padding:2px;
display:none;
color:#fff;
text-align:right;
}
/*  */

מה שנותר הוא לקשר את עמוד הHtml לשני עמודים:  main.js, jquery.js (עריכת הכותרת בתמונה נעשית בtitle בHtml)
כאשר העמוד היחידי שנבצע בו שינויים הקשורים למיקום התמונה המוצגת ביחס למיקום העכבר הוא עמוד main.js, להלן פיסת הקוד הקובעת את מיקום התמונה:

xOffset = 10;
yOffset = -420;

דמו I הורדה

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

<p>על מנת לראות את תמונת הקישור בתצוגה מקדימה עבור עם העכבר על הקישור הבא
<a href="ps_webmagazine1.jpg" rel="ps_webmagazine1.jpg">Webmagazine</a> </p>
<p>על מנת לראות תצוגה מקדימה כולל כותרת טקסטואלית עבור עם העכבר  על הקישור הבא
<a href="http://www.webmagazine.co.il" rel="ps_webmagazine1.jpg" title=" עיצוב אינטרנט">Webmagazine</a> </p>

כפי שציינו בסעיף הראשון הגדרות הcss פשוטות מאוד והדגש הוא בעיצוב ה"מיכל" של התמונה המוצגת, במקרה זה screenshot#

body {
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
h1 {
font-size:180%;
font-weight:normal;
color:#555;
direction:rtl;
}
h2 {
clear:both;
font-size:160%;
font-weight:normal;
color:#555;
margin:0;
padding:.5em 0;
}
a {
text-decoration:none;
color:#006699;
}
p {
clear:both;
margin:0;
padding:.5em 0;
direction:rtl;
}img {
border:none;
}
ul, li {
margin:0;
padding:0;
}
li {
list-style:none;
float:left;
display:inline;
margin-right:10px;
}
/*  */

#screenshot {
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}

כנ"ל לגבי כל השאר.
שימו לב! בשתי הדוגמאות גודל התמונה נקבע לפי הגודל של התמונה במקור, כפי שניתן לראות אין הגדרות רוחב/גובה למיכל התמונה.

דמו I הורדה