الگو:نقاط روی عکس: تفاوت میان نسخهها
صفحهای تازه حاوی «<html> <div class="interactive-image" id="interactiveImage"> <!-- تصویر اصلی --> <img class="interactive-image__main" src="https://dl.faraghaib.ir/m/101/m101shalvareslash2.jpeg" alt="سیستم دوربین مداربسته" > <!-- نقطه اول --> <button type="button" class="image-hotspot" style="--x: 32%; --y: 38%;" aria-label="نمایش اط...» ایجاد کرد |
بدون خلاصۀ ویرایش |
||
| خط ۵: | خط ۵: | ||
<img | <img | ||
class="interactive-image__main" | class="interactive-image__main" | ||
src="https://dl.faraghaib.ir/m/101/ | src="https://dl.faraghaib.ir/m/101/m101shalvarset.jpg" | ||
alt=" | alt="ست نخی تابستانه" | ||
> | > | ||
<!-- --x فاصله نقطه از سمت چپ تصویر است. | |||
--y فاصله نقطه از بالای تصویر است.--> | |||
<!-- نقطه اول --> | <!-- نقطه اول --> | ||
<button | <button | ||
type="button" | type="button" | ||
class="image-hotspot" | class="image-hotspot" | ||
style="--x: | style="--x: 45%; --y: 29%;" | ||
aria-label="نمایش اطلاعات | aria-label="نمایش اطلاعات ست" | ||
aria-expanded="false" | aria-expanded="false" | ||
data-popup="hotspotPopup1" | data-popup="hotspotPopup1" | ||
| خط ۳۸: | خط ۴۰: | ||
<img | <img | ||
class="hotspot-card__image" | class="hotspot-card__image" | ||
src=" | src="https://dl.faraghaib.ir/m/101/m101shalvarset1.jpg" | ||
alt=" | alt="بولیز تابستانه نخی" | ||
> | > | ||
<div class="hotspot-card__content"> | <div class="hotspot-card__content"> | ||
<strong class="hotspot-card__title"> | <strong class="hotspot-card__title"> | ||
پوشاک سجاد IP | |||
</strong> | </strong> | ||
| خط ۵۷: | خط ۵۹: | ||
</div> | </div> | ||
<!-- --x فاصله نقطه از سمت چپ تصویر است. | |||
--y فاصله نقطه از بالای تصویر است.--> | |||
<!-- نقطه دوم --> | <!-- نقطه دوم --> | ||
<button | <button | ||
type="button" | type="button" | ||
class="image-hotspot" | class="image-hotspot" | ||
style="--x: | style="--x: 58%; --y: 59%;" | ||
aria-label="نمایش اطلاعات | aria-label="نمایش اطلاعات محصول" | ||
aria-expanded="false" | aria-expanded="false" | ||
data-popup="hotspotPopup2" | data-popup="hotspotPopup2" | ||
| خط ۸۷: | خط ۹۱: | ||
class="hotspot-card__image" | class="hotspot-card__image" | ||
src="images/nvr-product.jpg" | src="images/nvr-product.jpg" | ||
alt=" | alt="ست نخی تابستانه مردانه" | ||
> | > | ||
<div class="hotspot-card__content"> | <div class="hotspot-card__content"> | ||
<strong class="hotspot-card__title"> | <strong class="hotspot-card__title"> | ||
ست نخی تابستانه مردانه | |||
</strong> | </strong> | ||
<p class="hotspot-card__description"> | <p class="hotspot-card__description"> | ||
در رنگ بندی های جذاب | |||
</p> | </p> | ||