Klap uit

Status
Niet open voor verdere reacties.
J

Just1

Gebruiker
Lid geworden
18 jan 2010
Berichten
118
Hallo,
Ik heb de volgende HTML code:
Code: 
<script type="text/javascript">function showcodes(a,codediv){   var divje = document.getElementById( codediv );   if (divje.style.display == "block")   {      divje.style.display = "none";      a.innerHTML='Klap uit';   }   else   {      divje.style.display = "block";      a.innerHTML='Klap in';   }}</script>
<span style="cursor: pointer;" onclick="showcodes(this,'div_tekst');">Klap uit</span><div id="div_tekst" style="display: none;">tekst</div>
Ik wil nu alleen afbeeldingen gebruiken in plaats van de tekst klap in en klap uit.
Hoe kan ik dit oplossen?
Alvast bedankt,
Just
 
[JS]function klapPlaatje(img)
{
var plaatje = document.getElementById(img);

plaatje.style.display = (plaatje.style.display != 'none') ? 'none' : 'block';
}[/JS]
HTML: 
<img src='een_plaatje.ext' id='mijnPlaatje' />

<button onclick='klapPlaatje("mijnPlaatje");'>klap plaatje!</button>
zoiets?
 
Laatst bewerkt:
Nee, helaas niet wat ik zoek. Ik wil dat de button 'klap plaatje' word vervangen door het plaatje.
 
ja maar... dan kan-ie niet meer zichtbaar worden nadat je m ingeklapt hebt! Daarnaast... het is gewoon dezelfde code, maar dan de onclick op het plaatje...

HTML: 
<img onclick='klapPlaatje("mijnPlaatje");' src='een_plaatje.ext' id='mijnPlaatje' />
of, je haalt de gEBY regel wel uit het script en gebruikt this, maargoed, zelfde idee.
 
Wat ik eigenlijk wil is een afbeelding (die verandert bij mouseover maar dat kan ik zelf) en als je daarop klikt dat je dan een heel stukje html krijgt (afbeeldingen en tekst en tabellen).
Is dat mogelijk?
Just
 
uhm...
[JS]function klapObject(img, wrap)
{
//img = document.getElementById(img);
wrap = document.getElementById(wrapper);

if(wrap.style.display != 'none')
{
//img.style.display = 'block';
wrap.style.display = 'none';
}else{
//img.style.display = 'none';
wrap.style.display = 'block';
}
}[/JS]
HTML: 
<img src='img.png' id='klapImage' onclick='klapObject("klapImage","klapWrapper");' />
<div id='klapWrapper'>
   <!-- hier al je stuff -->
</div>
als je wilt dat het plaatje verdwijnt, moet je even de regels un-commenten. Maargoed, nogmaals, dan kan het niet meer zichtbaar worden want je klap-trigger is onzichtbaar.
 
Laatst bewerkt:
Heel erg bedankt voor de moeite maar je script werkt niet...
En standaart moet alles ingeklapt zijn.
Helaas weet ik (bijna) niks van JavaScript.
Just
 
Laatst bewerkt:
Juistem. - Ik had intussen deze bedacht, voor als er meer uitklappertjes op één pagina staan:
HTML: 
<script type="text/javascript">
	// alleen de uitklappers verbergen als javascript aan staat,
	// anders zijn ze niet met uitgeschakeld javascript te zien!
	document.write('<style type="text/css">');
	document.write('    .tips { display: none; }');
	document.write('<\/style>');

function toggleTips(objId) {
	var obj = document.getElementById(objId);
		if (obj.style.display == 'block'){
			obj.style.display = 'none';
		}
		else obj.style.display = 'block'; // ook als display niet gedefinieerd is!
	}
</script>
En dan:
HTML: 
<p class="tipsbutton"><a href="uitklap-tips.htm" 
	onclick="toggleTips('tips01'); return false;" 
	title="Klik tips aan of uit"><img 
	src="images/transp1x1.gif" width="44" height="20" alt=""></a></p>

<div id="tips01" class="tips">
	<h2>Een mooie serie tips.</h2>
	<p>...</p>
</div>
Hierbij zit het button-plaatje er als achtergrond-figuur in, die met css-hover van gedaante kan veranderen.
Met vriendelijke groet,
CSShunter
 
Heel erg bedankt. Ik ben eruit.
Nog een laatste vraag: wat moet ik aan het script veranderen als ik wil dat de tip weer verborgen word als je ergens anders op het scherm klikt?
Just
 
Ah, dat kan ook. Met nog een functie'tje erbij:
HTML: 
function hideTips(objId) {
		var obj = document.getElementById(objId);
		obj.style.display = 'none';
	}
Die kan aangeroepen worden met de link:
HTML: 
<a class="tipClose" href="#" onclick="hideTips('tips02'); return false;">Sluit tips</a>
waar je desgewenst ook een plaatje aan vast kunt knopen.
  • Het geheel kan je hier in werking zien (stukkie naar beneden scrollen).
  • En nog iets verder is een toepassing waarbij je iets kunt aanklikken, waarna een verschillende uitklapper tevoorschijn komt (afhankelijk van je keuze)
Succes!
CSShunter
 
Bedankt, maar ik bedoelde eigenlijk of het mogelijk is om die 'tip' te verbergen als je ergens op de pagina klikt en niet op één link
 
Dat zou misschien wel kunnen: maar dat betekent denk ik wel, dat alle andere links op de pagina (als die er zijn) het niet dan meer doen *). En waarschijnlijk ook dat de bezoeker geen tekst enz. meer kan selecteren om te kopiëren.
Wil je dat?
  • Of heb je een link naar hoe het moet worden? Dan kan er misschien een alternatief verzonnen worden. Nu is het raden hoe opzet van de pagina is, en wat er op moet komen te staan: is het alleen een foto-wissel pagina, of zit er meer op, of moet er een menu bij, enz.; dat maakt nogal een verschil. ;)
Met vriendelijke groet,
CSShunter

*) Of heel misschien (dat weet ik niet zeker, hangt ook van de pagina af) met een behoorlijk pittig javascript - met het risico dat de pagina ontoegankelijk wordt als javascript uit staat.
 
Ik heb het nu nog niet online.
Ik heb een soort menu (vergelijk het maar met menu start van Windows) met tabellen, tekst en afbeeldingen. Nu wil ik graag dat dat mnu weer verdwijnt als je ergens anders op het scherm klikt (net als bij Windows). Als je de pagina laad is het menu niet te zien en het komt tevoorschijn als je op een afbeelding klikt.
Just
 
Ahhhhh! :D
Zou het ook goed zijn als het menu verschijnt als je ergens gewoon op gaat staan (zonder te klikken), en als het menu dan weer verdwijnt (zonder te klikken) als je van het menu af zweeft?
Er kunnen in het opgeroepen venster dus ook aanklikbare tabellen, tekst, afbeeldingen, enz.enz. komen te staan. :)

Met vriendelijke groet,
CSS-hunter
 
Ik heb het lievste het menu dat ik nu heb alleen dan dat het verdwijnt als je ergens anders op het scherm klikt zoals hier(maar dan met afbeeldingen enzo en zonder effecten).
Maar als dat niet mogelijk is, dan maar een van jouw voorbeelden.
Just
 
Laatst bewerkt:
Hoi Just1,
Helaas, dat klikmenu-script van leejoo is volstrekt onbruikbaar. :(
- Ik maar klikken op het "klik voor menu", en er gebeurde maar niets. Toen kreeg ik een lumineus idee: Internet Explorer! (ik gebruik Firefox). Ja, daar deed ie het. Toen de rest: Opera, Safari, Chrome even geprobeerd: doen het allemaal niet.
En geen wonder!
  • Als je de html-validator checkt, zitten in die leejoo-pagina 54 html-errors. Er zitten bv. <layer> en <ilayer> tags in, uit het grijze verleden van Netscape, die geen valid html zijn.
  • Als je de broncode bekijkt, zie je behalve veel fouten ook IE-only codes. Dat werkt dus niet!
Met vriendelijke groet,
CSShunter
 
Jammer, maar bestaat zoiets wel zonder fouten? Zoja, weet je ook hoe?
Just
 
Jammer, maar bestaat zoiets wel zonder fouten?
Klik om te vergroten...
  • Zou in principe denk ik wel moeten kunnen (=omvorming in javascript van de opdracht "als menu uitgeklapt" > "dan bij eerstvolgende klik buiten het menu: menu sluiten" en "elke daarna volgende klik als gewone klik behandelen" / "als menu ingeklapt staat" > "dan ook elke klik als gewone klik behandelen"}
Zo ja, weet je ook hoe?
Klik om te vergroten...
  • Vermoedelijk moet je hiervoor een zg. "event listener" inbouwen, die reageert op een klik op een willekeurige plek. Het fijne weet ik daar niet van af.
  • Maar misschien kan je de vraag beter posten in de forum-rubriek javascript, want daar zitten scripters die zéér bekwaam zijn. :)
Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan