CODEWITHSUNDEEP
javascripthtmlcss
Jukka Nevalainen Imbera
Jukka Nevalainen Imbera

Reputation: 31

Change background url of div via HTML tag

I have a div (CSS - height: 250px, width: 70%) and I have set a background via CSS. I want to change the background onhover.

That's simple, I know. But I want to get sources of backgrounds from the HTML tag.

Ex.: 

<div class="somediv" data-imgbefore="img1.png" data-imgafter="img2.png"></div>

Can anyone help me please?

Upvotes: 0

Views: 126

Answers (5)

Daebak
Daebak

Reputation: 419

You can add all the div that you like and change only the data-imgbefore and data-imgafter !!!

$(document).ready(function(){
	
	$('.somediv').each(function( index, value ) {
		var img = $(this).attr('data-imgbefore');
		$('.somediv').css({'background-image':'url('+ img +')', 'background-size':'200px 200px'});
	});
	
	//$('.somedive').css({'background-image':'url("http://www.palladio-tv.it/Internet/siti_gec/2B/Manzan_Disney/codice/Pippo.png")', 'background-size':'200px 200px'});
	
	$('.somediv').hover(

		function () {
			var img = $(this).attr('data-imgafter');
			$(this).css({'background-image':'url('+ img +')', 'background-size':'200px 200px'});
		}, 

		function () {
			var img = $(this).attr('data-imgbefore');
			$(this).css({'background-image':'url('+ img +')', 'background-size':'200px 200px'});
		}
	);
});
.somediv {width:200px;height:200px;border:1px solid #F2F2F2;border-radius:4px;display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div class="somediv" data-imgbefore="http://www.palladio-tv.it/Internet/siti_gec/2B/Manzan_Disney/codice/Pippo.png" data-imgafter="http://www.filastrocche.it/contenuti/wp-content/uploads/2001/04/pippogoofy_352.jpg"></div>
<div class="somediv" data-imgbefore="http://www.palladio-tv.it/Internet/siti_gec/2B/Manzan_Disney/codice/Pippo.png" data-imgafter="http://www.filastrocche.it/contenuti/wp-content/uploads/2001/04/pippogoofy_352.jpg"></div>

Cheers!!!

Upvotes: 1

marmeladze
marmeladze

Reputation: 6564

You can easily achieve that with javascript. You can also add an onmouseleave function, but this time, passing this.dataset.imgbefore as second argument.

changebg = function(el, i) {
	var t = "url("+i+")";
	el.style.backgroundImage = t;
}
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div class="somediv" id="mydiv" data-imgbefore="http://lorempixel.com/400/200/sports" data-imgafter="http://lorempixel.com/400/200/animals" onmouseover="changebg(this, this.dataset.imgafter)">Lorem</div>
</body>
</html>

Upvotes: 1

Mihai T
Mihai T

Reputation: 17687

you can do this with this simple JQ

maybe it's not the best solution but it works.i added background-color so you can see the change. but you can remove that and leave only background-image

see here jsfiddle

made 2 variables and assigned them to each image ( before and after img ) to each div with class .somediv

add an initial background-image to the div

then at hover, the background-image of the div changes between imgbefore and imgafter

jq :

$(".somediv").each(function(){  

  var imgbef = $(this).data("imgbefore"),
      imgaft = $(this).data("imgafter")
  $(this).css({'background-image': 'url(' + imgbef + ')','background-color':'red'});

  $(this).hover(function(){

     $(this).css({'background-image': 'url(' + imgaft + ') ','background-color':'blue'});
  }, function(){
     $(this).css({'background-image': 'url(' + imgbef + ')','background-color':'red'});
  });

});

HTML :

<div class="somediv" data-imgbefore="img1.png" data-imgafter="img2.png"></div>

CSS :

.somediv {
   height:250px;
   width:70%;  
 }

let me know if it helps

Upvotes: 1

connorb
connorb

Reputation: 301

If you're not using jQuery you can achieve the desired effect using basic Event Listeners. https://jsfiddle.net/gnu9utos/3/

// first get the element that we'll be interacting with
var element = document.querySelector('.somediv');

// assuming we managed to successfully get the element from the document
if(element) {
    var before = element.getAttribute('data-imgbefore');
    var after = element.getAttribute('data-imgafter');

    if(before && after) {
        element.style.background = 'url(' + before + ')'; // set the initital state

        element.addEventListener('mouseover', function(event) {
            element.style.background = 'url(' + after + ')';
        });

        element.addEventListener('mouseout', function(event) {
            element.style.background = 'url(' + before + ')'; 
        });
    }
}

You might want to add a check for mouseleave to revert the image back to it's original state and add a little bit of css.

I hope this was helpful.

Upvotes: 1

2b77bee6-5445-4c77-b1eb-4df3e5
2b77bee6-5445-4c77-b1eb-4df3e5

Reputation: 967

Not sure if I understand what you are trying to accomplish. Why don't you abandon the HTML tag requirement and just try css :hover?

#somediv {
    background: url(...);
}

#somediv:hover {
    background: url(...); /* different url */
}

http://www.w3schools.com/cssref/css3_pr_background.asp

Upvotes: 0

Related Questions