CODEWITHSUNDEEP
javascriptcssbackground-image
shireef khatab
shireef khatab

Reputation: 1005

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.

Upvotes: 0

Views: 1397

Answers (2)

A.Sharma
A.Sharma

Reputation: 2799

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

Upvotes: 2

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48437

Here is your solution:

Please change 

var bgI_value = 'url('+ src + ');';

TO 

var bgI_value = 'url('+ src + ')';

Upvotes: 1

Related Questions