Søg
Avatar billede jobless Nybegynder
27. april 2003 - 18:19 Der er 13 kommentarer og
1 løsning

Vis/skjul og skift grafik (expand/colapse)

Hej.

Jeg er total newbie i javascript.

Alligevel har jeg (med hjælp) fået strikket noget kode sammen, som gør at:
Når jeg klikker på et + vises en row i en tabel, og når jeg klikker på et - skjules denne row.
Jeg arbejder med et dynamisk antal, da det er på baggrund af et databaseudtræk.
Så langt så godt.
Nu vil jeg gerne (istedet for mine +- taster) gerne have vist det som grafik, som skifter onClick, altså et +- som i alm. MS explorer stil (jeg har ikoner)

Hvordan gør jeg det?

MVH

JoBless
Avatar billede hcichosz Praktikant
27. april 2003 - 18:31 #1
Hej
uden at have set dit schript vil jeg tro at du skal putter det her ind der hvor der står + og - i din kode og skift DIT_BILLEDE.gif ud med det billede du vil bruge
<img src="DIT_BILLEDE.gif" border="0">

mvh H Cichosz
Avatar billede hcichosz Praktikant
27. april 2003 - 18:33 #2
vis det er ikoner heder det jo DIT_BILLEDE.ico
Avatar billede =maddog= Nybegynder
27. april 2003 - 18:50 #3
// Disse svarer til relative fil navne
var expanded = "images/expanded.gif";
var collapsed = "images/collapsed.gif";
function changeImg(obj) {
  obj.src=(obj.src==expanded)?collapsed:expanded;
}

...
<img src="images/collapsed.gif" onclick="changeImg(this);">
Avatar billede jobless Nybegynder
27. april 2003 - 19:05 #4
hcichosz: Jeg kender til html, og kan godt finde ud af at sætte et billede ind ;=)

=maddog=: Vi er inde på det rigtige her, men jeg mangler lige at kunne håndtere om tråden skal udvides eller lukkes, da jeg nu kun har en onClock event (før havde jeg forskellig kode på hhv. + og -)
Avatar billede =maddog= Nybegynder
27. april 2003 - 19:09 #5
må jeg se det tag der håndterer expand/collapse monstro?
Avatar billede jobless Nybegynder
27. april 2003 - 19:15 #6
Jeg tester lige din (=maddog=) kode, og kan tilsyneladende ikke så den til at lukke igen (virker fint ved første klik).

Jeg har koden på arbejde, og henter den med hjem imorgen. Koden er bygget op sådan, at de rows som skal håndteres får et ID, og onclick kører f.eks block på dette ID.

Har du en smatere måde at lave det på, det skal helst være sådan at hver enkelt tråd kan stå åben, uden at de andre lukker?
Avatar billede =maddog= Nybegynder
27. april 2003 - 19:19 #7
der er flere expand/collapse scripts end der er kinesere. jeg vil helst se noget kode først.
du siger du tester. du må da have noget at teste med.
Avatar billede jobless Nybegynder
27. april 2003 - 19:20 #8
Jeg forsøger først at få følgende til at skifte frem-tilbage-frem..... osv.:


<HTML>

<body>

<script language="JavaScript">
var expanded = "minus.gif";
var collapsed = "plus.gif";
function changeImg(obj) {
  obj.src=(obj.src==expanded)?collapsed:expanded;
}

</script>

<img src="plus.gif" onclick="changeImg(this);">

</BODY>
</HTML>
Avatar billede =maddog= Nybegynder
27. april 2003 - 19:29 #9
obj.src=(obj.src.substring(obj.src.lastIndexOf('/')+1)==expanded)?collapsed:expanded;
i stedet for. den insisterer på absolut URL. du skal derfor KUN bruge filnavn og ikke sti for de to variable (hvilket du også gør).
var expanded = "minus.gif"; //og
var collapsed = "plus.gif";
Avatar billede jobless Nybegynder
27. april 2003 - 19:41 #10
Nu virker det med at skifte frem og tilbage.

Koden jeg bruger til at skjule med er:

<img src="plus.gif" Onclick="document.getElementById('Test1').style.display = 'none'"">

Hvordan får jeg dette (og vis-koden) implementeret i den ovennævnte kode?
Avatar billede =maddog= Nybegynder
27. april 2003 - 19:50 #11
function changeImg(obj) {
      if (obj.src.substring(obj.src.lastIndexOf('/')+1)==expanded) {
      document.getElementById("Test1").style.display = "none";
      obj.src = collapsed;
    } else {
      document.getElementById("Test1").style.display = "block";
      obj.src = expanded;
    }
}

hvis du da bruger display:block; til genvisning. ellers sæt display til det den skal være ved visning.
Avatar billede jobless Nybegynder
27. april 2003 - 19:59 #12
Vi er næsten i mål nu.....

Jeg mangler bare at kunne overføre min variabel "test1" sammen med kaldet af funktionen.

Jeg har prøvet at skifte "test1" med obj, men uden held.
Avatar billede jobless Nybegynder
27. april 2003 - 20:27 #13
Troer at jeg har den nu:

var expanded = "minus.gif";
var collapsed = "plus.gif";
function changeImg(obj, trID) {
      if (obj.src.substring(obj.src.lastIndexOf('/')+1)==expanded) {
      document.getElementById(trID).style.display = "none";
      obj.src = collapsed;
    } else {
      document.getElementById(trID).style.display = "block";
      obj.src = expanded;
    }
}

</script>

MVh

JoBless
Avatar billede =maddog= Nybegynder
27. april 2003 - 20:43 #14
jeps. jeg tænkte også på det, men glemte det i farten.
jeg ligger et svar. hvis det er i orden i morgen kan du acceptere, ellers må vi lige tage endnu et kig.
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 21/08/202610:41
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
31/0810:26 Synkronisering af kalender mellem computer, android telefon og iPhone Af Strawberry i Andre onlineløsninger
31/0810:24 Kan Excel selv beregne alder? Af leahcim i Excel
30/0815:02 Gemme besked fra Facebook / Messenger Af lurup i Sociale medier
29/0820:17 Kan man kopiere en DVD og afspille den på * Linux Mint - Cinnamon - 22.1 - "Xia" * ? Af Ikke-ekspert i Linux
27/0821:03 Kan man få Word viewer gratis Af Strawberry i Word
White papers
Flere white papers »