Avatar billede s0mmer Nybegynder
27. november 2008 - 11:35 Der er 5 kommentarer

Hjælp til script

Hej eksperter!

Først kode (copy & paste og test inden i svarer så i forstår mig):


<!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...<br/>og mere...osv</div>
</a>
</body>
</html>



Problemet:
Som i selv lægger mærke til fungerer den ikke perfekt..
1. Hvis man med musen forlader ud gennem teksten
2. Hvis man forlader billedet inden gardinet er kommet helt ned

Det var to eksempler på hvordan scriptet så ikke vil fungere efter hensigten.

Hvordan kan det rettes? Jeg har før fået af vide at det ikke er så nemt at rette som det ser ud til. Men hvad ville alternativet være? Kan det laves på en anden måde?

200 points til bedste svar.
Avatar billede s0mmer Nybegynder
27. november 2008 - 11:36 #1
Derudover skal det siges at borsen.dk bruger et lign script til annoncer i højre side uden dette problem!
Avatar billede applezine Nybegynder
27. november 2008 - 11:43 #2
Hvad med at lave det i noget flash ?
Avatar billede olebole Juniormester
27. november 2008 - 15:32 #3
<ole>

Det er _væsentligt_ mere kompliceret at skrive den slags. Enten skal du ud i at diskriminere mellem alle de forskellige mouseover og -outs, der bliver fyret af, mens du kører rundt på billedet/teksten. En anden løsning er at gøre ligesom Google i deres GoogleMaps: Lægge et lag, som aftaster alle events, hen over resten

/mvh
</bole>
Avatar billede s0mmer Nybegynder
27. november 2008 - 18:17 #4
olebole > Kan du komme med eksempler? Er helt på bar bund..
Avatar billede olebole Juniormester
28. november 2008 - 00:39 #5
Ikke uden at skrive det for dig - og det gider jeg (med al respekt) ikke  =)
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