I'm trying to change background-image of a div #image by hovering on thumbnail images (something like a simple slider) My plunker is provided below.
1- First I tried to do like: element.style.backgroundImage
but i got this in the console:
2- Then i tried something like element.backgroundImage
although it looks good in the console but didnt work, here is the console:
Note: I don't want to use any library, just want to study JavaScript core.
my plunker
https://plnkr.co/edit/Mk0HSTYvQ4isVKjM7IEt?p=preview
1- I noticed that i was doing wrong interpolation here:
var bgI_value = 'url('+ src + ');';
it should be:
var bgI_value = 'url("'+ src + '");';
2- The suggestion from Alexandru to remove the simicolon was a good point.
3- the suggestion from Sharma to add .style.backgroundImage was a good point too.
so my code was missing these three corrections!
Thanks all.
The issue is in the way you are changing the background image:
image.backgroundImage= bgI_value;
What it should be is:
image.style.backgroundImage= bgI_value;
Note that this here is correct:
var bgI_value = 'url('+ src + ')';
Here is the Plunker: https://plnkr.co/edit/NX1cgmzudJjFbM80q3eI?p=preview