Avatar billede htx98i17 Professor
30. juli 2012 - 20:35 Der er 2 kommentarer og
1 løsning

onmouseover vis det rigtige

Jeg har nedenstående kodeeksempel.
Som det fungerer nu, sker der "ingenting" når man kører over billedet i div'et. Eller dvs. hvis man indsætter alert() i funktoinen så kan man se at der sker noget når man kører over billedet, men det fungerer ikke efter hensigten. Div'et skal forblive "Musen er over billedet" så længe musen er over billedet.

Kan nogen fortælle hvordan jeg får det til at fungerer efter hensigten?

og et ekstra spm. Hvordan optimerer jeg denne: if(info != '')

<html>
    <head>
        <script type="text/javascript" >
            function vis_infobar(info) {
               
                var infobar = document.getElementById('infobar');
               
                if(info != '') {
                   
                    infobar.style.display='block';
                    infobar.innerHTML = info;
                   
                } else {
                   
                    infobar.style.display='none';
               
                }
               
            }
           
        </script>
    </head>
<body>
<div style="position: absolute; left: 50%; display: none; border: 1px solid; width:150px; height: 50px;" id="infobar" ></div>

    <div style="width: 200px; height: 200px; margin: auto; border: 1px solid;" onmouseover="vis_infobar('Musen er over div');"  onmouseout="vis_infobar('');" >
        <img src="etbillede.jpg"  onmouseover="vis_infobar('Musen er over billedet');"  onmouseout="vis_infobar('');" >
    </div>

</body>
</html>
Avatar billede olebole Juniormester
30. juli 2012 - 21:43 #1
<ole>

Stop event'ens færd op gennem DOM'en til slut i handler funktionen:

<html>
    <head>
        <script type="text/javascript" >
            function vis_infobar(info, e) {
               
                var infobar = document.getElementById('infobar');
               
                if(info != '') {
                   
                    infobar.style.display='block';
                    infobar.innerHTML = info;
                   
                } else {
                   
                    infobar.style.display='none';
               
                }
                e.cancelBubble = true;
                if (e.stopPropagation) e.stopPropagation();
            }
           
        </script>
    </head>
<body>
<div style="position: absolute; left: 50%; display: none; border: 1px solid; width:150px; height: 50px;" id="infobar" ></div>

    <div style="width: 200px; height: 200px; margin: auto; border: 1px solid;" onmouseover="vis_infobar('Musen er over div',event);"  onmouseout="vis_infobar('',event);" >
        <img src="etbillede.jpg"  onmouseover="vis_infobar('Musen er over billedet',event);"  onmouseout="vis_infobar('',event);" >
    </div>

</body>
</html>

/mvh
</bole>
Avatar billede htx98i17 Professor
31. juli 2012 - 14:35 #2
Tusind tak, det fungerer efter hensigten.
Avatar billede olebole Juniormester
31. juli 2012 - 15:23 #3
Selvtak. Fidusen er at stoppe event'en, så den ikke 'bobbler' videre op. Når du laver mouseover på biledet, laver du jo i virkeligheden også mouseover på DIV'et.

I din oprindelige version blev begge udløst - og da den på DIV'et udløses til sidst (ved mouseover på billedet), var det den, der 'vandt' retten til at skrive beskeden.

Tilføjelsen gør, at event'en ikke forplanter sig videre op gennem de omkransende elementer, men stoppes efter det første element.

*) e.cancelBubble = true; - tager sig af IE (og generer ikke de andre)

*) if (e.stopPropagation) e.stopPropagation(); - tager sig af de andre browsere. Da den ikke eksisterer i IE, vil den her udløse en fejl, hvilket begrunder if-betingelsen
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester