فراغیب

الگو:نقاط روی عکس: تفاوت میان نسخه‌ها

→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(۷ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<!DOCTYPE html>
 
<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; }
         * { 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: iransans, Arial, sans-serif;
             margin: 0;
             /* ایجاد یک محیط لایه‌بندی جدید */
             background: #f8fafc;
             isolation: isolate;  
             /* حذف 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.1);
         }
         }


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


         /* افزایش اولویت لایه هنگام هاور شدن */
         /* وقتی روی یک عکس یا نقطه آن هستید، لایه آن بالاتر از بقیه قرار می‌گیرد */
         .hotspot-wrapper:hover {
         .interactive-image:hover {
             z-index: 100; /* این باعث می‌شود کادر روی همه نقاط دیگر قرار بگیرد */
             z-index: 50;
         }
         }


        /* استایل نقطه قرمز */
         .image-hotspot {
         .image-hotspot {
             width: 20px;
             width: 20px;
خط ۵۴: خط ۷۴:
         }
         }


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


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


        /* نمایش کادر با هاور */
         .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 {
             width: 100%;
             width: 100%;
             height: 150px;
             height: 140px;
             object-fit: cover;
             object-fit: cover;
             border-radius: 8px;
             border-radius: 8px;
خط ۱۰۶: خط ۱۲۱:
             display: block;
             display: block;
             font-size: 15px;
             font-size: 15px;
             font-weight: bold;
             font-weight: 700;
             color: #1e293b;
             color: #1e293b;
             margin-bottom: 6px;
             margin-bottom: 6px;
خط ۱۱۵: خط ۱۳۰:
             font-size: 13px;
             font-size: 13px;
             color: #64748b;
             color: #64748b;
             margin-bottom: 15px;
             margin: 0 0 14px;
             text-align: center;
             text-align: center;
             line-height: 1.6;
             line-height: 1.8;
         }
         }


خط ۱۳۰: خط ۱۴۵:
             border-radius: 8px;
             border-radius: 8px;
             font-size: 14px;
             font-size: 14px;
             font-weight: bold;
             font-weight: 700;
            transition: background 0.2s;
         }
         }


         .hotspot-card__cta:hover {
         .sr-only {
             background-color: #334155;
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            border: 0;
             white-space: nowrap;
         }
         }


         /* ریسپانسیو موبایل */
         /* ریسپانسیو تبلت و موبایل */
         @media (max-width: 600px) {
         @media (max-width: 992px) {
             .hotspot-card { width: 220px; }
             .interactive-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
             .hotspot-card__image { height: 120px; }
            .interactive-image { height: 380px; }
        }
 
        @media (max-width: 640px) {
            .interactive-gallery__grid { grid-template-columns: 1fr; }
            .interactive-image { height: 340px; }
             .hotspot-card { width: 210px; }
         }
         }
     </style>
     </style>
خط ۱۴۷: خط ۱۷۵:
<body>
<body>


<div class="interactive-image">
<section class="interactive-gallery" aria-label="گالری محصولات پوشاک سجاد">
    <!-- تصویر اصلی -->
     <div class="interactive-gallery__grid">
     <img class="interactive-image__main" src="https://dl.faraghaib.ir/m/101/m101shalvarset.jpg" alt="ست نخی تابستانه سجاد">


    <!-- نقطه اول -->
        <!-- عکس اول -->
    <div class="hotspot-wrapper" style="--x: 45%; --y: 29%;">
        <figure class="interactive-image">
        <div class="image-hotspot"></div>
            <img class="interactive-image__main" src="https://dl.faraghaib.ir/m/101/m101shalvarset7-1.jpg" alt="ست نخی تابستانه مردانه پوشاک سجاد" loading="lazy">
        <div class="hotspot-card">
            <div class="hotspot-wrapper" style="--x: 40%; --y: 25%;">
            <img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/101/m101shalvarset1.jpg" alt="بلوز نخی">
                <button class="image-hotspot" type="button"></button>
            <strong class="hotspot-card__title">بلوز نخی تابستانه سجاد</strong>
                <div class="hotspot-card">
            <p class="hotspot-card__description">جنس ۱۰۰٪ پنبه با تن‌خور خنک و عالی</p>
                    <img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/101/m101shalvarset1.jpg" alt="بلوز نخی">
             <a href="#" class="hotspot-card__cta">مشاهده محصول</a>
                    <strong class="hotspot-card__title">بلوز نخی تابستانه</strong>
        </div>
                    <p class="hotspot-card__description">جنس ۱۰۰٪ پنبه با تن‌خور خنک</p>
    </div>
                    <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>
 
        <!-- عکس دوم -->
        <figure class="interactive-image">
            <img class="interactive-image__main" src="https://dl.faraghaib.ir/m/101/m101shalvarset9-1.jpg" alt="بلوز تابستانه سجاد" loading="lazy">
            <div class="hotspot-wrapper" style="--x: 35%; --y: 25%;">
                <button class="image-hotspot" type="button"></button>
                <div class="hotspot-card">
                    <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>
 
        <!-- عکس سوم -->
        <figure class="interactive-image">
            <img class="interactive-image__main" src="https://dl.faraghaib.ir/m/101/m101shalvarset8-1.jpg" alt="شلوار تابستانه سجاد" loading="lazy">
             <div class="hotspot-wrapper" style="--x: 48%; --y: 35%;">
                <button class="image-hotspot" type="button"></button>
                <div class="hotspot-card">
                    <img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/101/m101shalvarset11.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: 66%; --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/m101shalvarsason1.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: 58%; --y: 59%;">
        <div class="image-hotspot"></div>
        <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>
</div>
</section>


</body>
</body>
</html>
</html>
برگرفته از «https://fa.faraghaib.ir/wiki/الگو:نقاط_روی_عکس»