title: onmouseleave --returning background image to default
body: <p><a href="https://i.stack.imgur.com/Ojd0Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ojd0Q.png" alt="enter image description here"></a>I'm trying to return a div's background image back to its default using a onmouseleave method. Here is the HTML and JS: </p>
  
  <pre><code>  &lt;script type="text/javascript"&gt;
  
  function displayImage(event) {
  event = event || window.event;
  var targetElement = event.target || event.srcElement;
  
   if (targetElement.tagName == "IMG") {
      console.log(document.getElementById("viewer"));
      document.getElementById("viewer").style.backgroundImage = 'url(' + targetElement.getAttribute("src") + ')';}
      }
  
  function leaveImage(event){
    event = event || window.event;
    var targetElement = event.target || event.srcElement;
  
    if (targetElement.tagName != "IMG") {
      document.getElementById("viewer").style.backgroundImage: URL();
    }
  </code></pre>
  
  <p>}
        </p>
  
  <p>where displayImage and leaveImage are called with the methods in the same HTML div tag:  </p>
  
  <pre><code>&lt;div class="thumbnails" onmouseover="displayImage(event)"&gt;
  </code></pre>
  
  <p>In essence, I want to return the "viewer" id'd div element's background image to its default on mouseleave (creating two separate functions). Am I going about it the right way?</p>
  
  <p>Thank you all! </p>