Voorbeeld #10 :
pop-up door gebruik van CSS
Werkende demo
Plaats cursor op ��n van de foto's
Gebruik onderstaande code
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1252">
<title></title>
<style type="text/css">
body {
font-family:
Verdana;
color:
#000000;
}
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest
image's height to prevent overlaying*/
}
.thumbnail img{
border:
1px solid white;
margin:
0 5px 5px 0;
color:
white;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border:
1px solid gray;
}
.thumbnail span{
/*CSS for enlarged image*/
position: absolute;
text-align: center;
background-color:
black;
padding:
5px;
left:
-1000px;
border:
5px solid gray;
visibility: hidden;
color:
white;
text-decoration: none;
width :450px;
}
.thumbnail span img{
/*CSS for enlarged image*/
border-width:
0;
padding:
2px;
}
.thumbnail:hover span{
/*CSS for enlarged image*/
visibility: visible;
top:
0px;
left:
180px;
/*position where enlarged image should
offset horizontally */
z-index: 0;
}
</style>
<body>
<div class="gallerycontainer">
<p align=left>
<a class="thumbnail"
href="#thumb"><img src="benaming_foto_0001.jpg"
width="66px"
height="100px"
border="0" /><span><img src="benaming_foto_0001.jpg"
/><br />tekst
hier plaatsen</span></a>
<a class="thumbnail"
href="#thumb"><img src="benaming_foto_0002.jpg"
width="66px"
height="100px"
border="0" /><span><img src="benaming_foto_0002.jpg"
/><br />tekst
hier plaatsen</span></a>
<br />
<a class="thumbnail"
href="#thumb"><img src="benaming_foto_0003.jpg"
width="66px"
height="100px"
border="0" /><span><img src="benaming_foto_0003.jpg"
/><br />tekst
hier plaatsen</span></a>
<a class="thumbnail"
href="#thumb"><img src="benaming_foto_0004.jpg"
width="66px"
height="100px"
border="0" /><span><img src="benaming_foto_0004.jpg"
/><br />tekst
hier plaatsen</span></a>
<br />
<a class="thumbnail"
href="#thumb"><img src="benaming_foto_0005.jpg"
width="66px"
height="100px"
border="0" /><span><img src="benaming_foto_0005.jpg"
/><br />tekst
hier plaatsen</span></a>
<a class="thumbnail"
href="#thumb"><img src="benaming_foto_0006.jpg"
width="66px"
height="100px"
border="0" /><span><img src="benaming_foto_0006.jpg"
/><br />tekst
hier plaatsen</span></a>
<br />
<a class="thumbnail"
href="#thumb"><img src="benaming_foto_0007.jpg"
width="66px"
height="100px"
border="0" /><span><img src="benaming_foto_0007.jpg.jpg"
/><br />tekst
hier plaatsen</span></a>
<a class="thumbnail"
href="#thumb"><img src="benaming_foto_0008.jpg"
width="66px"
height="100px"
border="0" /><span><img src="benaming_foto_0008.jpg.jpg"
/><br />tekst
hier plaatsen</span></a>
<br />
<a class="thumbnail"
href="#thumb"><img src="benaming_foto_0009.jpg"
width="66px"
height="100px"
border="0" /><span><img src="benaming_foto_0009.jpg"
/><br />tekst
hier plaatsen</span></a>
<a class="thumbnail"
href="#thumb"><img src="benaming_foto_0010.jpg"
width="66px"
height="100px"
border="0" /><span><img src="benaming_foto_0010.jpg"
/><br />tekst
hier plaatsen</span></a>
</p>
</div>
</body>
</html>
De rode tekst moet je zelf nog aanpassen.
De groene tekst kan je eventueel nog aanpassen.
Lees de gele tekst
|
OVERWEEG EEN DONATIE
Ben je tevreden over de gegeven informatie dan kan je als blijk van waardering voor de aangeboden hulp
steeds een donatie overwegen. Dit om de aangeboden hulp ook in de toekomst te kunnen blijven garanderen. Alvast bedankt. Webmaster |