In-en uitklappen tekst bij fora.

van Kimdierengek do 5 jan 2012 - 0:27

Juist. Klinkt vaag maar. Bij veel forum RPG's zijn er 'gebied plaatjes' en vaak ook een beschrijving van het gebied.
Ik wil dus dat die beschrijving niet te zien is, maar dat die tekst uitgeklapt word als je op het plaatje van het fora klikt. Ik heb dit eerder op een forum gezien en het is dus mogelijk, maar ik weet niet hoe. Weet iemand het hier?

van George do 5 jan 2012 - 12:46

Kun je een voorbeeld geven?

van **VJ.** vr 6 jan 2012 - 19:54

Ik heb hier een code voor, maar die moet ik eerst opzoeken.
Geef me even wat tijd, en als ik niet reageer stuur me even een bericht.

Tot snel.

van Kimdierengek za 7 jan 2012 - 22:31

@George: Op het forum http://dreamhorses.tk/ [Sorry als ik geen links mag plaatsen =o]

@VJ.: Oke, bedankt. Zou heel mooi zijn =3

van Badlands di 10 jan 2012 - 0:43

Dat is een javascript wat in het HTML vak van elke categorie is geplaatst.
Je kunt in principe elk gewenst effect erin zetten, ik zou zoeken naar "html text effect's" en "html image effects"

Als je met javascript en html aan de gang gaat, doe dan eerst even een testje met 1 categorie en kijk of het effect werkt en blijft werken.

Succes!

van Sioux vr 13 jan 2012 - 23:55

Ja, hier ben ik ook al een tijdje naar op zoek...

van Badlands vr 13 jan 2012 - 23:59

Sioux schreef:Ja, hier ben ik ook al een tijdje naar op zoek...

Heb je al gezocht naar "html text effect's" en "html image effects" ?
en heb je geprobeerd om deze als HTML toe te voegen aan een categorie?

van Sioux za 14 jan 2012 - 9:43

Badlands schreef:
Sioux schreef:Ja, hier ben ik ook al een tijdje naar op zoek...

Heb je al gezocht naar "html text effect's" en "html image effects" ?
en heb je geprobeerd om deze als HTML toe te voegen aan een categorie?

Ja, toen jij het had gezegd, ben ik meteen gaan zoeken, maar ik kon eigenlijk niks vinden... Hoewel, er was één site waar het op stond, alleen die werkte niet toen ik het zelf ging proberen Surprised

Daarnaast heb ik ook nog een Nederlandse site gevonden waar het wel op staat, maar deze doen het met een tekstje waar je dan op moet klikken en dan komt er een of ander blok tevoorschijn (http://www.html-site.nl/uitklappen.php), alleen weet ik niet hoe je het klikbare tekstje zeg maar moet veranderen in een plaatje, en het blok die er verschijnt wanneer op het tekstje is gedrukt te veranderen in gewoon tekst zonder opmaak. Kan iemand daarmee helpen?

van Badlands za 14 jan 2012 - 16:57

Ik ben nog aan het zoeken maar dit is een alternatief wat werkt:

Eerst een plaatje neerzetten en dan een linkje eronder waar je meer text mee kunt openen, je kan dan het plaatje zelfs nog ergens heen linken!

Om zo'n link te plaatsen gebruik je de volgende htmlcode en zet je hem in het html vak van een categorie, onder het plaatje:

Code:: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="Content-Script-Type" content="text/javascript"> <meta name="Content-Style-Type" content="text/css"> <title>Example</title> <style type="text/css">  </style> </head> <body onload="document.getElementById ('bettie-bio').className = 'hidden'"> <div> <img alt="LEES MEER" onclick="document.getElementById ('bettie-bio').className = document.getElementById ('bettie-bio').className == 'hidden' ? '' : 'hidden'" src=""> </div> <p id="bettie-bio">PLAATS HIER JE EIGEN TEKST</p> </body> </html>

In dit script hoef je alleen de text "LEES MEER" te veranderen en
de tekst die dan te voorschijn moet komen kun je invullen bij "PLAATS HIER JE EIGEN TEXT"

van Sioux za 14 jan 2012 - 18:00

Dankjewel!
Het werkt, gedeeltelijk, maar nu staat de tekst er al, en als je erop klikt gaat het weg, en ik denk dat we het allebei andersom bedoelen, dus dat je op het plaatje moet klikken en dat daarna de tekst pas verschijnt (a)

van Badlands za 14 jan 2012 - 18:16

De bedoeling van dit alternatief is dat je maar een link ziet: LEES MEER
zodra je daarop klikt, verschijnt er text onder. zoals hier

Als je daarboven dus een plaatje zet en je linkt dat plaatje naar een uitgebreide uitleg over die caterorie, bijvoorbeeld een topic, ben je er bijna.

Ik zou gewoon een plaatje linken naar het onderwerp (of een topic)
en dan de lees meer link eronder, hij moet echt werken, het voorbeeld hierboven is ook een phpbb2 forum.

Ik blijf zoeken naar die andere

van Sioux za 14 jan 2012 - 18:19

Uhu, dat begreep ik wel Wink

Trouwens, nou werkt ie wel ö Hij heeft een tijdje nodig om te laden, maar daarna staat wel gewoon de tekst braaf verborgen en komt pas tevoorschijn wanneer erop wordt geklikt...
Ja, maar ik gebruik dus eigenlijk PunBB, alleen was ik dat vergeten te zeggen en goed in te vullen in mijn profiel x)
Heel erg bedankt, en ik zoek ook nog even verder!

van Kimdierengek za 14 jan 2012 - 21:48

Deze lijkt er wel op ja, maar als ik deze HTML nu invul komt er dus net als op dat forum waarvan je het voorbeeld gaf een vakje waar je op moet klikken, dan komt de tekst tevoorschijn. Dat wil ik weer niet. Het moet echt een afbeelding zijn waar je op klikt waarna de tekst tevoorschijn moet komen.

van Shania za 14 jan 2012 - 22:36

Ik ga me hier even bij bemoeien.. Sorry. :'D

Sioux schreef:
Badlands schreef:
Sioux schreef:Ja, hier ben ik ook al een tijdje naar op zoek...

Heb je al gezocht naar "html text effect's" en "html image effects" ?
en heb je geprobeerd om deze als HTML toe te voegen aan een categorie?

Ja, toen jij het had gezegd, ben ik meteen gaan zoeken, maar ik kon eigenlijk niks vinden... Hoewel, er was één site waar het op stond, alleen die werkte niet toen ik het zelf ging proberen
Daarnaast heb ik ook nog een Nederlandse site gevonden waar het wel op staat, maar deze doen het met een tekstje waar je dan op moet klikken en dan komt er een of ander blok tevoorschijn (http://www.html-site.nl/uitklappen.php), alleen weet ik niet hoe je het klikbare tekstje zeg maar moet veranderen in een plaatje, en het blok die er verschijnt wanneer op het tekstje is gedrukt te veranderen in gewoon tekst zonder opmaak. Kan iemand daarmee helpen?

Als het goed is, werkt die code zoals je wil als je 'Hier de link naar de tekst hieronder.' vervangt voor '<img src="LINK VAN HET PLAATJE HIER" />' en bij dit stuk:

Code:: <style type="text/css"> #tekst { display: none; width: 250px; border: 1px solid black; background-color: #cccccc; padding: 5px; font-size: 12px; } </style>

de border en background-color weghaalt. :3 Ik weet niet zeker hoe ver je kan gaan met de rest, maar daar kan je zelf misschien nog wat mee experimenteren.~
Als dit niet werkt, zou ik het ook niet weten. Ik ben tenslotte geen HTML expert xD

Die andere code, van Badlands, werkt blijkbaar niet in Chrome. Bij Firefox ziet hij er bij mij uit zoals het hoort, maar als ik op Chrome kijk zie ik idd gewoon een blokje met een witte rand. Wink

van Sioux za 14 jan 2012 - 23:47

Ik zit ook op Chrome. Eerst deed hij het niet en liet hij ook een blokje zien, toen sloeg ik de CSS nogmaals op, en toen werkte het ineens wel...

van Badlands zo 15 jan 2012 - 14:47

Als het goed is, werkt die code zoals je wil als je 'Hier de link naar de tekst hieronder.' vervangt voor '<img src="LINK VAN HET PLAATJE HIER" />' en bij dit stuk:

<style type="text/css">
#tekst {
display: none;
width: 250px;
border: 1px solid black;
background-color: #cccccc;
padding: 5px;
font-size: 12px;
}
</style>
de border en background-color weghaalt. :3 Ik weet niet zeker hoe ver je kan gaan met de rest, maar daar kan je zelf misschien nog wat mee experimenteren.~
Als dit niet werkt, zou ik het ook niet weten. Ik ben tenslotte geen HTML expert xD

Beter Shania, het werkt goed!
De nieuwe code moet dan zijn:

Code:: <!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" xml:lang="nl" lang="nl"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-15" /> <title>Untitled</title> <style type="text/css"> #tekst { display: none; width: 250px; border: 0px solid black; padding: 5px; font-size: 12px; } </style> <script language="javascript"> function kadabra(zap) { if (document.getElementById) { var abra = document.getElementById(zap).style; if (abra.display == "block") { abra.display = "none"; } else { abra.display= "block"; } return false; } else { return true; } } </script> </head> <body> <a href="#" onclick="return kadabra('tekst');"> <img src="http://www.irado.nl/fileadmin/images/klik.png" /> <p id="tekst"> Dit kun je natuurlijk op allerlei manieren gaan gebruiken. Bijvoorbeeld voor een uitklapmenu of voor een vraagspel ofzo. In de stijl kun je aanpassingen doen aan de breedte en bijvoorbeeld de achtergrondkleur.</p> </body> </html>

Je hoeft nu inderdaad alleen het plaatje: http://www,irado,nl/fileadmin/images/klik.png
te veranderen in je eigen plaatje.

En dit is de tekst die je kunt aanpassen:

"Dit kun je natuurlijk op allerlei manieren gaan gebruiken.
Bijvoorbeeld voor een uitklapmenu of voor een vraagspel
ofzo. In de stijl kun je aanpassingen doen aan de breedte
en bijvoorbeeld de achtergrondkleur."

van Gast zo 15 jan 2012 - 16:22

Werkt deze code alleen op PunBB of ook op Phpbb2?

van Badlands zo 15 jan 2012 - 17:45

GH schreef:Werkt deze code alleen op PunBB of ook op Phpbb2?

Deze werkt bij allebei.

van Sioux zo 15 jan 2012 - 18:07

badlands schreef:
Code:
<!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" xml:lang="nl" lang="nl"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-15" /> <title>Untitled</title> <style type="text/css"> #tekst { display: none; width: 250px; border: 0px solid black; padding: 5px; font-size: 12px; } </style> <script language="javascript"> function kadabra(zap) { if (document.getElementById) { var abra = document.getElementById(zap).style; if (abra.display == "block") { abra.display = "none"; } else { abra.display= "block"; } return false; } else { return true; } } </script> </head> <body> <a href="#" onclick="return kadabra('tekst');"> <img src="http://www.irado.nl/fileadmin/images/klik.png" /> <p id="tekst"> Dit kun je natuurlijk op allerlei manieren gaan gebruiken. Bijvoorbeeld voor een uitklapmenu of voor een vraagspel ofzo. In de stijl kun je aanpassingen doen aan de breedte en bijvoorbeeld de achtergrondkleur.</p> </body> </html>

Nu klapt de tekst weer in wanneer je op de tekst klikt, maar is het ook mogelijk om de tekst weer te laten verdwijnen door op het plaatje te klikken?

van Badlands zo 15 jan 2012 - 19:50

Dat lijkt mij echt een beperking van je browser, misschien moet je firefox of Internet explorer gebruiken, ik kan gewoon op het plaatje en op de tekst klikken om het te laten verdwijnen.

van Sioux zo 15 jan 2012 - 19:53

Hee, je hebt gelijk, met Chrome werkt het niet, maar met FireFox wel :')
Echt supererg bedankt voor de code!

van Kimdierengek zo 20 mei 2012 - 23:19

Bij mij doet die code helaas vreemd..

Ik heb wel een nieuwe code, deze doet het wel.

Code:: <div class="main-content frm"><div class="main-head"><a name="overigeopties">Overige Opties.</a></div> <style> input.btn { color:#000000; font: bold 84% 'trebuchet ms',helvetica,sans-serif; background-color:#ffffff; border:1px solid; border-color: #000000; } </style> <div class="profilbouton" onClick="this.firstChild.value=(this.firstChild.value=='Lees meer')?'Verberg':'Lees meer';this.lastChild.style.display=(this.firstChild.value=='Lees meer')?'none':'block';" style="text-align: center;"><input type="button" value="Lees meer" class="btn"/><div class="verberg" style="display: none; text-align: left;"> <span style="font-size: 12px;"> VUL HIER DE TEKST IN DIE VERBORGEN IS </span></div></div></div> </div>

Maar als je hem uitprobeert zul je zien dat het een button is die je moet aanklikken, waarna de tekst verschijnt.
Weet iemand hoe je deze code zo aanpast dat je zelf een afbeelding kan kiezen, en als je die aanklikt, dat de tekst dan verschijnt, in plaats van deze button? Ik krijg namelijk helaas geen reactie terug van de mod..

van Badlands ma 21 mei 2012 - 22:33

Dat een is button formulier van een andere site, ik heb geen idee of je het kan aanpassen maar misschien werkt het door:

<input type="button" value="Lees meer"

te vervangen met:

<input type="image" value="http://myimage.jpg"

Laat anders even weten hoe de andere code vreemd doet, en wat de url van je forum is dan kan ik je eventueel verder helpen.

van Gast zo 27 mei 2012 - 23:30

Ik wil ook erg graag een goede code hiervoor. De code van badlands werkt wel bij mij, alleen zit er veel ruimte onder en boven de tekst en is hij altijd onderstreept.

Daarnaast wil ik dit ook graag op een ander forum van mij, maar dat is een Invisionfree forum. Werken de codes daar anders?

van **VJ.** vr 1 jun 2012 - 16:08

Als het goed is werken ze op alle fora, mits je ze goed invoert.
Wat bedoel je met teveel ruimte boven en onder de tekst, graag een Printscreen zodat ik kan zien wat er aan de hand is, en zo kan helpen.

In-en uitklappen tekst bij fora.

In-en uitklappen tekst bij fora.

Re: In-en uitklappen tekst bij fora.

Re: In-en uitklappen tekst bij fora.

Re: In-en uitklappen tekst bij fora.

html

Re: In-en uitklappen tekst bij fora.

Re: In-en uitklappen tekst bij fora.

Re: In-en uitklappen tekst bij fora.

Re: In-en uitklappen tekst bij fora.

Re: In-en uitklappen tekst bij fora.

Re: In-en uitklappen tekst bij fora.

Re: In-en uitklappen tekst bij fora.

Re: In-en uitklappen tekst bij fora.

Re: In-en uitklappen tekst bij fora.

Re: In-en uitklappen tekst bij fora.

het werkt

Re: In-en uitklappen tekst bij fora.

Re: In-en uitklappen tekst bij fora.

Re: In-en uitklappen tekst bij fora.

Re: In-en uitklappen tekst bij fora.

Re: In-en uitklappen tekst bij fora.

Re: In-en uitklappen tekst bij fora.

Re: In-en uitklappen tekst bij fora.

Re: In-en uitklappen tekst bij fora.

Re: In-en uitklappen tekst bij fora.