پرش به محتوا

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

از فراغیب
→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(۹ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۲: خط ۲:
<html lang="fa" dir="rtl">
<html lang="fa" dir="rtl">
<head>
<head>
     <meta charset="UTF-8">
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ست نخی تابستانه - پوشاک سجاد</title>
     <title>گالری ست نخی تابستانه - پوشاک سجاد</title>
     <style>
     <style>
         /* کانتینر اصلی تصویر تعاملی */
         * { box-sizing: border-box; }
 
        body {
            margin: 0;
            font-family: iransans, Arial, sans-serif;
            background: #ffffff;
        }
 
        .interactive-gallery {
            width: min(100%, 1280px);
            margin: 40px auto;
            padding: 0 12px;
        }
 
        .interactive-gallery__grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 18px;
        }
 
         .interactive-image {
         .interactive-image {
             position: relative;
             position: relative;
             width: min(100%, 800px);
             width: 100%;
             margin: 40px auto;
            height: 420px; /* هولدر ثابت */
             font-family: Tahoma, Arial, sans-serif;
             margin: 0;
             isolation: isolate;
            background: #f8fafc;
            /* حذف overflow: hidden برای اینکه کادرها روی بقیه عکس‌ها باز شوند */
            display: flex;
             align-items: center;
            justify-content: center;
             border-radius: 16px;
         }
         }


        /* تصویر اصلی */
         .interactive-image__main {
         .interactive-image__main {
            max-width: 100%;
            max-height: 100%;
             display: block;
             display: block;
             width: 100%;
             object-fit: contain;  
            height: auto;
             border-radius: 16px; /* گوشه گرد مستقیم روی عکس */
             border-radius: 14px;
             box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
         }
         }


         /* نگهدارنده دکمه نقطه و کادر اطلاعات برای مدیریت هاور تعاملی */
         /* بخش مدیریت نقاط */
         .hotspot-wrapper {
         .hotspot-wrapper {
             position: absolute;
             position: absolute;
خط ۳۲: خط ۵۶:
         }
         }


         /* استایل نقطه تعاملی (بدون موشن) */
         /* وقتی روی یک عکس یا نقطه آن هستید، لایه آن بالاتر از بقیه قرار می‌گیرد */
        .interactive-image:hover {
            z-index: 50;
        }
 
         .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 {
             position: absolute;
             position: absolute;
             bottom: calc(100% + 12px); /* نمایش در بالای نقطه */
             top: calc(100% + 14px);
             left: 50%;
             left: 50%;
             transform: translateX(-50%) translateY(10px);
             transform: translateX(-50%);
             width: 240px;
             width: 240px;
             background: #ffffff;
             background: #ffffff;
             border-radius: 12px;
             border-radius: 12px;
             box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
             box-shadow: 0 18px 36px rgba(0, 0, 0, 0.25);
             padding: 8px;
             padding: 12px;
             visibility: hidden;
             visibility: hidden;
             opacity: 0;
             opacity: 0;
             transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
             transition: opacity 0.2s ease;
             z-index: 20;
             pointer-events: none;
             pointer-events: none; /* غیرفعال در حالت عادی جهت جلوگیری از تداخل */
            display: flex;
            flex-direction: column;
             z-index: 100; /* اطمینان از قرارگیری روی همه چیز */
         }
         }


        /* فلش کوچک زیر کادر */
         .hotspot-card::before {
         .hotspot-card::after {
             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: 9px;
             border-style: solid;
             border-style: solid;
             border-color: #ffffff transparent transparent transparent;
             border-color: transparent transparent #ffffff transparent;
        }
 
        /* دکمه بستن کادر (در حالت هاور دسکتاپ مخفی است اما ساختار حفظ شده) */
        .hotspot-card__close {
            display: none;
         }
         }


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


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


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


         .hotspot-card__description {
         .hotspot-card__description {
             margin: 0 0 12px 0;
             font-size: 13px;
             color: #64748b;
             color: #64748b;
             font-size: 12px;
             margin: 0 0 14px;
             line-height: 1.5;
            text-align: center;
             line-height: 1.8;
         }
         }


        /* دکمه اکشن (CTA) */
         .hotspot-card__cta {
         .hotspot-card__cta {
             display: block;
             display: block;
             width: 100%;
             width: 100%;
            box-sizing: border-box;
             padding: 10px 0;
             padding: 8px 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: 700;
             transition: background-color 0.2s ease;
        }
 
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
             margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            border: 0;
            white-space: nowrap;
         }
         }


         .hotspot-card__cta:hover {
         /* ریسپانسیو تبلت و موبایل */
             background-color: #334155;
        @media (max-width: 992px) {
            .interactive-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
             .interactive-image { height: 380px; }
         }
         }


        /* ریسپانسیو برای صفحات کوچک */
         @media (max-width: 640px) {
         @media (max-width: 600px) {
             .interactive-gallery__grid { grid-template-columns: 1fr; }
             .hotspot-card {
             .interactive-image { height: 340px; }
                width: 200px;
             .hotspot-card { width: 210px; }
             }
             .hotspot-card__image {
                height: 110px;
            }
         }
         }
     </style>
     </style>
خط ۱۵۳: خط ۱۷۵:
<body>
<body>


<div class="interactive-image" id="interactiveImage">
<section class="interactive-gallery" aria-label="گالری محصولات پوشاک سجاد">
    <div class="interactive-gallery__grid">


    <!-- تصویر اصلی -->
        <!-- عکس اول -->
    <img
        <figure class="interactive-image">
        class="interactive-image__main"
            <img class="interactive-image__main" src="https://dl.faraghaib.ir/m/101/m101shalvarset7-1.jpg" alt="ست نخی تابستانه مردانه پوشاک سجاد" loading="lazy">
        src="https://dl.faraghaib.ir/m/101/m101shalvarset.jpg"
            <div class="hotspot-wrapper" style="--x: 40%; --y: 25%;">
        alt="ست نخی تابستانه"
                <button class="image-hotspot" type="button"></button>
    >
                <div class="hotspot-card">
                    <img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/101/m101shalvarset1.jpg" alt="بلوز نخی">
                    <strong class="hotspot-card__title">بلوز نخی تابستانه</strong>
                    <p class="hotspot-card__description">جنس ۱۰۰٪ پنبه با تن‌خور خنک</p>
                    <a href="#" class="hotspot-card__cta">مشاهده محصول</a>
                </div>
            </div>
            <div class="hotspot-wrapper" style="--x: 62%; --y: 65%;">
                <button class="image-hotspot" type="button"></button>
                <div class="hotspot-card">
                    <img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/101/m101shalvarsason3.jpg" alt="شلوار نخی">
                    <strong class="hotspot-card__title">شلوار نخی تابستانه</strong>
                    <p class="hotspot-card__description">طراحی راحت و ایده‌آل</p>
                    <a href="#" class="hotspot-card__cta">دریافت اطلاعات</a>
                </div>
            </div>
        </figure>


    <!-- نقطه اول (بلوز تابستانه نخی) -->
        <!-- عکس دوم -->
    <div class="hotspot-wrapper" style="--x: 45%; --y: 29%;">
        <figure class="interactive-image">
        <button
            <img class="interactive-image__main" src="https://dl.faraghaib.ir/m/101/m101shalvarset9-1.jpg" alt="بلوز تابستانه سجاد" loading="lazy">
            type="button"
            <div class="hotspot-wrapper" style="--x: 35%; --y: 25%;">
            class="image-hotspot"
                <button class="image-hotspot" type="button"></button>
            aria-label="نمایش اطلاعات ست نخی"
                <div class="hotspot-card">
         ></button>
                    <img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/101/m101shalvarset10.jpg" alt="پارچه بلوز">
                    <strong class="hotspot-card__title">پارچه نخی خنک</strong>
                    <p class="hotspot-card__description">پارچه نرم و سبک تابستانه</p>
                    <a href="#" class="hotspot-card__cta">مشاهده جزئیات</a>
                </div>
            </div>
            <div class="hotspot-wrapper" style="--x: 62%; --y: 66%;">
                <button class="image-hotspot" type="button"></button>
                <div class="hotspot-card">
                    <img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/101/m101shalvarsason4.jpeg" alt="دوخت بلوز">
                    <strong class="hotspot-card__title">دوخت تمیز</strong>
                    <p class="hotspot-card__description">تن‌خور عالی با دوخت صنعتی</p>
                    <a href="#" class="hotspot-card__cta">دریافت اطلاعات</a>
                </div>
            </div>
         </figure>


         <div class="hotspot-card" role="dialog" aria-hidden="true">
         <!-- عکس سوم -->
            <img
        <figure class="interactive-image">
                class="hotspot-card__image"
            <img class="interactive-image__main" src="https://dl.faraghaib.ir/m/101/m101shalvarset8-1.jpg" alt="شلوار تابستانه سجاد" loading="lazy">
                src="https://dl.faraghaib.ir/m/101/m101shalvarset1.jpg"
            <div class="hotspot-wrapper" style="--x: 48%; --y: 35%;">
                alt="بلوز تابستانه نخی"
                <button class="image-hotspot" type="button"></button>
             >
                <div class="hotspot-card">
             <div class="hotspot-card__content">
                    <img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/101/m101shalvarset11.jpg" alt="جنس شلوار">
                 <strong class="hotspot-card__title">
                    <strong class="hotspot-card__title">جنس سبک و راحت</strong>
                    بلوز نخی تابستانه سجاد
                    <p class="hotspot-card__description">مناسب برای استفاده طولانی مدت</p>
                </strong>
                    <a href="#" class="hotspot-card__cta">مشاهده محصول</a>
                <p class="hotspot-card__description">
                </div>
                    جنس ۱۰۰٪ پنبه با تن‌خور خنک
             </div>
                </p>
             <div class="hotspot-wrapper" style="--x: 66%; --y: 65%;">
                <a class="hotspot-card__cta" href="/products/summer-top">
                 <button class="image-hotspot" type="button"></button>
                    مشاهده محصول
                <div class="hotspot-card">
                 </a>
                    <img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/101/m101shalvarsason1.jpg" alt="فرم شلوار">
                    <strong class="hotspot-card__title">استایل تابستانه</strong>
                    <p class="hotspot-card__description">طراحی خوش‌فرم و مدرن</p>
                    <a href="#" class="hotspot-card__cta">دریافت اطلاعات</a>
                 </div>
             </div>
             </div>
         </div>
         </figure>
    </div>


    <!-- نقطه دوم (شلوار نخی تابستانه) -->
    <div class="hotspot-wrapper" style="--x: 58%; --y: 59%;">
        <button
            type="button"
            class="image-hotspot"
            aria-label="نمایش اطلاعات شلوار نخی"
        ></button>
        <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>
 
</section>
</div>


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

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

گالری ست نخی تابستانه - پوشاک سجاد

ست نخی تابستانه مردانه پوشاک سجاد
بلوز نخی بلوز نخی تابستانه

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

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

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

دریافت اطلاعات
بلوز تابستانه سجاد
پارچه بلوز پارچه نخی خنک

پارچه نرم و سبک تابستانه

مشاهده جزئیات
دوخت بلوز دوخت تمیز

تن‌خور عالی با دوخت صنعتی

دریافت اطلاعات
شلوار تابستانه سجاد
جنس شلوار جنس سبک و راحت

مناسب برای استفاده طولانی مدت

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

طراحی خوش‌فرم و مدرن

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

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