login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Makkelijker manier hiervoor? (Opgelost)

Offline rolandt - 15/01/2009 22:15 (laatste wijziging 15/01/2009 22:18)
Avatar van rolandtNieuw lid Dit stukje html code staat tussen <body> en </body>

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="body_header">
  2. 	<h1>wasserleben</h1>
  3. 	<marquee class="walk" scrollamount="4" loop="2">welkom</marquee>
  4. </div> <!-- einde body_header -->	
  5.  
  6. <img src="wasserleben_001.jpg" class="small" width="608" height="400" alt="Foto wasserleben 1" />
  7.  
  8. <p></p>
  9. <a href="../heudeber.php"><img src="../img_menu/back.gif" class="fnl" width="139" height="39" alt="Terug button" /></a>
  10. <div id="end"></div>


Iedere keer wanneer er op een thumbail wordt geklikt wordt de des betreffende html pagina aangeroepen en laat de foto zien. De broncode van die pagina ziet er uit zoals hierboven.
Voor iedere foto moet ik een aparte html pagina maken. Het enige van in de broncode veranderd is de <img> aanroep.
Kan dit ook eenvoudiger zodat in een de zelfde html pagina de juist geselecteerd foto wordt getoond.

Grt,
Roland.

2 antwoorden

Gesponsorde links
Offline GJ2086 - 15/01/2009 22:23
Avatar van GJ2086 Nieuw lid Dan zou je mischien eens wat moeten proberen met Ajax (of javascript, dit zou je kunnenn realiseren door de afbeeldingen te pre loaden en deze laten weergeven wanneer er op de desbetreffende afbeelding is geklikt.)

Voorbeeld http://www.webdesignerwall.com/demo/jquery/

Zie kopje "Illustrations"
Offline Maarten - 16/01/2009 00:46
Avatar van Maarten Erelid Je kan dit ook bereiken zonder Ajax, wel met JavaScript.

Stel dat je 1 foto wilt weergeven met een pagina, die aangeroepen wordt als foto.html?foto=mijnhond.jpg.

Dan kan je in foto.html een stukje JavaScript gebruiken om de waarde "mijnhond.jpg" op te halen en de betreffende foto te laden:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function fotoNaam() {
  2.     // De querystring ophalen (foto=mijnhond.jpg&onzin=zekerweten)
  3.     queryString = window.location.search.substring(1);
  4.     // Opdelen in argumenten, gescheiden door &
  5.     args = queryString.split('&');
  6.     // Alle argumenten doorlopen
  7.     for(i = 0; i < args.length; i++) {
  8.         // Opsplitsen in 'foto' en 'mijnhond.jpg'
  9.         argDetail = args[i].split('=');
  10.         // We zoeken de waarde van 'foto', niet van 'onzin' of gelijk wat:
  11.         if(argDetail[0] == 'foto') {
  12.             return argDetail[1];
  13.         }
  14.     }
  15.     // Niks gevonden, false
  16.     return false;
  17. }
  18.  
  19. // Hier gebeurt het dan allemaal:
  20. var foto = fotoNaam();
  21. if(!foto) {
  22.     // Foto niet opgegeven, laadt een ander prentje, of die iets anders
  23.     foto = 'nietgevonden.jpg';
  24. }
  25.  
  26. // Toon de foto
  27. document.getElementById('foto').src = foto;


In je document zelf kan je dan een afbeelding gebruiken:

<img src="bezigMetLaden.jpg" alt="" id="foto" />

Normaal gezien zou dit hele zootje ervoor zorgen dat bij het laden van foto.html?foto=mijnhond.jpg de betreffende foto getoond wordt, zodat je slechts 1 pagina dient te maken.
Ik heb dit niet getest, maar je wordt geacht dit te trachten te begrijpen en hier eventueel zelf op verder te werken. Mocht het niet doen wat je verwacht helpt men je er graag mee verder.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.212s