JSFiddle - React, Tailwind, and code Playground

by kostass

HTML

<img onmouseover="colorBackgroundOfImage(this)()" onmouseout="backToNormal(this)" border="0" src="https://www.w3schools.com/jsref/smiley.gif" alt="Smiley" width="32" height="32">

<img onmouseover="bgChange(this.style.backgroundColor)" onmouseout="bgChange('transparent')" border="0" src="https://www.w3schools.com/jsref/smiley.gif" alt="Smiley" width="32" height="32" style="background-color:red">

JavaScript

var variable;

function colorBackgroundOfImage(x) {
  function colour() {
    var red = Math.round(Math.random() * 255);
    var green = Math.round(Math.random() * 255);
    var blue = Math.round(Math.random() * 255);
    var bg = "background-color: rgb(" + red + "," + green + "," + blue + ");";
    x.style = bg;
  }
  return colour;
}

function backToNormal(x) {
  function colour() {
    var red = Math.round(Math.random() * 255);
    var green = Math.round(Math.random() * 255);
    var blue = Math.round(Math.random() * 255);
    var bg = "background: transparent;";
    x.style = bg;
  }
}

function bgChange(bg) {
    document.body.style.background = bg;
}