پرش به محتوا

نقاط روی عکس - فراغیب

از فراغیب
→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۱: خط ۱:
 
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<html lang="fa" dir="rtl">
<head>
<head>
خط ۶: خط ۶:
     <title>ست نخی تابستانه - پوشاک سجاد</title>
     <title>ست نخی تابستانه - پوشاک سجاد</title>
     <style>
     <style>
         /* کانتینر اصلی تصویر تعاملی */
         /* تنظیمات پایه */
        * { box-sizing: border-box; }
 
         .interactive-image {
         .interactive-image {
             position: relative;
             position: relative;
             width: min(100%, 800px);
             width: min(100%, 800px);
             margin: 40px auto;
             margin: 40px auto;
             font-family: Tahoma, Arial, sans-serif;
             font-family: iransans, Arial, sans-serif;
             isolation: isolate;
            /* ایجاد یک محیط لایه‌بندی جدید */
             isolation: isolate;  
         }
         }


        /* تصویر اصلی */
         .interactive-image__main {
         .interactive-image__main {
             display: block;
             display: block;
خط ۲۱: خط ۲۳:
             height: auto;
             height: auto;
             border-radius: 14px;
             border-radius: 14px;
             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
         }
         }


         /* نگهدارنده دکمه نقطه و کادر اطلاعات برای مدیریت هاور تعاملی */
         /* نگهدارنده نقطه و کارت */
         .hotspot-wrapper {
         .hotspot-wrapper {
             position: absolute;
             position: absolute;
             left: var(--x);
             left: var(--x);
             top: var(--y);
             top: var(--y);
             z-index: 10;
            /* Z-index پایین در حالت عادی */
            z-index: 5;
        }
 
        /* افزایش اولویت لایه هنگام هاور شدن */
        .hotspot-wrapper:hover {
             z-index: 100; /* این باعث می‌شود کادر روی همه نقاط دیگر قرار بگیرد */
         }
         }


         /* استایل نقطه تعاملی (بدون موشن) */
         /* استایل نقطه قرمز */
         .image-hotspot {
         .image-hotspot {
             width: 20px;
             width: 20px;
خط ۳۹: خط ۴۷:
             border: 3px solid #ffffff;
             border: 3px solid #ffffff;
             border-radius: 50%;
             border-radius: 50%;
             background-color: #e11d48; /* قرمز */
             background-color: #e11d48;
             cursor: pointer;
             cursor: pointer;
             transform: translate(-50%, -50%); /* تراز دقیق مرکز */
             transform: translate(-50%, -50%);
             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
             display: block;
             display: block;
         }
         }


         /* استایل کادر اطلاعات (پاپ‌آپ) */
         /* استایل کادر اطلاعات */
         .hotspot-card {
         .hotspot-card {
            box-sizing: border-box;
             position: absolute;
             position: absolute;
             bottom: calc(100% + 12px); /* نمایش در بالای نقطه */
             /* نمایش کادر زیر نقطه برای جلوگیری از بیرون زدگی از بالای تصویر */
            top: calc(100% + 15px);  
             left: 50%;
             left: 50%;
             transform: translateX(-50%) translateY(10px);
             transform: translateX(-50%) translateY(-10px);
             width: 240px;
             width: 260px;
             background: #ffffff;
             background: #ffffff;
             border-radius: 12px;
             border-radius: 12px;
             box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
             box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
             padding: 10px;
             padding: 12px;
             visibility: hidden;
             visibility: hidden;
             opacity: 0;
             opacity: 0;
             transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
             transition: all 0.3s ease;
            z-index: 20;
             pointer-events: none;
             pointer-events: none; /* غیرفعال در حالت عادی جهت جلوگیری از تداخل */
             display: flex;
             display: flex;
             flex-direction: column;
             flex-direction: column;
         }
         }


         /* فلش کوچک زیر کادر */
         /* مثلث کوچک بالای کادر */
         .hotspot-card::after {
         .hotspot-card::before {
             content: '';
             content: '';
             position: absolute;
             position: absolute;
             top: 100%;
             bottom: 100%;
             left: 50%;
             left: 50%;
             transform: translateX(-50%);
             transform: translateX(-50%);
             border-width: 8px;
             border-width: 10px;
             border-style: solid;
             border-style: solid;
             border-color: #ffffff transparent transparent transparent;
             border-color: transparent transparent #ffffff transparent;
         }
         }


         /* نمایش کادر هنگام هاور کردن روی wrapper */
         /* نمایش کادر با هاور */
         .hotspot-wrapper:hover .hotspot-card {
         .hotspot-wrapper:hover .hotspot-card {
             visibility: visible;
             visibility: visible;
             opacity: 1;
             opacity: 1;
             transform: translateX(-50%) translateY(0);
             transform: translateX(-50%) translateY(0);
             pointer-events: auto; /* فعال شدن کلیک روی محتویات کادر */
             pointer-events: auto;
         }
         }


         /* استایل‌های داخل کادر */
         /* محتوای داخلی کادر */
         .hotspot-card__image {
         .hotspot-card__image {
            box-sizing: border-box;
            display: block;
             width: 100%;
             width: 100%;
             height: 140px;
             height: 150px;
             object-fit: cover;
             object-fit: cover;
             border-radius: 8px;
             border-radius: 8px;
             margin-bottom: 8px;
             margin-bottom: 10px;
        }
 
        .hotspot-card__content {
            box-sizing: border-box;
            display: block;
            width: 100%;
            padding: 4px 0 0 0;
            text-align: center;
         }
         }


         .hotspot-card__title {
         .hotspot-card__title {
             display: block;
             display: block;
             font-size: 14px;
             font-size: 15px;
             font-weight: bold;
             font-weight: bold;
             color: #0f172a;
             color: #1e293b;
             margin-bottom: 6px;
             margin-bottom: 6px;
             line-height: 1.6;
             text-align: center;
         }
         }


         .hotspot-card__description {
         .hotspot-card__description {
             display: block;
             font-size: 13px;
            margin: 0 0 12px 0;
             color: #64748b;
             color: #64748b;
             font-size: 12px;
             margin-bottom: 15px;
             line-height: 1.5;
            text-align: center;
             line-height: 1.6;
         }
         }


        /* دکمه اکشن (CTA) */
         .hotspot-card__cta {
         .hotspot-card__cta {
            box-sizing: border-box;
             display: block;
             display: block;
             width: 100%;
             width: 100%;
             padding: 8px 0;
             padding: 10px 0;
             background-color: #0f172a;
             background-color: #0f172a;
             color: #ffffff;
             color: #ffffff;
             text-align: center;
             text-align: center;
             text-decoration: none;
             text-decoration: none;
             border-radius: 6px;
             border-radius: 8px;
             font-size: 13px;
             font-size: 14px;
             font-weight: bold;
             font-weight: bold;
             transition: background-color 0.2s ease;
             transition: background 0.2s;
         }
         }


خط ۱۴۳: خط ۱۳۸:
         }
         }


         /* ریسپانسیو برای صفحات کوچک */
         /* ریسپانسیو موبایل */
         @media (max-width: 600px) {
         @media (max-width: 600px) {
             .hotspot-card {
             .hotspot-card { width: 220px; }
                width: 200px;
             .hotspot-card__image { height: 120px; }
            }
             .hotspot-card__image {
                height: 110px;
            }
         }
         }
     </style>
     </style>
خط ۱۵۶: خط ۱۴۷:
<body>
<body>


<div class="interactive-image" id="interactiveImage">
<div class="interactive-image">
 
     <!-- تصویر اصلی -->
     <!-- تصویر اصلی -->
     <img
     <img class="interactive-image__main" src="https://dl.faraghaib.ir/m/101/m101shalvarset.jpg" alt="ست نخی تابستانه سجاد">
        class="interactive-image__main"
        src="https://dl.faraghaib.ir/m/101/m101shalvarset.jpg"
        alt="ست نخی تابستانه"
    >


     <!-- نقطه اول (بلوز تابستانه نخی) -->
     <!-- نقطه اول -->
     <div class="hotspot-wrapper" style="--x: 45%; --y: 29%;">
     <div class="hotspot-wrapper" style="--x: 45%; --y: 29%;">
         <button
         <div class="image-hotspot"></div>
            type="button"
         <div class="hotspot-card">
            class="image-hotspot"
             <img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/101/m101shalvarset1.jpg" alt="بلوز نخی">
            aria-label="نمایش اطلاعات ست نخی"
             <strong class="hotspot-card__title">بلوز نخی تابستانه سجاد</strong>
        ></button>
            <p class="hotspot-card__description">جنس ۱۰۰٪ پنبه با تن‌خور خنک و عالی</p>
 
            <a href="#" class="hotspot-card__cta">مشاهده محصول</a>
         <div class="hotspot-card" role="dialog" aria-hidden="true">
             <img
                class="hotspot-card__image"
                src="https://dl.faraghaib.ir/m/101/m101shalvarset1.jpg"
                alt="بلوز تابستانه نخی"
            >
             <div class="hotspot-card__content">
                <strong class="hotspot-card__title">
                    بلوز نخی تابستانه سجاد
                </strong>
                <p class="hotspot-card__description">
                    جنس ۱۰۰٪ پنبه با تن‌خور خنک
                </p>
                <a class="hotspot-card__cta" href="/products/summer-top">
                    مشاهده محصول
                </a>
            </div>
         </div>
         </div>
     </div>
     </div>


     <!-- # نقطه دوم (شلوار نخی تابستانه) -->
     <!-- نقطه دوم -->
     <div class="hotspot-wrapper" style="--x: 58%; --y: 59%;">
     <div class="hotspot-wrapper" style="--x: 58%; --y: 59%;">
         <button
         <div class="image-hotspot"></div>
            type="button"
         <div class="hotspot-card">
            class="image-hotspot"
             <img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/101/m101shalvarset1.jpg" alt="شلوار نخی">
            aria-label="نمایش اطلاعات شلوار نخی"
             <strong class="hotspot-card__title">شلوار نخی تابستانه سجاد</strong>
        ></button>
            <p class="hotspot-card__description">طراحی راحت و ایده‌آل برای استایل تابستانه</p>
 
            <a href="#" class="hotspot-card__cta">دریافت اطلاعات</a>
         <div class="hotspot-card" role="dialog" aria-hidden="true">
             <img
                class="hotspot-card__image"
                src="https://dl.faraghaib.ir/m/101/m101shalvarset1.jpg"
                alt="شلوار نخی تابستانه"
            >
             <div class="hotspot-card__content">
                <strong class="hotspot-card__title">
                    شلوار نخی تابستانه سجاد
                </strong>
                <p class="hotspot-card__description">
                    طراحی راحت و ایده‌آل روزهای گرم
                </p>
                <a class="hotspot-card__cta" href="/products/summer-pants">
                    دریافت اطلاعات
                </a>
            </div>
         </div>
         </div>
     </div>
     </div>
</div>
</div>


</body>
</body>
</html>
</html>

نسخهٔ ‏۱۹ ژوئیهٔ ۲۰۲۶، ساعت ۱۰:۲۹

<!DOCTYPE html> ست نخی تابستانه - پوشاک سجاد

ست نخی تابستانه سجاد
بلوز نخی بلوز نخی تابستانه سجاد

جنس ۱۰۰٪ پنبه با تن‌خور خنک و عالی

مشاهده محصول
شلوار نخی شلوار نخی تابستانه سجاد

طراحی راحت و ایده‌آل برای استایل تابستانه

دریافت اطلاعات

برگرفته از «https://fa.faraghaib.ir/w/index.php?title=الگو:نقاط_روی_عکس&oldid=3396»