در این آموزش به شما یاد میدهم که چطور تنها با استفاده از تکنیک های CSS لینک هایی داشته باشید که با بردن نشانگر ماوس روی آنها، یک عکس دلخواه به صورت پاپ آپ یا تولتیپ ظاهر شود. توجه کنید که این روش در همه مرورگرها و پلت فرم های مختلف بدون مشکل کار میکند چراکه در ساخت این بالون ها فقط از CSS و HTML استفاده خواهیم کرد و از کدهای جاوااسکریپ، جی کوئری و غیره هیچ خبری نیست!
● پسورد : www.websiteha.com
برای شروع باید لینک و تصویر مورد نظر خود را در ساختار زیر توسط کدهای HTML در صفحه وب سایت خود پیاده کنیم:
|
۱
۲
۳
۴
۵
|
<span> <img src="thumb.jpg" width="64" height="64" alt="sample" border="0"> </span></a> |
سپس باید یک کلاس CSS برای لینک مورد نظر به نام imPop به صورت زیر بنویسیم. همانطور که مشاهده میکنید در این کلاس از دو دستور position و z-index استفاده شده است. علت استفاده از این دوستور این است که می خواهیم لینک و تصویر مورد نظر در حالت عادی روی بقیه عناصر و محتوای صفحه قرار داشته باشد. یعنی زیر هیچ عنصری نباشند:
?
|
۱
۲
۳
۴
|
a.imPop { position:relative; z-index:20; } |
اکنون باید دستورات مربوط به رویداد Hover (رویدادی که هنگام بردن ماوس روی یک عنصر در صفحه رخ میدهد) را برای لینک مورد نظر بنویسیم :
|
۱
۲
۳
۴
|
a.imPop:hover { display:inline; z-index:30; } |
همانطور که مشاهده میکنید، مقدار دستور z-index افزایش یافته است. دلیل این افزایش این است که می خواهیم هنگام پاپ آپ، باز هم لینک و تصویر ما از موقعیت قبلی خود یک لایه بالاتر آمده و روی سایر لینک های پاپ آپ دار ظاهر شود. دستور display:inline هم برای اجرای صحیح دستورات در مرورگر IE بکار رفته است. حالا برای اینکه عکس مورد نظر در حالت عادی مخفی باشد، باید توسط دستور زیر عنصر span که عکس را در بر گرفته است، مخفی شود:
|
۱
۲
۳
|
a.imPop span { display:none; } |
در آخرین مرحله دستورات مربوط به رویدادی که هنگام بردن ماوس روی لینک باید اتفاق بیافتد را می نویسم. دستورات زیر هنگامی که ماوس را روی لینک ببریم، بر روی span در بر گیرنده عکس اعمال میشوند. در این بخش طول ،عرض و فاصله عکس مورد نظر را از بالا و سمت چپ تعیین می کنیم:
|
۱
۲
۳
۴
۵
۶
۷
۸
|
a.imPop:hover span { display:block; position:absolute; top:1em; left:1em; width:64px; height:64px; } |
