Reputation: 41
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
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