CODEWITHSUNDEEP
javascriptdom-events
user13641073
user13641073

Reputation: 1

How to change background image in js file but not hard coding url

I cannot figure out why I can't change background images when I use onmouseover events. My goal is when I put mouse over first pic, then this pic will show up on the top of page, when I move my mouse to another pic, then this new pic will show up on the top instead, then when I move mouse to the third pic, the third pic will show up on the top. Here I attached my html code and js code. Please help me. 

function upDate(previewPic){
    // document.getElementById("image").style.backgroundColor = "green";
    document.getElementById("image").style.backgroundColor = "url(previewPic.src)";
    document.getElementById("image").innerHTML = previewPic.alt + ".  this is onmouseover events";
}

function unDo(){
    document.getElementById("image").style.backgroundColor = "#8e68ff";
    document.getElementById("image").innerHTML = "Hover over an image below to display here.";
}
<div id = "image">
    Hover over an image below to display here.
</div>

<img class = "preview"
     alt = "Styling with a Bandana"
     src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg"
     onmouseover = "upDate(this)"
     onmouseout = "unDo()">

<img class = "preview"
     alt = "With My Boy"
     src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG"
     onmouseover = "upDate(this)"
     onmouseout = "unDo()">

<img class = "preview"
     src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg"
     alt = "Young Puppy"
     onmouseover = "upDate(this)"
     onmouseout = "unDo()">

Upvotes: 0

Views: 1169

Answers (3)

Utkarsh Mehrotra
Utkarsh Mehrotra

Reputation: 108

'previewPic.src' seems to be a variable that has been used as a string. You should replace this piece of code 

document.getElementById("image").style.backgroundColor = "url(previewPic.src)";

with

document.getElementById("image").style. backgroundImage = "url('"+previewPic.src+"')";

Upvotes: 1

Karan
Karan

Reputation: 12629

You need to change below things.

  1. div should have backgroundImage not backgroundColor.
  2. you have to set url this way "url('" + previewPic.src + "')"
  3. Remove backgroundImage in unDo() with document.getElementById("image").style.backgroundImage = "";

All you need to update is one line like this document.getElementById("image").style.backgroundImage = "url('" + previewPic.src + "')";

Check your result below.

function upDate(previewPic){
    // document.getElementById("image").style.backgroundColor = "green";
    document.getElementById("image").style.backgroundImage = "url('" + previewPic.src + "')";
    document.getElementById("image").innerHTML = previewPic.alt + ".  this is onmouseover events";
}

function unDo(){
    document.getElementById("image").style.backgroundImage = "";
    document.getElementById("image").style.backgroundColor = "#8e68ff";
    document.getElementById("image").innerHTML = "Hover over an image below to display here.";
}
<div id = "image">
    Hover over an image below to display here.
</div>

<img class = "preview"
     alt = "Styling with a Bandana"
     src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg"
     onmouseover = "upDate(this)"
     onmouseout = "unDo()">

<img class = "preview"
     alt = "With My Boy"
     src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG"
     onmouseover = "upDate(this)"
     onmouseout = "unDo()">

<img class = "preview"
     src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg"
     alt = "Young Puppy"
     onmouseover = "upDate(this)"
     onmouseout = "unDo()">

Upvotes: 0

misss-popcorn
misss-popcorn

Reputation: 600

document.getElementById("image").style.backgroundColor = "#8e68ff";

Above code is not valid first of all, you need to provide a unique id to your HTML element like - 

<img class = "preview"
 id="preview1"
 src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg"
 alt = "Young Puppy"
 onmouseover = "upDate(this)"
 onmouseout = "unDo()">

Now you can access this HTML image element using the id and change its src like this - 

document.getElementById("preview1").src = "hackanm.gif";

If you are using multiple image elements, please note that you have to use different ids for them.

Upvotes: 1

Related Questions