Thumbnail-scanlines/horizontale lijnen (CSS)

Deze tutorial wordt goed weergegeven in de Internet Explorer, maar niet in Mozilla Firefox!

 

De bedoeling van deze tutorial is dat je op een van de onderstaande thumbnails klikt. Je wordt dan doorverwezen naar de grote afbeelding. Als je die gezien hebt, krijg je de thumbnail met de witte lijnen te zien. In wezen geeft de laatste thumbnail dus aan dat de grote afbeelding bezocht is. Dit is wat ik gedaan heb:

Eerst heb ik TypoGenerator een aantal afbeeldingen laten creëren. Daarna heb ik met het programma Avatar Sizer, (freeware) en hier te downloaden, thumbnails gemaakt van de TypoGenerator-afbeeldingen.
(Je kunt daarvoor natuurlijk ook Paint Shop Pro of een ander programma gebruiken).
Met Paint Shop Pro heb ik de thumbnails voorzien van het blinds/lijnen-effect.
Dus in totaal heb ik 3 soorten afbeeldingen gemaakt:

• een grote - gemaakt door TypoGenerator
• een thumbnail - gemaakt met Avatar Sizer, en
• een thumbnail met streepjes-effect - gemaakt met PSP

           

* * *

De code komt van Stu Nicholls

tussen de style tags: #menu {position:relative; width:600px; padding:2em; height:10em;} .pic1, .pic2, .pic3, .pic4, .pic5, .pic6, {display:block; float:left; height:60px; width:80px; margin:3px;} #menu a:visited.pic1 {background:url(v_typo1.jpg);text-decoration:none;} #menu a:visited.pic2 {background:url(v_typo6.jpg);text-decoration:none;} #menu a:visited.pic3 {background:url(v_typo9.jpg);text-decoration:none;} #menu a:visited.pic4 {background:url(v_typo11.jpg);text-decoration:none;} #menu a:visited.pic5 {background:url(v_typo3.jpg);text-decoration:none;} #menu a:visited.pic6 {background:url(v_typo7.jpg);text-decoration:none;} #menu a.pic1 {background:url(typo1kl.jpg);text-decoration:none;} #menu a.pic2 {background:url(typo6kl.jpg);text-decoration:none;} #menu a.pic3 {background:url(typo9kl.jpg);text-decoration:none;} #menu a.pic4 {background:url(typo11kl.jpg);text-decoration:none;} #menu a.pic5 {background:url(typo3kl.jpg);text-decoration:none;} #menu a.pic6 {background:url(typo7kl.jpg);text-decoration:none;} tussen de body tags: <div id="menu"> <a class="pic1" href="typo1gr.jpg" target="_blank" title="image1">  </a> <a class="pic2" href="typo6gr.jpg" target="_blank" title="image6">  </a> <a class="pic3" href="typo9gr.jpg" target="_blank" title="image9">  </a> <a class="pic4" href="typo11gr.jpg" target="_blank" title="image11"> </a> <a class="pic5" href="typo3gr.jpg" target="_blank" title="image3">  </a> <a class="pic6" href="typo7gr.jpg" target="_blank" title="image7">  </a> </div>

 

---

Zie ook mijn andere tutorial over thumbnails.

 

Start | Tutorials | Korte Lesjes | CSS | Fonts | Filters | Links | Allerlei | Zoeken | PSP-varia | P-Filiaal