Swegon Component Library

Interactive Image 

<div class="interactive-image">
    <img class="interactive-image__image" src="/mocks/img/interactive-image.jpg" />
    <button class="hotspot" aria-controls="panel-systemval" aria-expanded="false" style="left: 51.4%; top: 79%;">
        <div class="hotspot__inner">
            <div class="hotspot__label">1. Systemval</div>
            <div class="hotspot__dot">
                <span class="hotspot__icon hotspot__icon--plus">
                    <svg class="icon " focusable="false">
                        <use xlink:href="#icon-plus"></use>
                    </svg>
                </span>
                <span class="hotspot__icon hotspot__icon--minus">
                    <svg class="icon " focusable="false">
                        <use xlink:href="#icon-minus"></use>
                    </svg>
                </span>
            </div>
        </div>
    </button>

    <button class="hotspot" aria-controls="panel-projektering" aria-expanded="false" style="left: 32%; top: 53%;">
        <div class="hotspot__inner">
            <div class="hotspot__label">2. Projektering</div>
            <div class="hotspot__dot">
                <span class="hotspot__icon hotspot__icon--plus">
                    <svg class="icon " focusable="false">
                        <use xlink:href="#icon-plus"></use>
                    </svg>
                </span>
                <span class="hotspot__icon hotspot__icon--minus">
                    <svg class="icon " focusable="false">
                        <use xlink:href="#icon-minus"></use>
                    </svg>
                </span>
            </div>
        </div>
    </button>

    <button class="hotspot" aria-controls="panel-installation" aria-expanded="false" style="left: 32.8%; top: 17%;">
        <div class="hotspot__inner">
            <div class="hotspot__label">3. Installation</div>
            <div class="hotspot__dot">
                <span class="hotspot__icon hotspot__icon--plus">
                    <svg class="icon " focusable="false">
                        <use xlink:href="#icon-plus"></use>
                    </svg>
                </span>
                <span class="hotspot__icon hotspot__icon--minus">
                    <svg class="icon " focusable="false">
                        <use xlink:href="#icon-minus"></use>
                    </svg>
                </span>
            </div>
        </div>
    </button>

    <button class="hotspot" aria-controls="panel-driftsattning" aria-expanded="false" style="left: 55.7%; top: 17%;">
        <div class="hotspot__inner">
            <div class="hotspot__label">4. Driftsättning</div>
            <div class="hotspot__dot">
                <span class="hotspot__icon hotspot__icon--plus">
                    <svg class="icon " focusable="false">
                        <use xlink:href="#icon-plus"></use>
                    </svg>
                </span>
                <span class="hotspot__icon hotspot__icon--minus">
                    <svg class="icon " focusable="false">
                        <use xlink:href="#icon-minus"></use>
                    </svg>
                </span>
            </div>
        </div>
    </button>

    <button class="hotspot" aria-controls="panel-drift" aria-expanded="false" style="left: 61%; top: 48.6%;">
        <div class="hotspot__inner">
            <div class="hotspot__label">5. Drift</div>
            <div class="hotspot__dot">
                <span class="hotspot__icon hotspot__icon--plus">
                    <svg class="icon " focusable="false">
                        <use xlink:href="#icon-plus"></use>
                    </svg>
                </span>
                <span class="hotspot__icon hotspot__icon--minus">
                    <svg class="icon " focusable="false">
                        <use xlink:href="#icon-minus"></use>
                    </svg>
                </span>
            </div>
        </div>
    </button>

</div>
 
<div class="interactive-image">
    <img class="interactive-image__image" src="{{image.src}}" />
    {{#each hotspots}}
        {{>@hotspot this}}
    {{/each}}
</div>
 
{
  "image": {
    "src": "/mocks/img/interactive-image.jpg"
  },
  "hotspots": [
    {
      "id": "panel-systemval",
      "label": "1. Systemval",
      "expanded": false,
      "coords": {
        "x": "51.4%",
        "y": "79%"
      }
    },
    {
      "id": "panel-projektering",
      "label": "2. Projektering",
      "expanded": false,
      "coords": {
        "x": "32%",
        "y": "53%"
      }
    },
    {
      "id": "panel-installation",
      "label": "3. Installation",
      "expanded": false,
      "coords": {
        "x": "32.8%",
        "y": "17%"
      }
    },
    {
      "id": "panel-driftsattning",
      "label": "4. Driftsättning",
      "expanded": false,
      "coords": {
        "x": "55.7%",
        "y": "17%"
      }
    },
    {
      "id": "panel-drift",
      "label": "5. Drift",
      "expanded": false,
      "coords": {
        "x": "61%",
        "y": "48.6%"
      }
    }
  ]
}
  • Content: 
    .interactive-image {
    background-color: $color-white;
    position: relative;
}

.interactive-image__image {
    display: block;
    margin: 0 auto;
}
  • URL: /components/raw/interactive-image/interactive-image.scss
  • Filesystem Path: src/components/interactive-image/interactive-image.scss
  • Size: 154 Bytes

No notes defined.