نمایش یک عکس بصورت پاپ آپ هنگام بردن ماوس روی لینک

در این آموزش به شما یاد میدهم که چطور تنها با استفاده از تکنیک های CSS لینک هایی داشته باشید که با بردن نشانگر ماوس روی آنها، یک عکس دلخواه به صورت پاپ آپ یا تولتیپ ظاهر شود. توجه کنید که این روش در همه مرورگرها و پلت فرم های مختلف بدون مشکل کار میکند چراکه در ساخت این بالون ها فقط از CSS و HTML استفاده خواهیم کرد و از کدهای جاوااسکریپ، جی کوئری و غیره هیچ خبری نیست!

مشاهده دمو پاپ آپ ساخته شده توسط css و html دانلود سورس کامل

● پسورد : www.websiteha.com

برای شروع باید لینک و تصویر مورد نظر خود را در ساختار زیر توسط کدهای HTML در صفحه وب سایت خود پیاده کنیم:

Sample  
     
        sample
    
 

سپس باید یک کلاس 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;  
} 

نظرات (23) -

  • Admin

    09/17/1390 09:50:32 ب.ظ | پاسخ به این نظر

    مرسی جناب اصلانی، این نظر لطف شماست، خوشحالم که مطالب مورد توجه واقع شده...

  • مهدی

    09/27/1390 10:41:10 ب.ظ | پاسخ به این نظر

    سلام اقای میرزایی میشه در مورد طراحی سایت در PHP هم تکنیک های آموزشی قرار بدهید با تشکر

  • Admin

    09/27/1390 10:52:11 ب.ظ | پاسخ به این نظر

    سلام مهدی جان
    والا من دات نت کار هستم اما مدتیه سوئیچ کردم روی php و CMS های مربوطه. ولی در کل دانشی که در طراحی سایت نیاز هست مثل CSS، HTML، فتوشاپ و جاوااسکریپت و ... محدودیت و مرزی در پلتفرم های مختلف نداره و این موارد در همه جا به یک شکل هست. پس شما اگر به این موارد آشنایی پیدا کنید، پلتفرم ها و CMS های مختلف براتون فرقی نخواهد داشت و کافیه بگردید و فایل های CSS رو پیدا کنید و قالب مورد نظرتون رو ایجاد کنید.
    با همه این احوال بزودی بخش در مورد CMS ها که اکثرا هم بر پایه php هستند باز خواهم کرد.
    موفق باشید.

  • Admin

    09/27/1390 10:56:34 ب.ظ | پاسخ به این نظر

    از همه دوستانی که به من لطف دارن خسرو، بهار عزیز، آقا قائم، مهدی جان و همه دوستانی که مطالب رو دنبال میکنند متشکرم.
    موفق باشید...

  • milad.sh

    10/01/1390 08:52:23 ب.ظ | پاسخ به این نظر

    salam mohammad jan man ye moshkele asasi to darje aks ha ya nemidunam to code neveshtana daram ke 2 rooze daram kalanjar miram ta ye menoye ofoghi tarrahi konam o ye aks to slidebar bezaram, khahesham ine ke ye amouzesh khoob(pdf) age dari baram send koni????
    mamnoon

  • مهدی

    10/19/1390 06:31:15 ب.ظ | پاسخ به این نظر

    سلام
    خسته نباشی
    ممنون از اطلاعات خوبتون
    اگه میشه ادامه آموزش CSS رو برام بفرستید/
    با تشکر

  • امیر

    11/13/1390 11:57:58 ب.ظ | پاسخ به این نظر


    دادا خدا خیرت بده من تو سایتم معرفی میکنم شاید تشکر کوچیکی کرده باشم
    amir-t.org/.../...%A7%DB%8C%D8%AA%D9%87%D8%A7.html

    • Admin

      11/14/1390 12:47:20 ب.ظ | پاسخ به این نظر

      مرسی امیر جان، تو "وبسایتها" دوستانی مثل شما باعث انگیزه مضاعف هستند. امیدوارم در آینده هم مطالب مفید واقع بشه و قدری وب پارسی سر و سامون پیدا کنه.
      منم سایت شمارو دیدم بسیار مطالب کاربردی نوشته اید. از این به بعد یکی از بازدیدکنندگان ثابت شما هستم.
      موفق باشید...

  • وحید

    11/16/1390 02:47:45 ب.ظ | پاسخ به این نظر

    سلام دوست عزیز این کدی که گذاشتین خیلی عالی بود ولی من دنبال یه کد دیگه هستم و هیچ جا هم نمیتونم پیداش کنم
    مثل همین کد شماست رو لینک کلیلک میکنه صفحه مثل یک پرده سیاه میشه و یه پنجره پاپ آپ باز میشه البته اون پنجره پاپ اپ عکس نیست یه تکست فیلد هست که اطلاعات بیشتر در مورد اون لینک توش نوشته میشه اگه امکان داره اون کد رو به ایمیلم ارسال کنید ممنون میشم یا اگه تو سایتتون من میام دانلود میکنم

  • زهرا

    11/24/1390 03:14:41 ق.ظ | پاسخ به این نظر

    سلام آقاي ميرزايي
    بابت زحماتي كه ميكشيد ،كلي تشكر
    فقط اگه لطف كنيد قسمت دوم آموزش css را در صورتي كه آماده شده بفرستيد
    قسمت اولش كه  عالي بود-
    نميدونم چطور تشكر كنم
    ولي بازم تشكر

  • Ehsan

    04/30/1391 07:01:29 ب.ظ | پاسخ به این نظر

    سلام خسته نباشید

    اگه امکانش هست همین آموزش واسه عکس هم بذارید
    من می خوام وقتی ماس روی یه عکس میره یه پاپ آپ باز بشه
    ممنون

  • آیدا

    06/29/1391 11:27:34 ق.ظ | پاسخ به این نظر

    آقا حامد بابت این مطالبتون خیلی ممنون
    خوشحالم که یه سایت ایرانی خوب تو این زمینه داریم
    مرسی

  • Mohammad

    07/28/1391 07:44:22 ب.ظ | پاسخ به این نظر

    سلام
    با تشکر از زحماتتان آقای میرزایی اگر میشود آموزش CSS ادامه بدید.

  • جلال

    12/07/1391 09:11:04 ب.ظ | پاسخ به این نظر

    سلام
    ممنون از آموزش ها
    فقط لبنک دمو خراب هست که ممنون میشم اون رو هم درست کنین .
    شاد باشین .

  • فرزانه

    03/09/1392 12:42:46 ب.ظ | پاسخ به این نظر

    سلام
    من امروز به لطف یکی از دوستان با این سایت آشنا شدم. واقعا که سایت عالیه.
    ممنون و موفق باشید

  • ابزار وبلاگ

    02/04/1394 02:17:44 ب.ظ | پاسخ به این نظر

    پیش نمایش هاتون کار نمیکنند به همین خاطر یه مقدار کار رو برامون سخت میکند لطفا بررسی کنید

Loading