Avatar billede asbury Praktikant
07. januar 2009 - 22:22 Der er 8 kommentarer og
1 løsning

Et swap image problem

Jeg er ved at lave en site og har i forbindelse med menuen brug for at der skal skifte et billed ud npår man klikker på et tekst link. Linket består af tekst og ved siden af i sammen tabel men i en anden rude er en mappe som jeg gerne ville havde til at skifte fra lukket til åben når man klikker på teksten.
Har ikke rigtigt kunne finde en simpel løsning .
Håber at der er nogen det ligger inden med et forslag.
Avatar billede tjens Nybegynder
07. januar 2009 - 23:15 #1
<html><head>
<script type="text/javascript">
function chgToOpenIcon(oImg) {
    // her skrives evt. kode til at lukke tidligere åbnede ikoner
    oImg.src="OpenIcon.gif";
}
</script>
</head>
<body>
<table>
  <tr>
    <td><img src="ClosedIcon.gif"></td><td><a href="#" onclick="chgToOpenIcon(this.parentNode.previousSibling.firstChild)">Klik her</a></td>
  </tr>
</table>
</body></html>
Avatar billede asbury Praktikant
08. januar 2009 - 00:13 #2
Hej tjens det virker udmiddelbart meget fint det skifter iconet men det fjerner også teksten og den skulle gerne bliver tilbage.
Hvis du har andre foreslag ville det være fint.
Men ellers mange tak.
Avatar billede tjens Nybegynder
08. januar 2009 - 10:10 #3
Hmm.. Hvis du har kopieret mit eksempel uden ændringer, kan jeg ikke se hvordan teksten skulle forsvinde.

Men metoden er meget følsom for ændringer i HTML p.g.a. linien this.parentNode.previousSibling.firstChild

Forklaring:

this.        <A> elementet
parentNode.  <TD> nummer 2
previousSibling. <TD> nummer 1
firstChild      <IMG> elementet

Hvis dine TD'er ikke er helt som ovenstående, skal du ændre tilsvarende navigationen til IMG elementet.

Vis os hele <TR> ... </TR> fra din kode herinde, hvis du er i tvivl.
Avatar billede asbury Praktikant
08. januar 2009 - 13:08 #4
Hej Tjens
Dette er noget af menu'en , de resterende ligner.
Da jeg kopieret dit forslag skifted jeg iconerne ud med nogle andre men ellers det samme.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <th width="7%" scope="col">&nbsp;</th>
    <th width="3%" scope="col"><font face="Arial" size="2"><img src="mappe_aben.gif" alt="" width="38" height="16" border="0"></font></th>
    <th width="4%" scope="col"></th>
    <td width="86%" height="18" align="left" scope="col"><a href="shelter.htm">2007 <em>SHELTER</em>. "Grønningen", Charlottenborg, København og "Neighbourhood & Grass", Kunsthallen Brændegården, Viborg</a> </td>
  </tr>
</table>

Det er til en site some jeg skal opdatere, men ham der har lavet den har gjord opdateringen af menu'en meget arbejdskrævende så jeg ville egentlige bare lave det så jeg kun skulle rette i en menu.
Problemet ligger i at ejeren af siden, gerne vil havde sådan et icon med mappe
åben/lukket ude i siden når man klikke på et link.
www.campau.dk er siten.
Avatar billede tjens Nybegynder
08. januar 2009 - 22:58 #5
Hej igen

Jeg har lavet et forslag hvor menuen dannes af javascript, i stedet for at stå i HTMLen på hver eneste side.

På hver HTML side skal menuen selvfølgelig fjernes, og i stedet skal der tilføjes i bunden af HEAD samt på BODY:

<link rel="stylesheet" type="text/css" href="menuStyle.css" />
<script src="createMenu.js"></script>
</HEAD>
<BODY onload="CreateMenu();">

og i bunden af BODY;

<div id="menuDiv"><table id="menuTable"></table></div>


Scriptet createMenu.js ser således ud:

var aMenu = new Array(
"Xerto#2004#Flere Billeder bla bla",
"Balut#2003#Nogen billeder blu blu"
);
function CreateMenu() {
    var denneSide = "" + document.location;
    denneSide = denneSide.substring( denneSide.lastIndexOf('/') + 1, denneSide.lastIndexOf('.') );
    var oMenuTable = document.getElementById('menuTable');
    if (document.all) oMenuTable = document.getElementById('menuTable').firstChild;
    for (var i = 0; i < aMenu.length; i++) {
        var line = aMenu[i].split("#");
        var oIMG = document.createElement('img');
        if ( line[0] == denneSide) {
            oIMG.src="mappe_aben.gif";
        }else{   
            oIMG.src="mappe_lukket.gif";
        }
        var oTR = document.createElement('tr');
        var oTD = document.createElement('td'); oTR.appendChild(oTD);
        oTD.className = "imgCol";
        oTD.appendChild(oIMG);
   
        var oLink = document.createElement('a');
        var oTD = document.createElement('td'); oTR.appendChild(oTD);
        oTD.className = "linkCol";
        oTD.appendChild(oLink);
        oLink.href = line[0] + '.html';
        oAarstal = document.createElement('span'); oLink.appendChild(oAarstal);
        oAarstal.className="aarstal"
        oAarstal.appendChild(document.createTextNode( ' ' + line[1] + ' ' ) );
       
        oSidenavn = document.createElement('span'); oLink.appendChild(oSidenavn);
        oSidenavn.className="sidenavn"
        oSidenavn.appendChild(document.createTextNode( ' ' + line[0]  + ' ') );
        oSidetekst = document.createElement('span'); oLink.appendChild(oSidetekst);
        oSidetekst.className="sidetekst"
        oSidetekst.appendChild(document.createTextNode( ' ' + line[2] ) );
        oMenuTable.appendChild(oTR);
    }

}

Læg mærke til at hver menulinie blot er en tekststreng i en array.
Det er uhyre nemt at lægge en ny linie på.

Se demo her: http://tjens.dk/eksperten/858939/Xerto.html
Avatar billede asbury Praktikant
10. januar 2009 - 18:00 #6
Hej Tjens
Det ser bare rigtigt fint ud, jeg er ikke nogen haj til det der med java men jeg tror at jeg har fået det tilpasset til mit brug . Men jeg kan ikke lige finde udaf hvordan jeg skal få placeret menuen der hvor jeg gerne vil havde den. Har prøvet flere forskellige løsninger.
Du kan se det her  http://www.asbury.dk/menu/index.html jeg ville gerne havde havde menu til at flugte billederne oven over i venstre side.
Kan man styre menuen til en bestemt celle i tabel , eller er et noget mere java.
Avatar billede tjens Nybegynder
10. januar 2009 - 20:17 #7
Ideen med
<link rel="stylesheet" type="text/css" href="menuStyle.css" />
var at du kunne skrive noget css, som styrer placering og udseende.

Men da der allerede er en centreret tabel i siden, kan du også sætte den nye
menuTable ind i denne i en ny <TR>, i stedet for at tilføje den til sidst.

Så skal bunden af din side se således ud:

...
      <area href="shelter_10.htm" shape="rect" coords="623, 105, 769, 204">
</map><font face="Arial" size="2"><img border="0" src="smal_shelter.jpg" usemap="#FPMap0" width="770" height="205"></font></td>
  </tr>

  <tr>
    <td height="100"> </td>
  </tr>
  <tr>
    <td>
    <table align="left" id="menuTable"></table>
    </td>
  </tr >

</table>
</body>
</html>


Og så drop
<link rel="stylesheet" type="text/css" href="menuStyle.css" />
linien
og som du ser har jeg fjernet menuDiv, da den var beregnet til css-centrering.

PS: Der er ikke noget java i det her: Spørgsmålet hører under javascript ;-)
Avatar billede asbury Praktikant
11. januar 2009 - 22:03 #8
Hej Tjens
Håber ikke det er for påtrængende, det ser rigtigt fint ud men jeg har selvfølglig lige et par ting. Det er helt fint hvis du slutter her.
Jeg har prøvet at skriver noget med ø i teksten til overskriften et virker ikke somom det er en mulighed, der kommer bare en firkant.

Er det muligt dvs. nemt at tilføje en subnode, undermappe til hver mappe.

Og tak for hint med css har kikked lidt nærmere på det.
Avatar billede tjens Nybegynder
12. januar 2009 - 13:13 #9
Hej.

Danske tegn burde virke, hvis der er konsistens i sidens definerede tegnsæt, og det din editor er indstillet til.

http://www.asbury.dk/menu/index.html  har en UTF-8 markering i toppen.

Check om din editor gemmer createMenu.js som UTF-8 også.

Ja, du bør nok lukke dette spøgsmål.
Også fordi flere "eksperter" kigger på det, hvis du opretter i den rigtige kategori.
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
Kurser inden for grundlæggende programmering

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