Voorbeeld #3 :
pop-up met commentaar via mouse-over (verbeterde versie van voorbeeld #2)
Werkende demo
Plaats cursor op ��n van de foto's
Werkwijze
Stap 1: Download onderstaande javascript bestanden.
dw_event.js
dw_viewport.js
dw_tooltip.js
Stap 2: Plaats onderstaande codes tussen <head> en </head>
<script src="dw_event.js"
type="text/javascript"></script>
<script src="dw_viewport.js" type="text/javascript"></script>
<script src="dw_tooltip.js" type="text/javascript"></script>
<script type="text/javascript">
/*************************************************************************
This code is from Dynamic Web Coding at
dyn-web.com
Copyright 2003-5 by Sharon Paine
See Terms of Use at www.dyn-web.com/bus/terms.html
regarding conditions under which you may use
this code.
This notice must be retained in the code as
is!
*************************************************************************/
function doTooltip(e, ar) {
if ( typeof Tooltip == "undefined" || !Tooltip.ready
) return;
var cntnt = wrapTipContent(ar);
var tip = document.getElementById(
Tooltip.tipID );
Tooltip.show(e, cntnt);
}
function hideTip() {
if ( typeof Tooltip == "undefined" || !Tooltip.ready
) return;
Tooltip.hide();
}
function wrapTipContent(ar) {
var cntnt = "";
if ( ar[0] ) cntnt += '<div class="img"><img
src="' + ar[0] + '"></div>';
if ( ar[1] ) cntnt += '<div class="txt">' +
ar[1] + '</div>';
return cntnt;
}
// tooltip content here
var messages = new Array();
// array elements: image file name, optional
text
messages[0] = ['benaming_foto1.jpg','<div>Commentaar<br>lijn2<br>lijn3</div>'];
messages[1] = ['benaming_foto2.jpg','<div>Commentaar<br>lijn2<br>lijn3</div>'];
messages[2] = ['benaming_foto3.jpg','<div>Commentaar<br>lijn2<br>lijn3</div>'];
messages[3] = ['benaming_foto4.jpg','<div>Commentaar<br>lijn2<br>lijn3</div>'];
messages[4] = ['benaming_foto5.jpg','<div>Commentaar<br>lijn2<br>lijn3</div>'];
messages[5] = ['benaming_foto6.jpg','<div>Commentaar<br>lijn2<br>lijn3</div>'];
messages[6] = ['benaming_foto7.jpg','<div>Commentaar<br>lijn2<br>lijn3</div>'];
messages[7] = ['benaming_foto8.jpg','<div>Commentaar<br>lijn2<br>lijn3</div>'];
// optional preloader
var imageHandler = {
path:"images/", // path to images
imgs:[], preload:function() { for(var i=0;arguments[i];i++)
{
var img=new Image(); img.src=this.path+arguments[i];
this.imgs[this.imgs.length]=img;}}
}
imageHandler.preload("benaming_foto1.jpg");
</script>
De rode tekst moet je zelf nog aanpassen.
De waarde van de paarse tekst moet je bij elke nieuwe foto met 1 verhogen. (Je begint met waarde 0)
m.a.w. de eerste foto heeft waarde (event,0), de tweede foto (event,1). de derde foto (event,2), enz...
<style type="text/css">
/* Hier kan je eventueel aanpassingen aanbrengen */
div#tipDiv {
position:absolute; visibility:hidden;
left:0; top:0; z-index:10000;
background-color:gray; border:1px solid
#000000;
width:360px; padding:6px;
color:#000000; font-size:11px; color:#FFFFFF;
line-height:1.3;
}
/* Deze worden gebruikt in de wrapTipContent
function */
div#tipDiv div.img { text-align:center }
div#tipDiv div.txt { text-align:left;
margin-top:4px }
</style>
De groene tekst kan je eventueel aanpassen.
Stap 3: Verander de tag <body> in
<body onload="Tooltip.init()">
Stap 4: Plaats onderstaande code tussen <body> en </body> op de plaats waar je de thumbnail (verkleinde foto) wil tonen.
<a href="benaming_foto.jpg"
onmouseover="doTooltip(event, messages[0]
)" onmouseout="hideTip()">
<img src="benaming_foto.jpg"
align=0 border="0"
width="66"
height="100"></a>
De rode tekst moet je zelf nog aanpassen.
Herhaal stap 3 voor elke nieuwe foto.
De waarde van de paarse tekst moet je bij elke nieuwe foto met 1 verhogen.
(Je begint met waarde 0)
m.a.w. de eerste foto heeft waarde
(event,0), de tweede foto (event,1). de
derde foto (event,2), enz...
Stap 5:
Upload alle bestanden naar je webserver.
Foto's, html bestand en de javascripten dw_event.js,
dw_viewport.js en dw_tooltip.js
Configuratie van de javascripten dw_event.js, dw_viewport.js en dw_tooltip.js :
Je moet GEEN aanpassingen aanbrengen aan de javascripten.
|
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 |