login  Naam:   Wachtwoord: 
Registreer je!
 Forum

javascript image gallery (Opgelost)

Offline olminator - 28/07/2008 02:48
Avatar van olminatorNieuw lid ik ben aan het proberen om een pagina te maken waarop een plaatje te zien is, en dat er onder dat plaatje dan kleine plaatjes staan waarop je kan klikken, zodat het grote plaatje verandert in het plaatje dat je aangeklikt hebt. ik heb voor het rijtje onderaan een for-loop gebruikt, maar als je op het plaatje klikt, gebruikt hij hoe dan ook alleen de link van het laatste plaatje. misschien een beetje een moeilijke uitleg, dus kijk maar naar de code:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <title>Gallery</title>
  5. <script type="text/javascript">
  6. function pictureChange(p){
  7. document.getElementById('plaatje').src = p;
  8. }
  9. </script>
  10. </head>
  11.  
  12. <body>
  13. <center>
  14. <img src="images/image01.jpg" alt="" id="plaatje" />
  15. <script type="text/javascript">
  16. <!--
  17. x='images/image';
  18. document.write('<table><tr>');
  19. for (z=1; z<=10; z++)
  20. {
  21. if (z<=9)
  22. {
  23. z="0"+z;
  24. }
  25. y=x+z+".jpg";
  26. document.write('<td><a href="javascript:pictureChange(y)"><img src="' + y + '" alt="" width="100" /><\/a><\/td>');
  27. }
  28. document.write('<\/tr><\/table>');
  29. -->
  30. </script>
  31. </center>
  32. </body>
  33. </html>

2 antwoorden

Gesponsorde links
Offline Wave6 - 29/07/2008 00:44
Avatar van Wave6 PHP beginner
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. document.getElementById('div_voor_je_foto').innerHTML = "<a href="x:/link/naar/de/foto">Foto</a>";

dat verwerken achter een onClick...
Offline olminator - 30/07/2008 02:40 (laatste wijziging 30/07/2008 02:57)
Avatar van olminator Nieuw lid ja, maar het probleem is dat ik in een for-loop alles maak, maar als ik dan ook een link daarmee maak, gebruikt hij alleen het laatste getal uit de loop, en dus linkt hij alleen maar naar het laatste plaatje...
ik heb al een oplossing gevonden:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <title>Gallery</title>
  5. <script type="text/javascript">
  6. function pictureChange(mylink){
  7. if (!window.focus){return true}
  8. var href
  9. if (typeof(mylink) == 'string'){
  10. href = mylink
  11. }
  12. else {
  13. href = mylink.href
  14. }
  15. document.getElementById('plaatje').innerHTML = '<img src="' + href + '" alt="" />'
  16. return false
  17. }
  18. </script>
  19. </head>
  20.  
  21. <body>
  22. <center>
  23. <div id="plaatje">
  24. <img src="images/image01.jpg" alt="" />
  25. </div>
  26. <script type="text/javascript">
  27. <!--
  28. x='images/image';
  29. document.write('<table><tr>');
  30. for (z=1; z<=10; z++)
  31. {
  32. if (z<=9)
  33. {
  34. z="0"+z;
  35. }
  36. y=x+z+".jpg";
  37. document.write('<td><a href="' + y + '" onclick="return pictureChange(this)"><img src="' + y + '" alt="" width="100" /><\/a><\/td>');
  38. if (z%5 == 0){
  39. document.write('</tr><tr>')
  40. }
  41. }
  42. document.write('<\/tr><\/table>');
  43. -->
  44. </script>
  45. </center>
  46. </body>
  47. </html>


werkt perfect nu 
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.167s