5

I have a picture and wish its background to change and repeatedly take random colours sequencially from all over the spectrum till the user's mouse exits the picture. I guess the solution should use setInterval (see this) and the following shall help:

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;

Here is a fiddle trying to implement what I have in mind: The first smiley should change colour onMouseOver and return to normal onMouseOut.

Here is what I have in mind: I want to implement what FontAwesome.com do on their logo at their footer: it changes colours onmouseover and stops otherwise. But that's not a picture, it's a font(?). Instead, I have a logo that I made transparent, and I want to change the background dynamically so that it replicates the nice trick of Fontawesome. Any ideas?

* Updated *

I am posting a detailed solution to my question below based on the answers of the community. Looks like I followed Leo's way but Rakibul's solution worked well too.

Avocaddo
  • 63
  • 5
  • You can use css3 animation with keyframes. See https://stackoverflow.com/questions/10843880/css3-button-background-color-infinite-transition – Leo Caseiro Jun 08 '18 at 03:59
  • Thank you! I do know how to change the background of a picture to A colour ([see here](http://jsfiddle.net/kostass/wujmkco9/)). Instead, I am asking to repeatedly apply a color generating function onMouseOver that will make the background of the picture take _multiple colours_, and then stop it onMouseOut. Thank you in advance. – Avocaddo Jun 08 '18 at 04:08
  • Hi, you can use the `animation-play-state: pause` on `hover` – Leo Caseiro Jun 08 '18 at 04:42
  • Thank you @LeoCaseiro, [yes that is towards the right direction](https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_animation-play-state_hover). Can you reply with a complete example code applied to the parameters of my problem posted? Thanks in advance. – Avocaddo Jun 08 '18 at 04:46

4 Answers4

1

I achieved what I want.

I wanted my logo to change colours "nicely" when a user's mouse hovers over it (like magic and similar to FontAwesome's logo at their footer).

.OAlogo {
  background-color: transparent;
  animation-play-state: paused;
}

.OAlogo:hover {
  animation: colorReplace 10s infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
}

@keyframes colorReplace {
  0% {
    background-color: rgb(44, 132, 231);
  }
  10% {
    background-color: rgb(61, 192, 90);
  }
  20% {
    background-color: rgb(255, 211, 59);
  }
  30% {
    background-color: rgb(253, 136, 24);
  }
  40% {
    background-color: rgb(243, 129, 174);
  }
  50% {
    background-color: rgb(34, 138, 230);
  }
  60% {
    background-color: rgb(62, 192, 89);
  }
  70% {
    background-color: rgb(255, 211, 59);
  }
  80% {
    background-color: rgb(71, 193, 86);
  }
  90% {
    background-color: rgb(253, 126, 20);
  }
  100% {
    background-color: rgb(233, 109, 132);
  }
}
<img class="OAlogo" src="http://www.stouras.com/OperationsAcademia.github.io/images/OA-logo-solo.png" style="background: black;" width="100">
Avocaddo
  • 63
  • 5
  • For this result, one needs to make his/her logo transparent, then plot it on a black background (in my case). And when the user hovers over, the colourful animation starts playing. – Avocaddo Jun 09 '18 at 01:44
0

Use CSS animation to change colors and use the animation-play-state: pause on hover.

 .button {
    width:100px;
    height:20px;
    background-color: red;
    animation: colorReplace 5s infinite;
  }

  .button:hover {
    animation-play-state: paused;
  }


@keyframes colorReplace
{
  0%   {background-color:red;}
  30%  {background-color:green;}
  60%  {background-color:blue;}
  100%   {background-color:red;}
}
<input type="submit" value="submit" class="button" />
Leo Caseiro
  • 1,667
  • 1
  • 22
  • 35
  • Leo rushed a bit, his idea above is working. Will post a _complete_ answer that fully applies to answers what I am asking once done. – Avocaddo Jun 08 '18 at 05:10
0

You have to declare setInterval() with your required time interval (In the example below 500 is set) for the color to be changed randomly on definite interval. And onmouseover is used to simply detect the hover on the image and then it sets the color randomly. Finally, when onmouseout is detected, the color changes to no-color.

var randomColor = function() {
  var r = Math.floor(Math.random() * 12);
  var g = Math.floor(Math.random() * 128);
  var b = Math.floor(Math.random() * 100);
  return "#" + r + g + b;
};

var colorChange;

document.getElementById("myImage").onmouseover = function() {
  colorChange = setInterval(function() {
    document.getElementById("myImage").style.backgroundColor = randomColor();
  }, 500);
};

document.getElementById("myImage").onmouseout = function() {
  this.style.backgroundColor = "";
  clearInterval(colorChange);
};
<img id="myImage" src="https://www.w3schools.com/jsref/smiley.gif" alt="Smiley">
UkFLSUI
  • 5,509
  • 6
  • 32
  • 47
  • This is great Rakibul! I am accepting it but I liked a lot the answer of Leo as well. I may modify your code a bit so that the transition of the colors is linear/smooth (as this will go to a logo), and post another reply later in case a future user finds this question. – Avocaddo Jun 08 '18 at 05:46
0

You can just use the setInterval function to run your code over and over. You also had some minor errors in your code which I have fixed. See your updated fiddle here: https://jsfiddle.net/zvebco3r/3/

You can change the interval time (currently 25ms) to your desired length.

HTML:

<img id="img" src="https://www.w3schools.com/jsref/smiley.gif" alt="Smiley" width="32" height="32">

JS:

var img = document.getElementById('img');

img.onmouseover = function() {
    changeIt = setInterval(function(){
       var red = Math.floor(Math.random() * 255);
       var green = Math.floor(Math.random() * 255);
       var blue = Math.floor(Math.random() * 255);
       img.style.backgroundColor="rgb("+red+","+green+","+blue+")";
    },25);
}

img.onmouseout = function() {
    this.style.backgroundColor="transparent";
    clearInterval(changeIt);
}
Claire
  • 3,146
  • 6
  • 22
  • 37