Avatar billede playr-dk Nybegynder
30. april 2005 - 18:30 Der er 4 kommentarer og
1 løsning

Skift af billede

Hej,

Jeg har denne kode:
1.    <div class="boxHead">Overskift <img style="cursor:pointer;" onclick="toggleBox(1);" src="images/Aaben_box.gif" alt="Åben/Luk Box" width="18" height="18" name="1"></div>
2.        <div style="display: block;" id="Box1Luk">
3.            <span class="boxContents">kort</span>
4.        </div>
5.        <div style="display: none;" id="Box1Aaben">
6.            <span class="boxContents">lang</span>
7.        </div>
8.    </div>

Og denne:

1. function toggleBox(strID)
2. {
3.    if(boolNS4) return false;
4.
5.    objCurrentLuk = GetElement("Box"+strID+"Luk");
6.    objCurrentLuk.style.display = (objCurrentLuk.style.display=="none" ? "block" : "none");
7.
8.      objCurrentAaben = GetElement("Box"+strID+"Aaben");
9.    objCurrentAaben.style.display = (objCurrentAaben.style.display=="none" ? "block" : "none");
10.
11.    resizeIFrame();
12. }

Hvordan for jeg billedet images/Aaben_box.gif til at skifte sammen med display: none/block ??

mvh.
- Thomas
Avatar billede busschou Praktikant
30. april 2005 - 18:33 #1
giv billedet et id="dit_id" og så kan bruge
document.getElementsById(dit_id).src = "ny src"
Avatar billede busschou Praktikant
30. april 2005 - 18:36 #2
Så når du har flere bokse så ville et id = 1 nok være at foretrække
For så kan du i din funktion jo sige
document.getElementsById(strID).src = "ny src"
Du kan jo også tjekke på src
if (document.getElementsById(strID).src == "images/Aaben_box.gif"){
document.getElementsById(strID).src = "images/Lukket_box.gif"
}else{
document.getElementsById(strID).src = "images/Aaben_box.gif"
}
Avatar billede playr-dk Nybegynder
30. april 2005 - 18:39 #3
jeg prøver det lige.. 2 sek..
Avatar billede playr-dk Nybegynder
30. april 2005 - 18:52 #4
Jeg kan sgu ikke få det til at virke.

Jeg smider lige hele koden op, så kan man få overblikket.
Jeg ved det er en eller anden dum ting der ødelægger det ;)

test.htm:
<!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>
    <script type="text/javascript" src="default.js"></script>
  <style type="text/css">
    <!--
    .box {
        width:100px;
    }
    .boxHead {
        font-family: Tahoma, Helvetica;
        font-size: 11px;
        font-weight: bold;
        color: #000000;
        background-color:#ece9d8;
        padding:3px 6px 3px 6px;
        width:100%;
    }
    .boxContents {
        font-family: Tahoma, Helvetica;
        font-size: 11px;
        color: #000000;
        border:1px solid #ece9d8;
        background-color:#FFFFFF;       
        padding:3px 3px 3px 3px;
        width:100%;
    }
    -->
  </style>
</head>
<body onload="resizeIFrame();">
    <div class="box">
        <div class="boxHead">Overskift <img style="cursor:pointer;" onclick="toggleBox(1);" src="images/Aaben_box.gif" alt="Åben/Luk Box" width="18" height="18" name="Icon1"></div>
        <div style="display: block;" id="Box1Luk">
            <span class="boxContents">kort</span>
        </div>
        <div style="display: none;" id="Box1Aaben">
            <span class="boxContents">lang</span>
        </div>
    </div>
</body>
</html>

Og default.js:
var boolNS4 = navigator.appVersion.indexOf("Nav") > 0 && parseInt(navigator.appVersion) == 4;

function resizeIFrame() {
  objTable  = GetElement("tblProgrammer");
  objIFrame = GetParentElement("ProgramListning");

    if (document.getElementById) {
        // IE5+, Mozilla, Gecko
        objIFrame.height = objTable.offsetHeight;// + 20;
    } else if (!document.getElementById && document.all) {
        // IE4
        objIFrame.style.height = (objTable.offsetHeight + 20) + "px";
    } else if (document.layers) {
        // Netscape 4 - egentlig ligemeget da den ikke understøtter IFrames
        return false;
    } else {
        return false;
    }
}

function GetElement(strElement)
{
    if (document.getElementById)
    {
        // IE5+, Netscape 6, Mozilla
        return (document.getElementById(strElement));
    }
    else if (document.all)
    {
        // IE4
        return (eval("document.all." + strElement));
    }
    else if (document.layers)
    {
        // Netscape 4
        return (eval("document." + strElement));
    }
    else
    {
        // Crap!
        return (null);
    }
}

function GetParentElement(strElement)
{
    if (document.getElementById)
    {
        // IE5+, Netscape 6, Mozilla
        return (parent.document.getElementById(strElement));
    }
    else if (document.all)
    {
        // IE4
        return (eval("parent.document.all."+strElement));
    }
    else if (boolNS4)
    {
        // Netscape 4
        return (eval("document."+strElement));
    }
    else
    {
        // Crap!
        return (null);
    }
}

function toggleBox(strID)
{
  if(boolNS4) return false;

  objCurrentLuk = GetElement("Box"+strID+"Luk");
  objCurrentLuk.style.display = (objCurrentLuk.style.display=="none" ? "block" : "none");
       
    objCurrentAaben = GetElement("Box"+strID+"Aaben");
  objCurrentAaben.style.display = (objCurrentAaben.style.display=="none" ? "block" : "none");

    objCurrentImg = GetElement("Icon"+strID);
  objCurrentImg.src = (objCurrentImg.src == "images/Aaben_box.gif" ? "images/Luk_box.gif" : "images/Aaben_box.gif");

  resizeIFrame();
}


Håber at I kan få det til at fungere. Det er meningen at det skal laves dynmisk, derfor er strID med. Den er dog sat til at være statisk (1) for at få det til at fungere 100% crossbrowser først.

- Thomas
Avatar billede playr-dk Nybegynder
30. april 2005 - 20:12 #5
Jeg lukker dette spørgsmål, da det er for forvirrende :)
Jeg oprette et nyt hvor det er til at finde ud af.

- Thomas
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