Change div background on click and on mouse
I am trying to change an image in a div on mouse click and JS click. For example:
var favs = document.getElementsByClassName("fav-wrapper");
for (var i = 0; i < favs.length; i++) {
favs[i].innerHTML = '<img src="images/favorite.png" />';
favs[i].onMouseOver = function () {
favs[i].innerHTML = "<img src='images/favorite_hover.png' />";
}
favs[i].onClick = function () {
favs[i].innerHTML = "<img src='images/favorite_on.png' />";
};
}
But for some reason it won't work. What am I doing wrong?
+3
source to share
2 answers
Try lowercase event handlers and you actually need to close for [i] to work inside the loop. I prefer to use this
in your case.
var favs = document.getElementsByClassName("fav-wrapper");
for (var i = 0; i < favs.length; i++) {
favs[i].innerHTML = '<img src="images/favorite.png" />';
favs[i].onmouseover = function () {
this.innerHTML = "<img src='images/favorite_hover.png' />";
}
favs[i].onclick = function () {
this.innerHTML = "<img src='images/favorite_on.png' />";
}
}
but why not just change the src of the images?
var favs = document.getElementsByClassName("fav-wrapper");
for (var i = 0; i < favs.length; i++) {
var fav=favs[i];
fav.getElementsByTagName("img")[0].src="images/favorite.png";
fav.onmouseover = function () {
this.getElementsByTagName("img")[0].src="images/favorite_hover.png";
}
fav.onmouseout = function () {
this.getElementsByTagName("img")[0].src="images/favorite.png";
}
fav.onclick = function () {
this.getElementsByTagName("img")[0].src="images/favorite_on.png";
}
}
you can do it all with CSS, thus
+3
source to share
you can try this method using pure css changing background on hover and clicking
.image{width:500px;height:500px;background-image: url("http://www.toolsformoney.com/financial_software_demos.jpg");background-repeat: no-repeat;}
.image:hover{background-image: url("http://www.hostpph.com/blog/wp-content/uploads/2012/06/free-bookie-software-demo-large.jpg");background-repeat: no-repeat;}
.image:focus{background-image: url("https://www.arxan.com/wp-content/uploads/assets1/images/demo.png");background-repeat: no-repeat;outline: 0;transition:0s;}
<div class="image" tabindex="0">
</div>
+2
source to share