CODEWITHSUNDEEP
javascripthtmlcssnested
Avocaddo
Avocaddo

Reputation: 63

Repeatedly change background colour of picture onMouseOver

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.

Upvotes: 5

Views: 473

Answers (4)

Avocaddo
Avocaddo

Reputation: 63

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">

Upvotes: 1

UkFLSUI
UkFLSUI

Reputation: 5672

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">

Upvotes: 0

Claire
Claire

Reputation: 3184

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);
}

Upvotes: 0

Leo Caseiro
Leo Caseiro

Reputation: 1845

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" />

Upvotes: 0

Related Questions