onmouseleave --returning background image to default

问题

I'm trying to return a div's background image back to its default using a onmouseleave method. Here is the HTML and JS:

  <script type="text/javascript">

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();
  }

}

where displayImage and leaveImage are called with the methods in the same HTML div tag:

<div class="thumbnails" onmouseover="displayImage(event)">

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?

Thank you all!

回答1:

Alright, firstly; it's showing [Object HTML Collection] because you are calling getElementsByTagName, Notice it says Elements, so you are getting every single p tag on your website, what you want instead is to get just a single one. The solution could be giving the p tag an ID and then use getElementById, then you would only get the single element.

Second, you need to save the original p tag text somewhere, here is an example saving it in a variable:

HTML:

<p id="tip">Hover over the image to display larger</p>

Javascript:

var originalText; // Notice this is outside the functions
function displayImage(event) {
    event = event || window.event;  
    var targetElement = event.target || event.srcElement;

    originalText = document.getElementById("tip").innerHTML;
    var altText=targetElement.getAttribute("alt");
    document.getElementById("viewer").innerHTML = altText;


     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;

    document.getElementById("viewer").innerHTML = originalText; 

    if (targetElement.tagName != "IMG") {
        document.getElementById("viewer").style.backgroundImage= URL();
      }
 }

回答2:

I think this line should have an "=" instead of ":":

document.getElementById("viewer").style.backgroundImage = URL();

Maybe that's the only issue....

来源：https://stackoverflow.com/questions/33600808/onmouseleave-returning-background-image-to-default

标签

javascript

html

css

image-gallery