50ohm-contents-dl/contents/html/applet_traps.html

<style>
  .traps-applet {
    --traps-blue: #00aedf;
    --traps-red: #e05023;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: grid;
    gap: .85rem;
    margin: 1rem auto;
    font-size: clamp(13px, 1.5vw, 17px);
  }

  .traps-applet .traps-controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .55rem;
    width: min(100%, 42rem);
    margin-inline: auto;
  }

  .traps-applet button {
    min-width: 0;
    margin: 0;
    padding: .55em .7em;
    border: 1px solid rgba(90, 100, 110, .35);
    border-radius: .4rem;
    background: var(--bs-body-bg, #fff);
    color: inherit;
    font: inherit;
    font-weight: 600;
    line-height: 1.15;
    cursor: pointer;
  }

  .traps-applet button:hover {
    border-color: var(--traps-blue);
  }

  .traps-applet button[aria-pressed="true"] {
    border-color: var(--traps-blue);
    background: var(--traps-blue);
    color: #fff;
  }

  .traps-applet .traps-visual {
    width: 100%;
    min-width: 0;
    aspect-ratio: 255.143 / 62.585;
    display: grid;
    place-items: center;
  }

  .traps-applet .traps-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .traps-applet .traps-state {
    min-height: 2.4em;
    margin: 0;
    text-align: center;
    line-height: 1.3;
  }

  .traps-applet .traps-relation {
    display: inline-block;
    margin-right: .35em;
    color: inherit;
    white-space: nowrap;
  }

  .traps-applet .traps-state strong {
    color: var(--traps-red);
  }

  @media (max-width: 520px) {
    .traps-applet .traps-controls {
      grid-template-columns: 1fr;
    }

  }
</style>

<div class="traps-applet" aria-label="Effektiv längd hos en trapdipol">
  <div class="traps-controls" role="group" aria-label="Välj excitationsfrekvens">
    <button type="button" data-traps-state="off" aria-pressed="true">Ingen excitation</button>
    <button type="button" data-traps-state="3.5" aria-pressed="false">3,5 MHz</button>
    <button type="button" data-traps-state="7.05" aria-pressed="false">7,05 MHz</button>
    <button type="button" data-traps-state="14" aria-pressed="false">14 MHz</button>
  </div>

  <div class="traps-visual">
    <img data-traps-image src="pictures/235.svg" alt="Trapdipol utan excitation">
  </div>

  <p class="traps-state" data-traps-description aria-live="polite">
    <strong class="traps-relation">Ingen excitation:</strong> Ingen del av antennen är aktiv.
  </p>

  <script>
    (function () {
      const applet = document.currentScript.closest('.traps-applet');
      const image = applet.querySelector('[data-traps-image]');
      const description = applet.querySelector('[data-traps-description]');
      const buttons = Array.from(applet.querySelectorAll('[data-traps-state]'));
      const states = {
        off: {
          image: 'pictures/235.svg',
          alt: 'Trapdipol utan excitation',
          description: '<strong class="traps-relation">Ingen excitation:</strong> Ingen del av antennen är aktiv.'
        },
        '14': {
          image: 'pictures/1136.svg',
          alt: 'Vid 14 megahertz kan strömmen passera trapparna och hela tråden för ström',
          description: '<strong class="traps-relation">14 MHz &gt; 7,05 MHz:</strong> Trapparnas kapacitiva verkan dominerar – strålaren förkortas elektriskt.'
        },
        '7.05': {
          image: 'pictures/1135.svg',
          alt: 'Vid 7,05 megahertz är bara den inre delen av trapdipolen aktiv',
          description: '<strong class="traps-relation">7,05 MHz = f<sub>res</sub>:</strong> Trapparna spärrar. Effektiv längd: 2 × 10,07 m = 20,14 m.'
        },
        '3.5': {
          image: 'pictures/1136.svg',
          alt: 'Vid 3,5 megahertz är hela trapdipolen aktiv',
          description: '<strong class="traps-relation">3,5 MHz &lt; 7,05 MHz:</strong> Den induktiva verkan dominerar – trapparna förlänger strålaren elektriskt.'
        }
      };

      Object.keys(states).forEach(function (key) {
        const preload = new Image();
        preload.src = states[key].image;
      });

      function showState(key) {
        const state = states[key];
        image.src = state.image;
        image.alt = state.alt;
        description.innerHTML = state.description;
        buttons.forEach(function (button) {
          button.setAttribute('aria-pressed', String(button.dataset.trapsState === key));
        });
      }

      buttons.forEach(function (button) {
        button.addEventListener('click', function () {
          showState(button.dataset.trapsState);
        });
      });
    }());
  </script>
</div>