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 |