Chang backgroundImage with onmouseover and onmouseout in Javascript

user_10899936 0
Viewed 71

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()">
javascript
3 Answers

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()">

user_136690480

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()">

user_140461260

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>

user_141460550
Related