shireef khatab shireef khatab - 1 month ago 11
Javascript Question

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

Answer

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

Comments