CODEWITHSUNDEEP
javascript
Loc Dang
Loc Dang

Reputation: 73

Chang backgroundImage with onmouseover and onmouseout in Javascript

I want to change backgroundImage with the following code: document.getElementById('image').style.backgroundImage = ?

#image{
    line-height:650px;
        width: 575px;
    height: 650px;
        border:5px solid black;
        margin:0 auto;
    background-color: #8e68ff;
    background-image: url('');
    background-repeat: no-repeat;
    color:#FFFFFF;
    text-align: center;
    background-size: 100%;
    margin-bottom:25px;
    font-size: 150%;
}
.preview{
        width:10%;
        margin-left:17%;
    border: 10px solid black;
}

<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: 2

Views: 107

Answers (3)

Anonymouse Lovecat
Anonymouse Lovecat

Reputation: 56

I'm still don't understand with your "Undo" means, may be like this one, may help for you :

<!DOCTYPE html>
<html>
  <head>
 
    <style>

      #image{ 
      line-height:650px; 
      width: 575px; height: 650px; 
      border:5px solid black; 
      margin:0 auto; 
      background-color: #8e68ff; 
      background-image: url(''); 
      background-repeat: no-repeat; 
      color:#FFFFFF; text-align: center; 
      background-size: 100%; 
      margin-bottom:25px; 
      font-size: 150%; 
      } 
      
      .preview{ 
      width:10%; 
      margin-left:17%; 
      border: 10px solid black; 
      }
      
    </style>
  </head>
  <body>

       <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.src)" 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.src)" 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.src)" onmouseout = "unDo()">



 

    <script>
         // update mouseover
      function upDate(clicked_src) { 
        document.getElementById("image").style.background = "url( ' "+clicked_src+" ')" ;
      }

      function unDo() {
        document.getElementById("image").style.background = "" ;

       
      }
    </script>
  </body>
</html>

Upvotes: 0

Pranav Rustagi
Pranav Rustagi

Reputation: 2731

You can try it like this, without changing your HTML structure.

By the way, just like unDo() function, you don't have to pass this as argument. You can use this, directly in function.

Cheers!

var image = document.getElementById('image');

function upDate(imageHover) {
  let currentSrc = imageHover.getAttribute("src");
  image.style.backgroundImage = "url('" + currentSrc + "')";
}

function unDo() {
  image.style.backgroundImage = "";
}
#image {
  line-height: 650px;
  width: 575px;
  height: 650px;
  border: 5px solid black;
  margin: 0 auto;
  background-color: #8e68ff;
  background-image: url('');
  background-repeat: no-repeat;
  color: #FFFFFF;
  text-align: center;
  background-size: 100%;
  margin-bottom: 25px;
  font-size: 150%;
}

.preview {
  width: 10%;
  margin-left: 17%;
  border: 10px solid black;
}
<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: 2

Always Helping
Always Helping

Reputation: 14570

You can use getAttribute to get the src of currently mouseover img and apply it your div with image inside it. You need to have img inside your div so that we can use that div to hide img on mouseout

Use querySelector method to get the element which will be #preview img which we have inside the div #image

Use .style.display in your unDo() function to hide the image on mouseover so that the div can go back to its original state.

Live Working Demo:

let imgPreview = document.querySelector('#preview')

//mouseover
function upDate(event) {
  let getSrc = event.getAttribute('src')
  imgPreview.style.display = 'block' //show div
  imgPreview.src = getSrc //replace src
}
 
//mouse out
function unDo() {
  imgPreview.style.display = 'none' //hide div
}
#image {
  line-height: 650px;
  width: 575px;
  height: 650px;
  border: 5px solid black;
  margin: 0 auto;
  background-color: #8e68ff;
  background-image: url('');
  background-repeat: no-repeat;
  color: #FFFFFF;
  text-align: center;
  background-size: 100%;
  margin-bottom: 25px;
  font-size: 150%;
}

.preview {
  width: 10%;
  margin-left: 17%;
  border: 10px solid black;
}
<div id="image">
  <img src="" id="preview" /> 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: 2

Related Questions