Voorbeeld #9 :
pop-up door gebruik van CSS
Werkende demo
Plaats cursor op de foto
Gebruik onderstaande code
<html>
<head>
<title></title>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso-8859-1">
<style type="text/css">
.surround { /* surrounding div (used to be zoom) */
color:#000;
width:90%;
margin:0px;
padding:0px;
font:10pt verdana, helvetica, arial, sans-serif;
}
.surround p { /* div'd paragraph formatting */
padding:0;
margin:0;
margin-bottom:10px;
}
.PZ3-l { float:left; margin-right:30px; margin-bottom:10px;}
.PZ3-r { float:right; margin-left:30px; margin-bottom:10px; direction:rtl; }
[class~=PZ3-r] { position:relative; }
.PZ3zoom { border:1px solid #000; }
.PZ3zoom a,.PZ3zoom a:visited {
display:block;
padding:0; overflow:hidden; text-decoration:none;
height:100%; width:100%; }
[class~=PZ3-r]>a { right:0; }
.PZ3zoom a:hover { position:absolute;
z-index:999; padding:20px; background:#000000;
cursor:default; height:auto; width:auto;
overflow:visible; border:1px solid #000;
margin:-1px 0 0 -1px;
top:10px; left:25px;}
[class~=PZ3-r]>a:hover { margin:-1px -1px 0 0; }
.PZ3zoom a img { border:0; height:100%; width:100%; }
.PZ3zoom a:hover img { height:auto; width:auto;
border:0; }
a:hover .PZ3cap {
display:block;
direction:ltr; font:10pt verdana,sans-serif;
padding:2px 5px; margin-top:-3px;
background:#000; color:#fff;
text-align:left; /*position:relative;*/ }
.noCap a:hover .PZ3cap { display:none; }
.noBdr a img,.noBdr a:hover img { border:0; }
.Lnk a:hover { cursor:pointer; }
</style>
</head>
<body>
<div class="surround">
<div class="PZ3zoom PZ3-l Bdr Cap noLnk" style="width:66px; height:100px;"><a href="" onmouseover="return false"><img src="0001.jpg" alt="ZoomImage" title="" /><span class="PZ3cap" style="width:469px;"><strong>Babes: </strong>
babe 1 <em>
<span style="color:#ccf; background:inherit;">
� 2006</span></em></span>
</a>
</div>
<div class="PZ3zoom PZ3-l Bdr Cap noLnk" style="width:66px; height:100px;"><a href="" onmouseover="return false"><img src="0002.jpg" alt="ZoomImage" title="" /><span class="PZ3cap" style="width:469px;"><strong>Babes: </strong>
babe 2 <em><span style="color:#ccf; background:inherit;">
� 2006</span></em></span>
</a>
</div>
<div class="PZ3zoom PZ3-l Bdr Cap noLnk" style="width:66px; height:100px;"><a href="" onmouseover="return false"><img src="0003.jpg" alt="ZoomImage" title="" /><span class="PZ3cap" style="width:469px;"><strong>Babes: </strong>
babe 3 <em><span style="color:#ccf; background:inherit;">
� 2006</span></em></span>
</a>
</div>
<div class="PZ3zoom PZ3-l Bdr Cap noLnk" style="width:66px; height:100px;"><a href="" onmouseover="return false"><img src="0004.jpg" alt="ZoomImage" title="" /><span class="PZ3cap" style="width:469px;"><strong>Babes: </strong>
babe 4 <em><span style="color:#ccf; background:inherit;">
� 2006</span></em></span>
</a>
</div>
<div class="PZ3zoom PZ3-l Bdr Cap noLnk" style="width:66px; height:100px;"><a href="" onmouseover="return false"><img src="0005.jpg" alt="ZoomImage" title="" /><span class="PZ3cap" style="width:469px;"><strong>Babes: </strong>
babe 5 <em><span style="color:#ccf; background:inherit;">
� 2006</span></em></span>
</a>
</div>
</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 |