changing an image when hover with javascript

Question

Title.

I've seen a lot of ways of doing it when the IMG element is used :

<img src="blah" id="get" onmouseover="newImage()" onmouseout="oldImage()

Javavscript

function newImage() { document.getElementById(get").src="blah2"}
function oldImage() { document.getElementById("get").src="blah"}

But I keep my images on CSS as background-image: url() inside an id:

<div id="image"

How I apply the same principle but when images are on CSS and its on a div id

NEW TO JAVASCRIPT PLEASE NO FRAMEWORKS.

score 3 · Accepted Answer · edited May 23 '17 at 10:28

You don't need JavaScript for this (but I give a JavaScript alternative below), just use CSS's :hover pseudo-class.

#get {
    background-image: url(/path/to/image/when/not/hovering.png);
}
#get:hover {
    background-image: url(/path/to/image/when/hovering.png);
}

Example: This div shows your user icon normally, then shows mine if you hover it:

#get {
  width: 50px;
  height: 50px;
  background-image: url(https://graph.facebook.com/950389301719024/picture?type=small);
}
#get:hover {
  background-image: url(https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=50&d=identicon&r=PG
);
}

<div id="get"></div>

But if you really want to use JavaScript, it's very similar to the code you've quoted, you just change .style.backgroundImage on your element instead of changing .src:

function startHover(element) {
  element.style.backgroundImage = "url(https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=50&d=identicon&r=PG)";
}
function stopHover(element) {
  element.style.backgroundImage = "url(https://graph.facebook.com/950389301719024/picture?type=small)";
}

#get {
  width: 50px;
  height: 50px;
}

<div id="get" style="background-image: url(https://graph.facebook.com/950389301719024/picture?type=small)" onmouseover="startHover(this)" onmouseout="stopHover(this)"></div>

But I discourage use of onxyz attributes; use modern event handling instead:

(function() {
  var div = document.getElementById("get");
  div.addEventListener("mouseover", function() {
    div.style.backgroundImage = "url(https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=50&d=identicon&r=PG)";
  }, false);
  div.addEventListener("mouseout", function() {
    div.style.backgroundImage = "url(https://graph.facebook.com/950389301719024/picture?type=small)";
  }, false);
})();

#get {
  width: 50px;
  height: 50px;
}

<div id="get" style="background-image: url(https://graph.facebook.com/950389301719024/picture?type=small)"></div>

That uses addEventListener, which is supported by all modern browsers (not by IE8, or IE9-IE11 in their broken "compatibility" mode). If you need to support those, this answer has a function you can use for cross-browser event handling without a library.

Alright nailed it . but for the sake of knowledge how would one do so with javascript using the example above as template? — BlueHorse, Apr 16 '16 at 08:23
@blueHorse if u want to do in JavaScript then you can have two CSS classes with different background images. Then on mouse over addthe other class to the element. On mouse out remove that class. — rajesh, Apr 16 '16 at 08:27
@BlueHorse: I've added that. Rajesh's approach is also very good, as it keeps your image paths and such in CSS rather than in code. — T.J. Crowder, Apr 16 '16 at 08:27
@T.J.Crowder You are a good man! many thanks for taking the time. — BlueHorse, Apr 16 '16 at 08:30

changing an image when hover with javascript

1 Answers1