Load IMG.src from CSS

by Danny Engelman

HTML

<h2>
  Loading IMG src from CSS definition, using modern CSS properties
</h2>
<ul>
  <li> the empty <code>src</code> definition on an &lt;IMG> triggers the onerror handler: loadIMG function</li>
  <li> loadIMG function calculates the CSS value</li>
  <li> strips all illegal characters</li>
  <li> sets the IMG.src</li>
  <li>when the CSS changes, the image is NOT updated!<br>You have to call loadIMG again<br>
    in onmouseenter (img 3) example by resetting `src` thus triggering the onerror handler again</li>
</ul>
<style>
  .shoes {
    --imgid: 21;
  }

  .bridge {
    --imgid: 84;
  }

  #laptop {
    --imgid: 0;
  }

  div:hover {
    --imgid: 666
  }

  #laptop:hover {
    --imgid: 1024
  }

  img {
    /* alas, you can only use the counter in a content: declaration , used for numbering imgs*/
    counter-increment: imgcount;
    /* create URL 1025 is the default imgid */
    --src: "//picsum.photos/id/"var(--imgid, 1025) "/150/150.jpg"
  }

</style>
<script>
  function loadIMG(img) {
    let src = getComputedStyle(img) // compute style for img
      .getPropertyValue("--src") // get css property
      .replace(/[" ]/g, ""); // strip quotes and spaces
    console.log(src);
    img.src = src;
  }

</script>
<div>
  <img src onerror=loadIMG(this) class=bridge>
</div>
<div>
  <img src onerror=loadIMG(this) class=shoes>
</div>
<div onmouseenter='this.querySelector("img").src=""'>
  <!-- forcing empty src causes a flash -->
  <img src onerror=loadIMG(this)>
</div>
<div id=laptop onmouseenter='loadIMG(this.querySelector("img"))'>
  <!-- img is replaced -->
  <img src onerror=loadIMG(this)>
</div>


<!-- NO Custom Elements were abused for this example -->

CSS

body {
  counter-reset: imgcount;
  font-family: arial;
}

div {
  float: left;
  position: relative;
}

div:after {
  position: absolute;
  left: 0;
  color: white;
  content: counter(imgcount);
  font-size: 2em;
}