Voorbeeld #2 :
pop-up met commentaar via mouse-over door gebruik van javascript
Werkende demo
Plaats cursor op ��n van de foto's
Werkwijze
Stap 1: Download onderstaand javascript bestand.
popup_mouseover.jsStap 2: Plaats onderstaande code tussen <head> en </head>
<script type="text/javascript" src="popup_mouseover.js"></script>
Stap 3: Plaats onderstaande code tussen <body> en </body> op de plaats waar je de thumbnail (verkleinde foto) wil tonen.
<a href="#" onmouseover="doToolfoto(event,0)" onmouseout="hidefoto()">
<img src="benaming_foto.jpg" align="" 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 4: Plaats onderstaande code juist voor </body>.
<div align="center" id="fotoDiv" style="position:absolute; visibility:hidden; z-index:100"></div>
Stap 5: Upload alle bestanden naar je webserver.
Foto's, html bestand en het javascript popup_mouseover.js
Configuratie van het javascript popup_mouseover.js:
Je moet hier aanpassingen aanbrengen aan het javascript popup_mouseover.js.
Opgelet:
De gele tekst is commentaar bij het javascript.
De rode tekst moet je zelf nog aanpassen.
De groene tekst kan je eventueel aanpassen.
De paarse tekst moet je zelf nog aanpassen.
Begin met de waarde 0 en zo oplopend met het aantal foto's.
Let op
foto 1 heeft waarde 0, foto 2 heeft waarde 1, foto 3 heeft waarde 2, enz ...
Kijk dat de volgorde van de foto's overeenkomt met de volgorde in het html bestand.
Het aantal foto's moet overeenstemmen met het aantal foto's in het html bestand.
Wijzig de zwarte tekst NIET, laat die zoals ze is of je javascript werkt niet meer.
Heb je wijzigingen aangebracht, bewaar het bestand dan terug als popup_mouseover.js
Open het bestand popup_mouseover.js in bv. kladblok.
Je krijgt nu de volgende code te zien:
<!--
/* BELANGRIJK: Plaats script na <div id="fotoDiv" style="position:absolute; visibility:hidden; z-index:100"></div> of
plaats <div id="fotoDiv" style="position:absolute; visibility:hidden; z-index:100"></div> juist voor </BODY>. */
var dom = (document.getElementById) ? true : false;
var ns5 = ((navigator.userAgent.indexOf("Gecko")>-1) && dom) ? true: false;
var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;
var ns4 = (document.layers && !dom) ? true : false;
var ie4 = (document.all && !dom) ? true : false;
var nodyn = (!ns5 && !ns4 && !ie4 && !ie5) ? true : false;
// resize fix voor ns4
var origWidth, origHeight;
if (ns4) {
origWidth = window.innerWidth; origHeight = window.innerHeight;
window.onresize = function() { if (window.innerWidth != origWidth || window.innerHeight != origHeight) history.go(0); }
}
// vermijdt error of passing event object in oudere browsers
if (nodyn) { event = "nope" }
/////////////////////// HIER AANPASSEN ////////////////////
// settings
// Wil je dat de foto mee beweegt wanneer je de muis verplaats? true=ja false=neen
var fotoFollowMouse= false;
// Zorg ervoor dat fotoWidth groot genoeg is voor de breedste foto
var fotoWidth= 400;
// hoe ver van de muispointer moet de foto verschijnen
var offX= 10;
var offY= 10;
// welk lettertype (font family) wil je gebruiken
var fotoFontFamily= "Verdana, arial, helvetica, sans-serif";
// welke grootte van lettertype (font size) wil je gebruiken
var fotoFontSize= "8pt";
// vul hier de standaard tekstkleur en achtergrondkleur in
// iedere foto kan zijn eigen achtergrondkleur en tekstkleur hebben
// is niet noodzakelijk
var fotoFontColor= "#000000";
var fotoBgColor= "#DDECFF";
var fotoBorderColor= "#000080";
var fotoBorderWidth= 3;
var fotoBorderStyle= "ridge";
var fotoPadding= 4;
// Hier vul je volgende gegevens in -- format:('url foto','commentaar','achtergrondkleur','tekstkleur');
var messages = new Array();
// multi-dimensional reeks (arrays) bevatten:
// url foto en commentaar
// optioneel: achtergrondkleur en tekstkleur
// VUL HIER DE FOTO'S IN
messages[0] = new Array('benaming_foto1.jpg','Commentaar
lijn2
lijn3',"#FFFFFF",'black');
messages[1] = new Array('benaming_foto2.jpg','Commentaar
lijn2
lijn3',"#FFFFFF",'black');
messages[2] = new Array('benaming_foto3.jpg','Commentaar
lijn2
lijn3',"#FFFFFF",'black');
messages[3] = new Array('benaming_foto4.jpg','Commentaar
lijn2
lijn3',"#FFFFFF",'black');
messages[4] = new Array('benaming_foto5.jpg','Commentaar
lijn2
lijn3',"#FFFFFF",'black');
messages[5] = new Array('benaming_foto6.jpg','Commentaar
lijn2
lijn3',"#FFFFFF",'black');
messages[6] = new Array('benaming_foto7.jpg','Commentaar
lijn2
lijn3',"#FFFFFF",'black');
messages[7] = new Array('benaming_foto8.jpg','Commentaar
lijn2
lijn3',"#FFFFFF",'black');
//////////////////// EINDE AANPASSINGEN ///////////////////
// preload fotos
// benoemd in de bovenstaande reeks (arrays)
if (document.images) {
var theImgs = new Array();
for (var i=0; i<messages.length; i++) {
theImgs[i] = new Image();
theImgs[i].src = messages[i][0];
}
}
// to layout image and text, 2-row table, image centered in top cell
// these go in var foto in doToolfoto function
// startStr goes before image, midStr goes between image and text
var startStr = '<table width="' + fotoWidth
+ '"><tr><td align="center"
width="100%"><img src="';
var midStr = '" border="0"></td></tr><tr><td
valign="top">';
var endStr = '</td></tr></table>';
////////////////////////////////////////////////////////////
// initfoto - initialization for toolfoto.
// Global variables for toolfoto.
// Set styles for all but ns4.
// Set up mousemove capture if fotoFollowMouse set true.
////////////////////////////////////////////////////////////
var toolfoto, fotocss;
function initfoto() {
if (nodyn) return;
toolfoto = (ns4)? document.fotoDiv.document: (ie4)? document.all['fotoDiv']: (ie5||ns5)? document.getElementById('fotoDiv'): null;
fotocss = (ns4)? document.fotoDiv: toolfoto.style;
if (ie4||ie5||ns5) { // ns4 would lose all this on rewrites
fotocss.width = fotoWidth+"px";
fotocss.fontFamily = fotoFontFamily;
fotocss.fontSize = fotoFontSize;
fotocss.color = fotoFontColor;
fotocss.backgroundColor = fotoBgColor;
fotocss.borderColor = fotoBorderColor;
fotocss.borderWidth = fotoBorderWidth+"px";
fotocss.padding = fotoPadding+"px";
fotocss.borderStyle = fotoBorderStyle;
}
if (toolfoto&&fotoFollowMouse) {
if (ns4) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = trackMouse;
}
}
window.onload = initfoto;
/////////////////////////////////////////////////
// doToolfoto function
// Assembles content for toolfoto and writes
// it to fotoDiv
/////////////////////////////////////////////////
var t1,t2; // for setTimeouts
var fotoOn = false; // check if over toolfoto link
function doToolfoto(evt,num) {
if (!toolfoto) return;
if (t1) clearTimeout(t1); if (t2) clearTimeout(t2);
fotoOn = true;
// set colors if included in messages array
if (messages[num][2]) var curBgColor = messages[num][2];
else curBgColor = fotoBgColor;
if (messages[num][3]) var curFontColor = messages[num][3];
else curFontColor = fotoFontColor;
if (ns4) {
var foto = '<table bgcolor="' + fotoBorderColor + '" width="' + fotoWidth + '" cellspacing="0" cellpadding="' + fotoBorderWidth + '" border="0"><tr><td><table bgcolor="' + curBgColor + '" width="100%" cellspacing="0" cellpadding="' + fotoPadding + '" border="0"><tr><td>'+ startStr + messages[num][0] + midStr + '<span style="font-family:' + fotoFontFamily + '; font-size:' + fotoFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr + '</td></tr></table></td></tr></table>';
toolfoto.write(foto);
toolfoto.close();
} else if (ie4||ie5||ns5) {
var foto = startStr + messages[num][0] + midStr + '<span style="font-family:' + fotoFontFamily + '; font-size:' + fotoFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr;
fotocss.backgroundColor = curBgColor;
toolfoto.innerHTML = foto;
}
if (!fotoFollowMouse) positionfoto(evt);
else t1=setTimeout("fotocss.visibility='visible'",100);
}
var mouseX, mouseY;
function trackMouse(evt) {
mouseX = (ns4||ns5)? evt.pageX: window.event.clientX + document.body.scrollLeft;
mouseY = (ns4||ns5)? evt.pageY: window.event.clientY + document.body.scrollTop;
if (fotoOn) positionfoto(evt);
}
/////////////////////////////////////////////////////////////
// positionfoto function
// If fotoFollowMouse set false, so trackMouse function
// not being used, get position of mouseover event.
// Calculations use mouseover event position,
// offset amounts and toolfoto width to position
// toolfoto within window.
/////////////////////////////////////////////////////////////
function positionfoto(evt) {
if (!fotoFollowMouse) {
mouseX = (ns4||ns5)? evt.pageX: window.event.clientX + document.body.scrollLeft;
mouseY = (ns4||ns5)? evt.pageY: window.event.clientY + document.body.scrollTop;
}
// toolfoto width and height
var tpWd = (ns4)? toolfoto.width: (ie4||ie5)? toolfoto.clientWidth: toolfoto.offsetWidth;
var tpHt = (ns4)? toolfoto.height: (ie4||ie5)? toolfoto.clientHeight: toolfoto.offsetHeight;
// document area in view (subtract scrollbar width for ns)
var winWd = (ns4||ns5)? window.innerWidth-20+window.pageXOffset: document.body.clientWidth+document.body.scrollLeft;
var winHt = (ns4||ns5)? window.innerHeight-20+window.pageYOffset: document.body.clientHeight+document.body.scrollTop;
// check mouse position against foto and window dimensions
// and position the toolfoto
if ((mouseX+offX+tpWd)>winWd)
fotocss.left = (ns4)? mouseX-(tpWd+offX): mouseX-(tpWd+offX)+"px";
else fotocss.left = (ns4)? mouseX+offX: mouseX+offX+"px";
if ((mouseY+offY+tpHt)>winHt)
fotocss.top = (ns4)? winHt-(tpHt+offY): winHt-(tpHt+offY)+"px";
else fotocss.top = (ns4)? mouseY+offY: mouseY+offY+"px";
if (!fotoFollowMouse) t1=setTimeout("fotocss.visibility='visible'",100);
}
function hidefoto() {
if (!toolfoto) return;
t2=setTimeout("fotocss.visibility='hidden'",100);
fotoOn = false;
}
//-->
|
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 |