Interactive image

Two ratio versions avaiable:

  • 16:9 - rc-interactive-image__wrapper rc-interactive-image__wrapper--16-9
  • 4:3 - rc-interactive-image__wrapper rc-interactive-image__wrapper--4-3
Attributes needed for this component:
  • data-js-top sets the position in % from the top
  • data-js-right sets the position in % from the right
  • data-js-bottom sets the position in % from the bottom
  • data-js-left sets the position in % from the left

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Text about image
html
            <figure class="rc-bg-image rc-fixed-ratio rc-fixed-ratio--16-9" style="background-image: url(' /assets/images/Content-Block_boxer-puppy_cutout_800px.png' )">
  <div class="rc-interactive-image">
    <div id="plus-tooltip" class="rc-tooltip">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <button class="rc-btn rc-btn--action rc-icon rc-plus--xs rc-brand3 rc-interactive-button rc-interactive-image__button" aria-label="Plus" data-tooltip="plus-tooltip" data-tooltip-placement="left" data-js-icon-button="" data-js-top="9%" data-js-right="" data-js-bottom="" data-js-left="30%">
      <span class="rc-screen-reader-text">Click interaction</span>
    </button>
    <div id="sustainable-tooltip" class="rc-tooltip">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <button class="rc-btn rc-btn--action rc-icon rc-sustainable--xs rc-brand3 rc-interactive-button rc-interactive-image__button" aria-label="Sustainable" data-tooltip="sustainable-tooltip" data-tooltip-placement="right" data-js-icon-button="" data-js-top="51%" data-js-right="34%" data-js-bottom="" data-js-left="">
      <span class="rc-screen-reader-text">Click interaction</span>
    </button>
    <div id="food-tooltip" class="rc-tooltip">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <button class="rc-btn rc-btn--action rc-icon rc-food--xs rc-brand3 rc-interactive-button rc-interactive-image__button" aria-label="Food" data-tooltip="food-tooltip" data-tooltip-placement="bottom" data-js-icon-button="" data-js-top="" data-js-right="" data-js-bottom="6%" data-js-left="23%">
      <span class="rc-screen-reader-text">Click interaction</span>
    </button>
  </div>
  <figcaption class="rc-screen-reader-text">Text about image</figcaption>
</figure>
        
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Text about image
html
            <figure class="rc-bg-image rc-fixed-ratio rc-fixed-ratio--4-3" style="background-image: url(' /assets/images/russian-blue-cat.jpg' )">
  <div class="rc-interactive-image">
    <div id="groomer-tooltip" class="rc-tooltip">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <button class="rc-btn rc-btn--action rc-icon rc-groomer--xs rc-brand3 rc-interactive-button rc-interactive-image__button" aria-label="Groomer" data-tooltip="groomer-tooltip" data-tooltip-placement="left" data-js-icon-button="" data-js-top="18%" data-js-right="" data-js-bottom="" data-js-left="52%">
      <span class="rc-screen-reader-text">Click interaction</span>
    </button>
    <div id="vet-tooltip" class="rc-tooltip">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <button class="rc-btn rc-btn--action rc-icon rc-vet--xs rc-brand3 rc-interactive-button rc-interactive-image__button" aria-label="Vet" data-tooltip="vet-tooltip" data-tooltip-placement="right" data-js-icon-button="" data-js-top="63%" data-js-right="30%" data-js-bottom="" data-js-left="">
      <span class="rc-screen-reader-text">Click interaction</span>
    </button>
    <div id="nutritional-tooltip" class="rc-tooltip">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <button class="rc-btn rc-btn--action rc-icon rc-nutritional--xs rc-brand3 rc-interactive-button rc-interactive-image__button" aria-label="Nutritional" data-tooltip="nutritional-tooltip" data-tooltip-placement="top" data-js-icon-button="" data-js-top="" data-js-right="" data-js-bottom="11%" data-js-left="17%">
      <span class="rc-screen-reader-text">Click interaction</span>
    </button>
  </div>
  <figcaption class="rc-screen-reader-text">Text about image</figcaption>
</figure>
        

Issues

If you are having problems implementing this code, please submit an issue on our Github page.

Github Octocat

Feedback

If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

Slack logo

Changelog

  • 2nd October 2018 [ui_assets/components/interactive-image.yml]
    Update class names.
  • 2nd October 2018 [ui_assets/components/interactive-image.yml]
    Update classes in examples
  • 2nd October 2018 [ui_assets/components/interactive-image.yml]
    Update image interactive and media page with new classes and examples
  • 26th July 2018 [ui_assets/components/interactive-image.yml]
    Removed duplicate IDs. Neatened SG js. Added prefixes for content block page.
  • 25th July 2018 [ui_assets/components/interactive-image.yml]
    add prefix
  • 25th July 2018 [ui_assets/components/interactive-image.yml]
    prefix
  • 12th July 2018 [ui_assets/components/interactive-image.yml]
    Prefixed classes throughout the portal with rc-.
  • 29th June 2018 [ui_assets/components/interactive-image.yml]
    typo
  • 29th June 2018 [ui_assets/components/interactive-image.yml]
    fix typo
  • 29th June 2018 [ui_assets/components/interactive-image.yml]
    Move interactive image.
  • 27th June 2018 [ui_assets/components/interactive-image.yml]
    format docs
  • 26th June 2018 [ui_assets/components/interactive-image.yml]
    update image and points
  • 26th June 2018 [ui_assets/components/interactive-image.yml]
    rename
  • 26th June 2018 [ui_assets/components/interactive-image.yml]
    rename buttons
  • 26th June 2018 [ui_assets/components/interactive-image.yml]
    rename buttons
  • 26th June 2018 [ui_assets/components/interactive-image.yml]
    rename
  • 25th June 2018 [ui_assets/components/interactive-image.yml]
    add animated ions markup. Add demo image
  • 25th June 2018 [ui_assets/components/interactive-image.yml]
    start icon button markup