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

<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>

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;
}
/*  */

xOffset = 10;
yOffset = -420;

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

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;
}