Avatar billede s0mmer Nybegynder
20. oktober 2008 - 19:12 Der er 14 kommentarer og
1 løsning

Hjælp til onmouseevent

God aften eksperter :)

Jeg har følgende kode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/JavaScript">

var ib2_isExpanded = true;
var ib2_heightCollapsed = 0;
var ib2_heightExpanded;
var ib2_elmBox;

function ib2_expandCollapse() {
    ib2_resizeTowards(ib2_isExpanded ? ib2_heightCollapsed : ib2_heightExpanded);
    ib2_isExpanded = !ib2_isExpanded;
}

function ib2_resizeTowards(targetHeight, hideWhenFinished) {
    curHeight = ib2_elmBox.offsetHeight;
    if (curHeight < targetHeight) { // Expanding
        nextHeight = Math.min(targetHeight, curHeight + 8);
    } else { // Collapsing
        nextHeight = Math.max(targetHeight, curHeight - 12);
    }
 
    // Resize ... and continue if target is not met
    ib2_elmBox.style.height = nextHeight + 'px';
    if (nextHeight != targetHeight) {
        window.setTimeout('ib2_resizeTowards(' + targetHeight + ', ' + hideWhenFinished + ');', 25);
    } else if (hideWhenFinished) {
        ib2_elmBox.style.visibility = 'hidden';
    }
}

function ib2_init() {
    ib2_elmBox = document.getElementById('infobox2');
    ib2_heightExpanded = ib2_elmBox.offsetHeight;
 
    ib2_elmBox.style.height = 0;
    ib2_elmBox.style.visibility = 'visible';
 
    ib2_isExpanded = false;
    ib2_resizeTowards(ib2_heightCollapsed, false);
}

window.onload = ib2_init;
</script>
</head>

<body>
<a style="display: block; position: relative" href="#" onmouseover="ib2_expandCollapse();" onmouseout="ib2_expandCollapse();">
  <img style="position: absolute" src="http://www.jensgram.dk/gfx/jensgram2007.jpg" />
  <div id="infobox2" style="visibility: hidden; position: absolute; background: red; overflow: hidden">Her er noget tekst<br />Og mere...</div>
</a>
</body>
</html>

Dog skal jeg have hjælp til at få rettet noget.. Når man forlader billedet via tekstfeltet så forsvinder tekstfeltet desværre ikke. Altså skal der rodes lidt med onmouseeventen.. Kan i hjælpe?
Avatar billede majbom Novice
21. oktober 2008 - 08:58 #1
onmouseout="document.getElementById('infobox2').style.visibility='hidden'" ?
Avatar billede s0mmer Nybegynder
21. oktober 2008 - 14:39 #2
splazz > forklar venligst hvor det skal sættes ind.. og husk at den stadig skal "animeres" væk når man kører musen ud gennem tekstfeltet.
Avatar billede majbom Novice
21. oktober 2008 - 14:59 #3
kan man se scriptet i funktion?
Avatar billede w13 Novice
21. oktober 2008 - 15:22 #4
Hvor fremgår, at den burde animeres væk, og hvad vil det sige?

Ligesom Splazz ville jeg også gerne se det fungerende, før jeg kan hjælpe videre.
Avatar billede s0mmer Nybegynder
21. oktober 2008 - 16:28 #5
splazz & w13 > alt hvad der bruges er postet. copy & paste.. "+12" og "-8" angi pixels hvordan det skal opføres.. kopier og test den venligst selv, så forstår i.
Avatar billede w13 Novice
21. oktober 2008 - 16:31 #6
Hos mig forsvinder den fint.
Avatar billede majbom Novice
21. oktober 2008 - 18:43 #7
den virker osse fint hér i IE7
Avatar billede majbom Novice
21. oktober 2008 - 18:45 #8
jeg kan dog godt fremprovokere fejlen (tror jeg), hvis man kører musen henover div'en og "driller" den lidt og kører musen uden for div og billede (altså enten til venstre eller op fra div'en), så kan den godt findepå at blive stående.

er det det du mener?
Avatar billede s0mmer Nybegynder
22. oktober 2008 - 20:02 #9
splazz > ja præcis, hvis man forlader musen gennem div'en forsvinder den ikke.. ergo noget med onmouseeventen.
Avatar billede majbom Novice
22. oktober 2008 - 21:24 #10
prøv at sæt:

onmouseout="ib2_expandCollapse();"

på div'en

jeg ved ikke om det giver det ønskede resultat...
Avatar billede s0mmer Nybegynder
26. oktober 2008 - 01:31 #11
splazz > det var også mit umiddelbare gæt.. men virker desværre ikke :(
Avatar billede majbom Novice
26. oktober 2008 - 06:08 #12
nå, så ved jeg ikke rigtigt hvad man ellers kan gøre... jeg har set lignende problemer før, men ikke noget jeg har skulle tage stilling til om man vil, blot noet jeg er stødt på rundt omkring. så det kan godt være at det er en "bug"...
Avatar billede olebole Juniormester
26. oktober 2008 - 11:35 #13
<ole>

Det er ikke en bug, men en designfejl. Når du laver mouseover på billedet, trigges onmouseover handleren. Hvergang du herefter laver mouseover på et element inde i linket (billede og/eller tekstboks), vil det resultere i en affyring af onmouseout og onmouseover events. Al bevægelse med musen indnfor linket vil med andre ord resultere i en byge af events, der skal holdes styr på.

Det er langt mere komplekst at styre events i den slags scenarier, end det umiddelbart ser ud til  ;o)

/mvh
</bole>
Avatar billede majbom Novice
26. oktober 2008 - 14:34 #14
-> ole - jeg mente også en bug i selve scriptet, ikke i browseren eller sproget... men jeg havde da ikke lige tænkte på at den bare gik amok og sendte løst, selvom det jo egentlig er nemt at se når musen køres rundt over div'en og den blinker helt vildt..
Avatar billede s0mmer Nybegynder
27. november 2008 - 11:33 #15
lukker
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