</body>
Pop-up : mouse-over

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.js


Stap 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