JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bild"> Functionen:
  <select id="funk" name="funk">
    <option value=""></option>option value="1">drehen</option>
    <option value="2">Links rechts </option>
    <option value="3">Zoom in zoom out</option>
    <option value="4">Beben</option>
    <option value="5">Zittern</option>
    <option value="6"> </option>
    <option value="7"> </option>
    <option value="8"> </option>
  </select>
  <br>Bilder
  <select id="urlbild" name="urlbild">
    <option value="4"> </option>
    <option value="https://cdn.pixabay.com/photo/2016/07/15/23/37/chess-board-1520707_960_720.jpg">nix</option>
    <option value="https://previews.123rf.com/images/bluewren/bluewren0902/bluewren090200003/4322700-Schwarz-Wei-Schachbrett-Muster-mit-Abstand-Perspektive--Lizenzfreie-Bilder.jpg">schach</option>
    <option value="https://cdn.pixabay.com/photo/2013/07/12/18/20/chessboard-153303_960_720.png"> </option>
  </select>
  <br>Tempo
  <input type="range" id="tempo" name="tempo" min="0" max="9" size="1" value="9">
  <br>TempoPlus
  <input type="range" id="tempoplus" name="tempoplus" min="0" max="9" size="1" value="0">
  <div id="pos"></div>
</div>
<div id="bildunten">

CSS

#bild {
  position: absolute;
  top: 122px;
  left: 122px;
  z-index: 100;
  border: 0px solid red;
  background: black;
}

#bild {
  color: blue;
  font-size: 12px;
  overflow: auto;
  padding-left: 5px;
}

#bild {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

JavaScript

function position_ermitteln() {

  var border = 10;
  var posision_foto_links = 222;
  var posision_foto_top = 222;


  var elm = document.getElementById("bild");
  var xa = getAbsoluteX(elm);
  var ya = getAbsoluteY(elm);
  var vonlinks = xa - border;
  var vonoben = ya - border;
  var breite = elm.offsetWidth;
  var hohe = elm.offsetHeight;
  var bis_ende_width = parseInt(breite) + parseInt(border) + parseInt(border);
  var bis_ende_height = parseInt(hohe) + parseInt(border) + parseInt(border);
  document.getElementById("pos").innerHTML = '<p>Von Links ' + vonlinks + '<br>
  Von Oben '+vonoben+' < br > Breite '+breite+' < br > Höhe '+hohe+' < br > Breite mitborder '+bis_ende_width+' < br > Höhe mit Border '+bis_ende_height+' < br > '
  return {
    l: vonlinks,
    o: vonoben,
    w: bis_ende_width,
    h: bis_ende_height
  };
}


var banner = document.querySelector('#bildunten');

banner.onmouseover = function(evt) {
  alert(banner)
  banner.style.animationPlayState = 'paused';

}

function menu() {
  var urlbild = document.getElementsByName('urlbild')[0].value;
  var funk = document.getElementsByName('funk')[0].value;
  var tempo = document.getElementsByName('tempo')[0].value;
  var tempoplus = document.getElementsByName('tempoplus')[0].value;
  try {
    //document.getElementById("bildunten").style.animationPlayState = 'paused';
  } catch (e) {}

  bilder_wahl(urlbild, tempo, tempoplus)
  if (funk == 1) {
    drehen()
  }
  if (funk == 2) {
    laufen_links()
  }
  if (funk == 3) {
    zoominout()
  }
  if (funk == 4) {
    beben()
  }
  if (funk == 5) {
    zittern()
  }
  if (funk == 6) {}
  if (funk == 7) {}
  if (funk == 8) {}
  alert(funk)
}
funk.onchange = menu;
urlbild.onchange = menu;
tempo.onchange = menu;




function bilder_wahl(urlbild, tempo, tempoplus) {

  var zuruck = position_ermitteln()
  var width = zuruck.w
  var hohe = zuruck.h
  var links = zuruck.l
  var oben = zuruck.o

  bildunten.style.position = 'absolute';
  bildunten.style.left =...