</body>
Pop-up met commentaar

Voorbeeld #11 :

pop-up met commentaar via mouse-over door gebruik van CSS en javascript


Werkende demo

Plaats cursor op ��n van de foto's

 


Babe 1

�2007

Babe 2

�2007

Babe 3

�2007

Babe 3

�2007


Gebruik onderstaande code

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Mouseover</title>
<style type="text/css">
#beeld {}
#inhoud {
position: absolute;
top: 100px;
left: 325px;
background-color: #FFFFCC;
font-family: arial;
color: black;
font-weight: bold;
font-size: 10pt;
margin: 5px;}
#nr1, #nr2, #nr3 {display: none;} /* aanvullen volgens aantal afbeeldingen */
img {border: none;}
</style>

<script type="text/javascript">
function hide(){
for (teller=1; teller<4; teller+=1) // 4 = aantal afbeeldingen + 1
document.getElementById('nr'+teller).style.display='none';}
function show(nr){
document.getElementById(nr).style.display='block';}
window.onload="hide()";
</script>

</head>
<body>
<div id="beeld">
<!-- hier worden de kleine afbeeldingen bepaald -->
<a href="#" onmouseover="show('nr1')" onmouseout="hide();"><img src="benaming_foto_0001.jpg" height="120" width="80"></a>
<a href="#" onmouseover="show('nr2')" onmouseout="hide();"><img src="benaming_foto_0002.jpg" height="120" width="80"></a>
<a href="#" onmouseover="show('nr3')" onmouseout="hide();"><img src="benaming_foto_0003.jpg" height="120" width="80"></a>

<!-- hier worden de grote afbeeldingen en de tekst bepaald -->
<div id="inhoud">
<div id="nr1"><img src="benaming_foto_0001.jpg"><br>Deze tekst hoort bij foto 1</div>
<div id="nr2"><img src="benaming_foto_0002.jpg"><br>Dit is de tekst bij foto 2</div>
<div id="nr3"><img src="benaming_foto_0003.jpg"><br>Commentaar bij foto 3</div>
</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