Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Thumbnails maken met CSS

Anoniem
None
2 antwoorden
  • 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
  • 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]

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.

Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord