Search code examples
javascriptcssbackground-image

Can't change background-image of a div


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: Using .style.backgroundImage

2- Then i tried something like element.backgroundImage although it looks good in the console but didnt work, here is the console: Without .style

Note: I don't want to use any library, just want to study JavaScript core.

      my plunker

https://plnkr.co/edit/Mk0HSTYvQ4isVKjM7IEt?p=preview

update:

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.


Solution

  • 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