Onmouseover werkt niet >> foutmelding laag.style has no properties

[happyface133]

Ik heb code die ervoor zorgt wanneer je met je muis over een afbeelding gaat, een foto tevoorschijn komt. Alleen gebeurt er niets als je over de afbeelding gaat. De foutconsole van Firefox geeft zelfs geen fout.

Ik heb al alles afgezocht in Google, maar ik vind geen oplossing. Hieronder de html-code die in de body staat.

Hieronder html-code die in de body staat

<div id="plaatje"></div>
<a href="#" onmouseover="javascript: toonPlaatje('plaatje','foto1.jpg');" onmouseout="javascript: verbergPlaatje('plaatje');"><span id="camera">tekst</span></a>
<a href="#" onmouseover="javascript: toonPlaatje('plaatje','foto1.jpg');" onmouseout="javascript: verbergPlaatje('plaatje');"><span id="camera">tekst</span></a>
<a href="#" onmouseover="javascript: toonPlaatje('plaatje','foto1.jpg');" onmouseout="javascript: verbergPlaatje('plaatje');"><span id="camera">tekst</span></a>
<a href="#" onmouseover="javascript: toonPlaatje('plaatje','foto1.jpg');" onmouseout="javascript: verbergPlaatje('plaatje');"><span id="camera">tekst</span></a>

Hieronder de css

<style type="text/css">
#plaatje { 
position:absolute; 
z-index:1000; 
visibility:hidden; }
</style>

Hieronder de javascript

function init() 
{
    var d = document.getElementById("camera");
    if(document.addEventListener)
    {
    d.addEventListener('mousemove', haalMuisPositie, false);
    }
        else if(document.attachEvent)
    {
    d.attachEvent('onmousemove', haalMuisPositie);
    };
}

var x = 0;
var y = 0;
var laag;

function haalMuisPositie(e) 
{
    if(!e) {var e = window.event;}; 
    if(e.pageX) 
    {
        y = e.pageY;
        x = e.pageX;
    }
    else if (e.x) 
    {
        y = e.y;
        x = e.x;
    };
}

function toonPlaatje(naam,beeldje) 
{ 
    laag = document.getElementById(naam);
    laag.innerHTML = '<img src=' +beeldje+'>'; 
    laag.style.visibility = "visible";
    laag.style.top = y + "px";
    laag.style.left = x + "px"; 
    plaatsPlaatje()     
}

function verbergPlaatje(naam)
{ 
    laag = document.getElementById(naam);
    laag.style.visibility = "hidden"; 
}
 
function plaatsPlaatje()
{ 
    laag.style.top = y + "px"; 
    laag.style.left = x + "px"; 
} 

if(window.addEventListener)
    {
    window.addEventListener('load', init, false);
    }
else if(window.attachEvent)
    {
    window.attachEvent('onload', init);
    };

 

[Egel]

Probeer het eens met de style direct in de tag van het plaatje:

<div id="plaatje" style="position: absolute; z-index:1000; visibility: hidden; left: 0px; top: 0px;"></div>

Dat is namelijk de style die met document.getElementById('plaatje').style wordt aangesproken.


Vr.Gr. Egel.