پرش به محتوا

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

از فراغیب
→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(۱۱ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<html>
<div class="interactive-image" id="interactiveImage">


     <!-- تصویر اصلی -->
<html lang="fa" dir="rtl">
     <img
<head>
        class="interactive-image__main"
     <meta charset="UTF-8" />
        src="https://dl.faraghaib.ir/m/101/m101shalvarset.jpg"
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        alt="ست نخی تابستانه"
    <title>گالری ست نخی تابستانه - پوشاک سجاد</title>
     >
     <style>
        * { box-sizing: border-box; }


    <!-- --x فاصله نقطه از سمت چپ تصویر است.
         body {
      --y فاصله نقطه از بالای تصویر است.-->
            margin: 0;
    <!-- نقطه اول -->
            font-family: iransans, Arial, sans-serif;
    <button
            background: #ffffff;
         type="button"
         }
        class="image-hotspot"
        style="--x: 45%; --y: 29%;"
         aria-label="نمایش اطلاعات ست"
        aria-expanded="false"
        data-popup="hotspotPopup1"
    >
        <span class="image-hotspot__dot"></span>
    </button>


    <!-- کادر اطلاعات نقطه اول -->
         .interactive-gallery {
    <div
             width: min(100%, 1280px);
        class="hotspot-card"
             margin: 40px auto;
        id="hotspotPopup1"
             padding: 0 12px;
        role="dialog"
         }
         aria-hidden="true"
    >
        <button
             type="button"
             class="hotspot-card__close"
            aria-label="بستن پنجره"
        >
             ×
         </button>


         <img
         .interactive-gallery__grid {
             class="hotspot-card__image"
             display: grid;
             src="https://dl.faraghaib.ir/m/101/m101shalvarset1.jpg"
             grid-template-columns: repeat(3, minmax(0, 1fr));
             alt="بولیز تابستانه نخی"
             gap: 18px;
         >
         }


         <div class="hotspot-card__content">
         .interactive-image {
             <strong class="hotspot-card__title">
             position: relative;
                پوشاک سجاد IP
            width: 100%;
             </strong>
            height: 420px; /* هولدر ثابت */
            margin: 0;
            background: #f8fafc;
            /* حذف overflow: hidden برای اینکه کادرها روی بقیه عکس‌ها باز شوند */
            display: flex;
            align-items: center;
            justify-content: center;
             border-radius: 16px;
        }


             <p class="hotspot-card__description">
        .interactive-image__main {
                کیفیت ۵ مگاپیکسل
            max-width: 100%;
             </p>
             max-height: 100%;
            display: block;
             object-fit: contain;
            border-radius: 16px; /* گوشه گرد مستقیم روی عکس */
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }


             <a class="hotspot-card__cta" href="/products/ip-camera">
        /* بخش مدیریت نقاط */
                مشاهده محصول
        .hotspot-wrapper {
             </a>
            position: absolute;
         </div>
            left: var(--x);
    </div>
            top: var(--y);
            z-index: 10;
        }
 
        /* وقتی روی یک عکس یا نقطه آن هستید، لایه آن بالاتر از بقیه قرار می‌گیرد */
        .interactive-image:hover {
             z-index: 50;
        }
 
        .image-hotspot {
            width: 20px;
            height: 20px;
            padding: 0;
            border: 3px solid #ffffff;
            border-radius: 50%;
            background-color: #e11d48;
            cursor: pointer;
            transform: translate(-50%, -50%);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            display: block;
        }
 
        .hotspot-card {
            position: absolute;
            top: calc(100% + 14px);
            left: 50%;
            transform: translateX(-50%);
            width: 240px;
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0 18px 36px rgba(0, 0, 0, 0.25);
            padding: 12px;
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.2s ease;
            pointer-events: none;
            display: flex;
            flex-direction: column;
            z-index: 100; /* اطمینان از قرارگیری روی همه چیز */
        }
 
        .hotspot-card::before {
            content: "";
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            border-width: 9px;
            border-style: solid;
            border-color: transparent transparent #ffffff transparent;
        }
 
        .hotspot-wrapper:hover .hotspot-card {
            visibility: visible;
            opacity: 1;
             pointer-events: auto;
        }
 
        .hotspot-card__image {
            width: 100%;
            height: 140px;
            object-fit: cover;
            border-radius: 8px;
            margin-bottom: 10px;
        }
 
        .hotspot-card__title {
            display: block;
            font-size: 15px;
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 6px;
            text-align: center;
        }
 
        .hotspot-card__description {
            font-size: 13px;
            color: #64748b;
            margin: 0 0 14px;
            text-align: center;
            line-height: 1.8;
        }
 
         .hotspot-card__cta {
            display: block;
            width: 100%;
            padding: 10px 0;
            background-color: #0f172a;
            color: #ffffff;
            text-align: center;
            text-decoration: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 700;
        }


<!-- --x فاصله نقطه از سمت چپ تصویر است.
        .sr-only {
      --y فاصله نقطه از بالای تصویر است.-->
            position: absolute;
    <!-- نقطه دوم -->
            width: 1px;
    <button
            height: 1px;
        type="button"
            padding: 0;
        class="image-hotspot"
            margin: -1px;
        style="--x: 58%; --y: 59%;"
            overflow: hidden;
        aria-label="نمایش اطلاعات محصول"
            clip: rect(0, 0, 0, 0);
        aria-expanded="false"
            border: 0;
         data-popup="hotspotPopup2"
            white-space: nowrap;
    >
         }
        <span class="image-hotspot__dot"></span>
    </button>


    <!-- کادر اطلاعات نقطه دوم -->
         /* ریسپانسیو تبلت و موبایل */
    <div
         @media (max-width: 992px) {
         class="hotspot-card"
             .interactive-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        id="hotspotPopup2"
             .interactive-image { height: 380px; }
         role="dialog"
         }
        aria-hidden="true"
    >
        <button
             type="button"
            class="hotspot-card__close"
             aria-label="بستن پنجره"
        >
            ×
         </button>


         <img
         @media (max-width: 640px) {
             class="hotspot-card__image"
             .interactive-gallery__grid { grid-template-columns: 1fr; }
             src="images/nvr-product.jpg"
             .interactive-image { height: 340px; }
             alt="ست نخی تابستانه مردانه"
             .hotspot-card { width: 210px; }
         >
         }
    </style>
</head>
<body>


        <div class="hotspot-card__content">
<section class="interactive-gallery" aria-label="گالری محصولات پوشاک سجاد">
            <strong class="hotspot-card__title">
    <div class="interactive-gallery__grid">
                ست نخی تابستانه مردانه
            </strong>


             <p class="hotspot-card__description">
        <!-- عکس اول -->
                 در رنگ بندی های جذاب
        <figure class="interactive-image">
             </p>
            <img class="interactive-image__main" src="https://dl.faraghaib.ir/m/101/m101shalvarset7-1.jpg" alt="ست نخی تابستانه مردانه پوشاک سجاد" loading="lazy">
             <div class="hotspot-wrapper" style="--x: 40%; --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/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>


             <a class="hotspot-card__cta" href="/products/nvr">
        <!-- عکس دوم -->
                دریافت اطلاعات
        <figure class="interactive-image">
            </a>
             <img class="interactive-image__main" src="https://dl.faraghaib.ir/m/101/m101shalvarset9-1.jpg" alt="بلوز تابستانه سجاد" loading="lazy">
        </div>
            <div class="hotspot-wrapper" style="--x: 35%; --y: 25%;">
    </div>
                <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>


</div>
        <!-- عکس سوم -->
        <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>
</section>


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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