Demo Page for select-image web component

Examples

Simple Usage

"The Castle in the Sky" by Alex Feliksovich is licensed under CC BY-NC-ND 4.0

<head>
  …
  <script type="module" src="./src/select-image.js"></script>
</head>
<body>
  <sit-select-image
    value="https://example.com/example.jpg"
    alt="Example image">
  </sit-select-image>
</body>

Code example for the simple usage of the web component.

Custom Button Labels and Change Listener

"Fairy tale_02: Alice's adventures in wonderland" by Alex Feliksovich is licensed under CC BY-NC 4.0

<sit-select-image
  id="example"
  value="someImage.jpg" alt="Alternative Text"
  selectlabel="Change"
  clearlabel="Delete">
</sit-select-image>
<script>document.getElementById('example')
   .addEventListener('change',
      event => alert(`Image changed to ${event.detail.value}.`))
</script>

Code example for a select-image element with cutsom button labels.

Readonly Image-Select-Element

"Fairy tale: The Magic Swan Geese" by Alex Feliksovich is licensed under CC BY-NC-ND 4.0

Disabled Image-Select-Element

"Fairy tale_01: Little Red Riding Hood" by Alex Feliksovich is licensed under CC BY-NC-ND 4.0

Image-Select-Element with styled buttons (::parts)

The feature I used for this demo isn't available in all browsers yet. At the moment (2020-09-06) chromium based browsers like Vivaldi supports it. Also Firefox supports it since version 72. See caniuse.com for more details.

"The Pirate Bay" by Alex Feliksovich is licensed under CC BY-NC-ND 4.0

<style>
  #demo6::part(sit-select-image-select-button) {
   background: linear-gradient(180deg, white 0%, white 40%, orange 100%);
  }

  #demo6::part(sit-select-image-reset-button) {
    background: linear-gradient(180deg, white 0%, white 40%, grey 100%);
  }

  #demo6::part(sit-select-image-select-button):hover,
  #demo6::part(sit-select-image-reset-button):hover {
   text-decoration: underline;
  }
</style>

Code example for a styling of the internal buttons of a select-image element with the part() pseudo class.

JS API

"Ancient Civilizations: Lost & Found part 2" by Alex Feliksovich is licensed under CC BY-NC-ND 4.0

Image Select Element