CODEWITHSUNDEEP
javascripthtmlonmouseout
Keller Martin
Keller Martin

Reputation: 41

.onmouseout seems to be firing when it shouldn't

Here is the part where it won't work:

function showDetailedView(element) {

  var img = document.getElementById(element);
  img.className = "imgPopout";
  img.innerHTML = "<br /><TABLE><TR><TH rowspan='3'><img src='aprilla/" + element + ".jpg' width='250'><TH align='left'>Artist's Name: <TH align='left'>Aprill Aronie<TR><TH align='left'>File Name: <TH align='left'>pic3.jpg<TR></TABLE>"
  var popOut = document.getElementById(element);
  popOut.onmouseout = hideDetailedView(element);
}

function hideDetailedView(element){

   var img = document.getElementById(element);
   img.className = "imgPopin";
   img.innerHTML = "";
}

What happens is that popOut.onmouseout always fires hideDetailedView() even when my mouse is on the div represented by the id 'element'. I do not know why this is happening. Please no jquery, it's for a school thing and I can't figure it out.

Here's the entire code if you want:

function initPopout(element) {

  var thumb = document.getElementById(element); 
  thumb.onmouseover = showDetailedView(element);
}

function showDetailedView(element) {

  var img = document.getElementById(element);
  img.className = "imgPopout";
  img.innerHTML = "<br /><TABLE><TR><TH rowspan='3'><img src='aprilla/" + element + ".jpg' width='250'><TH align='left'>Artist's Name: <TH align='left'>Aprill Aronie<TR><TH align='left'>File Name: <TH align='left'>pic3.jpg<TR></TABLE> "
  var popOut = document.getElementById(element);
  popOut.onmouseout = hideDetailedView(element);
}

function hideDetailedView(element){

   var img = document.getElementById(element);
   img.className = "imgPopin";
   img.innerHTML = "";

 }

It is triggered by something that looks like this:

<img src="aprilla/pic1thumb.jpg" onClick="initPopout(1);"><div class="imgPopin" id="1"></div>

There are 15 or so pictures, each with an id from 1-15, and each calling their respective initPopOut(IDnumber)

Upvotes: 2

Views: 134

Answers (1)

Elad
Elad

Reputation: 1144

popOut.onmouseout = hideDetailedView(element); // Mistake!

The function hideDetailedView return undefined. If you want fire a function with a value you can do this with closure:

function hideDetailedView(element){
    return function() {
        var img = document.getElementById(element);
        img.className = "imgPopin";
        img.innerHTML = "";
    }
}

Now the return value is a function.

The same thing with regard to showDetailedView function.

Upvotes: 1

Related Questions