anoniem Geplaatst: 16 oktober 2003 Delen Geplaatst: 16 oktober 2003 Dit kan gedaan worden op deze manier: [code:1:f597f49475] In stylesheet: div.float { float: left; } div.float p { text-align: center; } In HTML: <div class="float"> <img src="image1.gif" width="100" height="100" alt="image 1" /><br /> <p>caption 1</p> </div> <div class="float"> <img src="image2.gif" width="100" height="100" alt="image 2" /><br /> <p>caption 2</p> </div> <div class="float"> <img src="image3.gif" width="100" height="100" alt="image 3" /><br /> <p>caption 3</p> </div> [/code:1:f597f49475] Maar ik zit met het volgende probleem, ik wil wanneer de bezoeker klikt op een plaatje, het plaatje opgeladen wordt op een bepaalde plek op dezelfde pagina. Dus niet opnieuw met een nieuwe venster...(weet iemand trouwens hoe ik een opgeladen nieuw venster een vaster grootte kan geven?) Het liefst wil ik dan het grote plaatje opgeladen wordt zonder dat er geklikt hoeft te worden. Hoe doe ik dit? Als bij "niet klikken" ingewikkelde scripts nodig zijn, dan hoef het niet, dan ben ik alleen benieuwd in "plaatje opgeladen op een plek op dezelfde pagina". bedankt Quote Link naar reactie
anoniem Geplaatst: 16 oktober 2003 Auteur Delen Geplaatst: 16 oktober 2003 Voor deze keer dan. Scriptje kan geoptimaliseerd worden natuurlijk zodat je geen event attributen nodig hebt, ik haat die dingen persoonlijk, maar ik wilde het even snel maken. Voortaan geen script requests meer he?[code:1:e3a80c2747]<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xml:lang="nl"> <head> <title>TEST</title> <style type="text/css"> html,body{ margin:0; padding:0; } div#small-images p{ float:left; } div#big-images{ clear:both; } div#big-images p{ display:none; } </style> <script type="text/javascript"> function showBigImage(imageid){ document.getElementById(imageid).style.display = "block"; } function hideBigImage(imageid){ document.getElementById(imageid).style.display = "none"; } </script> <noscript><style type="text/css"> div#big-images p{ display:block; } </style></noscript> </head> <body> <div id="small-images"> <p onmouseover="showBigImage('image1');" onmouseout="hideBigImage('image1');"> <img src="image1.gif" width="100" height="100" alt="image 1" /><br /> caption 1 </p> <p onmouseover="showBigImage('image2');" onmouseout="hideBigImage('image2');"> <img src="image2.gif" width="100" height="100" alt="image 2" /><br /> caption 2 </p> <p onmouseover="showBigImage('image3');" onmouseout="hideBigImage('image3');"> <img src="image3.gif" width="100" height="100" alt="image 3" /><br /> caption 3 </p> </div> <div id="big-images"> <p id="image1"><img src="" alt="big image 1" /></p> <p id="image2"><img src="" alt="big image 2" /></p> <p id="image3"><img src="" alt="big image 3" /></p> </div> </body> </html>[/code:1:e3a80c2747] Quote Link naar reactie
Aanbevolen berichten
Om een reactie te plaatsen, moet je eerst inloggen