Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webprogrammeren & scripting

Roll over effect

None
14 antwoorden
  • Kan iemand mij helpen aan een scriptje voor mijn website (www.schaatsenmuseum.nl) om roll over effecten te bewerkstelligen?
    Mijn bedoeling is het volgende:
    Op mijn site staat een lijst met merktekens (tekst) die in schaatsen staan. Ik zou willen dat als je met je muis over de tekstversie van zo'n merkteken gaat er een fotootje van het echte merkteken wordt getoond. Zelf kan ik een beetje html programmeren maar verder ben ik daar erg onhandig in. Dus wie helpt mij verder?
  • hier een mooi voorbeeld:

    http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm

    In de tabel met de merktekens dien je dan een stukje code op te nemen:

    [code:1:2ba3048762]
    <a href="#" onmouseover="doTooltip(event,0)" onmouseout="hideTip()">A A BAGGERMAN</a>
    [/code:1:2ba3048762]

    dan voor (event,0) de volgende (event,1) enzovoort.

    [code:1:2ba3048762]
    <a href="#" onmouseover="doTooltip(event,1)" onmouseout="hideTip()">A AKERBOOM</a>
    [/code:1:2ba3048762]

    In de javascript code dan de plaatjes aanpassen :

    [code:1:2ba3048762]
    messages[0] = new Array('/pad/naar/images/aa_baggerman.jpg','Optionele tekst',"#FFFFFF");
    messages[1] = new Array('/pad/naar/images/a_akerboom.jpg','Optionele tekst',"#FFFFFF");
    enz
    [/code:1:2ba3048762]

    Kan je hiermee uit de voeten?
  • Bedankt. Ik ga het vanavond nog eens rustig proberen. Zoiets had ik ook gevonden in een boekje over javascript (Kampherbeek en Staal), maar ik kwam er niet uit. Hoop dat het nu wel lukt.
  • Beste Error 404: Helaas… het wil niet lukken. Ik heb de handleiding JavaScript nog eens helemaal doorgebladerd, maar ik kom er niet uit. Ik heb de volgende oefening gemaakt, maar het werkt niet. Wat gaat er mis? Ik hoop dat je me de gouden tip kunt geven. Alvast bedankt.

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Oefening met JavaScript</title>
    <script language=javascript>
    messages[0] = new Array('../images/mk-hoekstra.ak-150.jpg');
    messages[1] = new Array('../museum/images/mk-hoekstra.ak-150.jpg');
    </script>
    </head>

    <body>
    <script language=javascript>
    <a href="#A A BAGGERMAN" onmouseover="doTooltip(event,0)" onmouseout="hideTip()"></a>
    <a href="#A AKERBOOM" onmouseover="doTooltip(event,1)" onmouseout="hideTip()"></a>
    </script>
    </body>
    </html>

    (De namen doen er hier niet toe. Het gaat om event 0 resp. 1 die moeten worden gekoppeld aan de plaatjes die met message 0 resp 1 zijn gedefinieerd).
  • Allereerst zal je de code uit de pagina die Error404 geeft moeten toevoegen aan je pagina.

    Ten tweede heb je in je body script tags om je links geplaatst. Dat is niet juist, die moeten weg.

    Als laatste zal je nog wat tekst in de links moeten zetten om te kunnen testen. En dan zal je zien dat de tooltips bijna goed zijn.

    [code:1:c2c84fdef3]
    <html>
    <head>

    <!– hier het script invoegen van dynamicdrive –>

    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Oefening met JavaScript</title>
    <script language=javascript>
    messages[0] = new Array('../images/mk-hoekstra.ak-150.jpg');
    messages[1] = new Array('../museum/images/mk-hoekstra.ak-150.jpg');
    </script>
    </head>

    <body>
    <a href="#" onmouseover="doTooltip(event,0)" onmouseout="hideTip()">hier dus wat tekst</a>
    <a href="#" onmouseover="doTooltip(event,1)" onmouseout="hideTip()">en hier ook</a>
    </body>
    </html>
    [/code:1:c2c84fdef3]
  • Annie heeft helemaal gelijk! Om je een beetje op weg te helpen, hier de oefening uitgewerkt tot werkend voorbeeld.

    [code:1:c7a1db5253]
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Oefening met JavaScript</title>

    <script type="text/javascript">

    /***********************************************
    * Image w/ description tooltip- By Dynamic Web Coding (www.dyn-web.com)
    * Copyright 2002-2007 by Sharon Paine
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    /* IMPORTANT: Put script after tooltip div or
    put tooltip div just before </BODY>. */

    var dom = (document.getElementById) ? true : false;
    var ns5 = (!document.all && dom || window.opera) ? true: false;
    var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;
    var ie4 = (document.all && !dom) ? true : false;
    var nodyn = (!ns5 && !ie4 && !ie5 && !dom) ? true : false;

    var origWidth, origHeight;

    // avoid error of passing event object in older browsers
    if (nodyn) { event = "nope" }

    /////////////////////// CUSTOMIZE HERE ////////////////////
    // settings for tooltip
    // Do you want tip to move when mouse moves over link?
    var tipFollowMouse= true;
    // Be sure to set tipWidth wide enough for widest image
    var tipWidth= 160;
    var offX= 20; // how far from mouse to show tip
    var offY= 12;
    var tipFontFamily= "Verdana, arial, helvetica, sans-serif";
    var tipFontSize= "8pt";
    // set default text color and background color for tooltip here
    // individual tooltips can have their own (set in messages arrays)
    // but don't have to
    var tipFontColor= "#000000";
    var tipBgColor= "#DDECFF";
    var tipBorderColor= "#000080";
    var tipBorderWidth= 3;
    var tipBorderStyle= "ridge";
    var tipPadding= 4;

    // tooltip content goes here (image, description, optional bgColor, optional textcolor)
    var messages = new Array();
    // multi-dimensional arrays containing:
    // image and text for tooltip
    // optional: bgColor and color to be sent to tooltip
    messages[0] = new Array('../images/mk-hoekstra.ak-150.jpg','onderscrift optie', 'blue');
    messages[1] = new Array('../museum/images/mk-hoekstra.ak-150.jpg','onderscrift optie','blue');

    //////////////////// END OF CUSTOMIZATION AREA ///////////////////

    // preload images that are to appear in tooltip
    // from arrays above
    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 tip in doTooltip function
    // startStr goes before image, midStr goes between image and text
    var startStr = '<table width="' + tipWidth + '"><tr><td align="center" width="100%"><img src="';
    var midStr = '" border="0"></td></tr><tr><td valign="top">';
    var endStr = '</td></tr></table>';

    ////////////////////////////////////////////////////////////
    // initTip - initialization for tooltip.
    // Global variables for tooltip.
    // Set styles
    // Set up mousemove capture if tipFollowMouse set true.
    ////////////////////////////////////////////////////////////
    var tooltip, tipcss;
    function initTip() {
    if (nodyn) return;
    tooltip = (ie4)? document.all['tipDiv']: (ie5||ns5)? document.getElementById('tipDiv'): null;
    tipcss = tooltip.style;
    if (ie4||ie5||ns5) { // ns4 would lose all this on rewrites
    tipcss.width = tipWidth+"px";
    tipcss.fontFamily = tipFontFamily;
    tipcss.fontSize = tipFontSize;
    tipcss.color = tipFontColor;
    tipcss.backgroundColor = tipBgColor;
    tipcss.borderColor = tipBorderColor;
    tipcss.borderWidth = tipBorderWidth+"px";
    tipcss.padding = tipPadding+"px";
    tipcss.borderStyle = tipBorderStyle;
    }
    if (tooltip&&tipFollowMouse) {
    document.onmousemove = trackMouse;
    }
    }

    window.onload = initTip;

    /////////////////////////////////////////////////
    // doTooltip function
    // Assembles content for tooltip and writes
    // it to tipDiv
    /////////////////////////////////////////////////
    var t1,t2; // for setTimeouts
    var tipOn = false; // check if over tooltip link
    function doTooltip(evt,num) {
    if (!tooltip) return;
    if (t1) clearTimeout(t1); if (t2) clearTimeout(t2);
    tipOn = true;
    // set colors if included in messages array
    if (messages[num][2]) var curBgColor = messages[num][2];
    else curBgColor = tipBgColor;
    if (messages[num][3]) var curFontColor = messages[num][3];
    else curFontColor = tipFontColor;
    if (ie4||ie5||ns5) {
    var tip = startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr;
    tipcss.backgroundColor = curBgColor;
    tooltip.innerHTML = tip;
    }
    if (!tipFollowMouse) positionTip(evt);
    else t1=setTimeout("tipcss.visibility='visible'",100);
    }

    var mouseX, mouseY;
    function trackMouse(evt) {
    standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
    mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
    mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
    if (tipOn) positionTip(evt);
    }

    /////////////////////////////////////////////////////////////
    // positionTip function
    // If tipFollowMouse set false, so trackMouse function
    // not being used, get position of mouseover event.
    // Calculations use mouseover event position,
    // offset amounts and tooltip width to position
    // tooltip within window.
    /////////////////////////////////////////////////////////////
    function positionTip(evt) {
    if (!tipFollowMouse) {
    mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
    mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
    }
    // tooltip width and height
    var tpWd = (ie4||ie5)? tooltip.clientWidth: tooltip.offsetWidth;
    var tpHt = (ie4||ie5)? tooltip.clientHeight: tooltip.offsetHeight;
    // document area in view (subtract scrollbar width for ns)
    var winWd = (ns5)? window.innerWidth-20+window.pageXOffset: standardbody.clientWidth+standardbody.scrollLeft;
    var winHt = (ns5)? window.innerHeight-20+window.pageYOffset: standardbody.clientHeight+standardbody.scrollTop;
    // check mouse position against tip and window dimensions
    // and position the tooltip
    if ((mouseX+offX+tpWd)>winWd)
    tipcss.left = mouseX-(tpWd+offX)+"px";
    else tipcss.left = mouseX+offX+"px";
    if ((mouseY+offY+tpHt)>winHt)
    tipcss.top = winHt-(tpHt+offY)+"px";
    else tipcss.top = mouseY+offY+"px";
    if (!tipFollowMouse) t1=setTimeout("tipcss.visibility='visible'",100);
    }

    function hideTip() {
    if (!tooltip) return;
    t2=setTimeout("tipcss.visibility='hidden'",100);
    tipOn = false;
    }

    document.write('<div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>')

    </script>


    </head>

    <body>

    <a href="#A A BAGGERMAN" onmouseover="doTooltip(event,0)" onmouseout="hideTip()">A A BAGGERMAN</a>
    <a href="#A AKERBOOM" onmouseover="doTooltip(event,1)" onmouseout="hideTip()">A AKERBOOM</a>

    </body>
    </html>
    [/code:1:c7a1db5253]

    I heb gezen dat je dit stukje code hebt aangepast :
    [code:1:c7a1db5253] messages[0] = new Array('../images/mk-hoekstra.ak-150.jpg'); [/code:1:c7a1db5253]

    de laatste twee opties (onderschrift en kleur) horen er wel bij dus bijvoorbeeld zo:

    new Array('../images/mk-hoekstra.ak-150.jpg','onderscrift optie', 'blue');

    Als je het onderschrift niet wilt krijg je dit:

    new Array('../images/mk-hoekstra.ak-150.jpg','', 'blue');

    De achtergrond kleur is blauw in dit voorbeeld Mag ook in hex dus bijvoorbeeld #000000 (zwart) #FFFFFF wit etc.

    new Array('../images/mk-hoekstra.ak-150.jpg','', '#FFFFFF ');

    Succes!
  • Beste hulpverleners, het spijt mij maar jullie maken het te moeilijk voor mij. Ik heb alweer een uur of anderhalf zitten rommelen maar het lukt me niet. Dat komt natuurlijk doordat ik niet kan programmeren. Ik maak voor html niet voor niets gebruik van het WISYWIG programma Frontpage 2006. Daarmee heb ik een niet onaardige website geknutseld, al zeg ik het zelf. Op deze website (www.schaatsenmuseum.nl) zit een knop 'merken op schaatsen'. Hieronder bevindt zich een tabel met in platte tekst merken zoals deze op schaatsen voorkomen. Van veel deze merken heb ik ook digitale plaatjes, die zich bevinden in de map 'images'. Ik zou via een gewone hyperlink dit plaatje kunnen tonen, maar het lijkt mij 'klantvriendelijker'dat te doen via mouseover. Maar ondanks mijn gestudeer op javascript zelf en jullie hulp wil dat maar niet lukken.

    Als ik alles op mij laat inwerken krijg ik toch het gevoel dat het niet al te moeilijk moet zijn. Maar ik weet geen raad met messages, events, attributen enz. Dat lukte me vroeger al niet goed toen ik mij probeerde te bekwamen in basic. Maar toch… Waarom zou iets eenvoudigs als:

    <script type="text/javascript">
    <a href="A K HOEKSTRA" onmouseover="do ../images/mk-hoekstra.ak-150.jpg" onmouseout="hide ../images/mk-hoekstra.ak-150.jpg"></a>
    </script>

    het kunstje niet kunnen doen? Ik weet het antwoord natuurlijk wel, nl. omdat er iets niet klopt. Maar wat klopt er dan niet is de vraag die mij kwelt.

    Ik heb dit scriptje binnen de html pagina geplaatst zowel voor als achter de betreffende regel in de tabel. Maar beide werkwijzen gaven niet het gewenst resultaat.

    Voor de goede orde: ik wil alleen het plaatje oproepen; ik wil geen tekst en geen kader met achtergrond of wat dan ook.

    Sorry als ik jullie verveel, maar jullie zijn mijn laatste strohalm. Lukt het nu niet dan zie ik geen andere oplossing dan een eenvoudige hyperlink. Maar zoals geschreven, liever niet.

    Dank voor jullie aandacht.
  • Als het deze tabel is, dan kun je hem beter eerst eens helemaal schoonmaken. De size is nu al 3.5 Mb en staat boordevol met microshit troep. Er is geen beginnen aan om daar met een html editor javascipt bij te plaatsen.
    Begin eens met de hand (html editor) een tabel te maken en daar de javascript mouse over / popup code in te plaatsen.
    wimb
  • Hallo, geen probleem we slepen je er wel doorheen ;)

    [quote:7ff3e68508="salty sailor"].

    <script type="text/javascript">
    <a href="A K HOEKSTRA" onmouseover="do ../images/mk-hoekstra.ak-150.jpg" onmouseout="hide ../images/mk-hoekstra.ak-150.jpg"></a>
    </script>

    het kunstje niet kunnen doen? Ik weet het antwoord natuurlijk wel, nl. omdat er iets niet klopt. Maar wat klopt er dan niet is de vraag die mij kwelt.
    [/quote:7ff3e68508]

    het stukje :

    [code:1:7ff3e68508]<script type="text/javascript">
    <a href="A K HOEKSTRA" onmouseover="do ../images/mk-hoekstra.ak-150.jpg" onmouseout="hide ../images/mk-hoekstra.ak-150.jpg"></a>
    </script>[/code:1:7ff3e68508]

    Is nog niet helemaal goed, de script tags [code:1:7ff3e68508]<script type="text/javascript"> en </script>
    [/code:1:7ff3e68508]

    Hoeven er niet omheen, het wordt nu dan:

    [code:1:7ff3e68508]
    <a href="A K HOEKSTRA" onmouseover="do ../images/mk-hoekstra.ak-150.jpg" onmouseout="hide ../images/mk-hoekstra.ak-150.jpg"></a>
    [/code:1:7ff3e68508]

    tussen de link tags moet nog iets staan, ik zal het even uitleggen :

    [code:1:7ff3e68508]

    <a Een <a betekend begin link

    href="A K HOEKSTRA" Waarheen de link gaat staat in href=""

    Nou in dit geval nergens, dat komt straks maak hiervan dus href="#" een # betekend deze pagina, dat is nu eenmaal een afspraak. Als je A K HOEKSTRA er tussne laat staan zal de browser bij het erop klikken opzoek gaan nar een pagina A K HOEKSTRA en die is er dus niet.

    Nu het "grote geheim" een link tag ( tussen <a XXX> iets </a>)
    Heeft naast een doel ook meer eigenschappen, bijboorbeeld als je er met de muis overheen gaat:

    onmouseover="do ../images/mk-hoekstra.ak-150.jpg"

    In dit geval leren we de browser de functie doTooltip aan te roepen, wat dit is hebben we 'm geleerd met het grote stuk code wat in de head tags moet komen (daar kom ik straks op terug)

    Het moet dus worden :

    onmouseover="doTooltip(event,0)"

    Wat je browser hiermee doet laten we even voor wat het is. Het woordje event mag je even vergeten. De 0 is de eerste afpraak die we 'm hebben geleerd in dit geval :

    messages[0] = new Array('/pad/naar/images/aa_baggerman.jpg','Optionele tekst',"#FFFFFF");

    Dit laatste stuk staat dus helemaal boven in je pagina en hoef je dus niet nog eens in de tabel in te voeren.

    onmouseout="hideTip()

    In dit geval leren we de browser de functie hideTip aan te roepen, wat dit is hebben we 'm geleerd met het grote stuk code wat in de head tags moet komen.

    [/code:1:7ff3e68508]

    Nu hebben we dus het begin van de link tag ontleed <a XXXXX>
    Er moet iets tussen de begin tag en de eind tag komen (de </a>)

    Anders is er niets om te laten zien, vergelijk het maar als dit :

    [code:1:7ff3e68508]
    Dit is normaal <b>dit is dik</b> dit is normaal
    [/code:1:7ff3e68508]

    Zet dit maar eens in de broncode van een pagina. Het gedeelte tussen <b> en </b> wordt dan dik gedrukt.

    Zo is het net met <a XXXXX> iets </a>, daar komt dus de naam A K HOEKSTRA aks mensen dan over de naam heengaan met de muis zien ze het plaatje.

    Vanmiddag schrijf ik een stukje over de code in de het <head> </head> gedeelte van je pagina. Maak je geen zorgen ik ga niet alles uitleggen ;)
  • Beste Error 404: Fantastisch! Hier krijg ik een warm gevoel van. Ik begon de moed al op te geven. Zeker na de reactie van WimB, die - hoe juist zijn opmerking ook moge zijn - mijn probleem (onkundig, maar wel zeer gemotiveerd en graag bijlerend) helaas niet lijkt te begrijpen.
  • Het head gedeelte van de webpagina ziet er nu zo uit

    [code:1:19d504dbbe]
    <head>
    <meta name="GENERATOR" content="Microsoft FrontPage 6.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <meta http-equiv="Content-Language" content="nl-nl">
    <title>schaatsen - Het virtuele Schaatsenmuseum - merktekens</title>
    <script language=javascript>
    messages[0] = new Array('/museum/images/mk-hoekstra.ak-150.jpg','Optionele tekst',"#FFFFFF");

    </script>
    </head>
    [/code:1:19d504dbbe]

    We moeten in dit gedeelte ook de functies doTooltip hideTip onderbrengen. Dat heb je nu weggelaten. Vervang bovenstaande door de code hieronder :

    [code:1:19d504dbbe]

    <head>
    <meta name="GENERATOR" content="Microsoft FrontPage 6.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <meta http-equiv="Content-Language" content="nl-nl">
    <title>schaatsen - Het virtuele Schaatsenmuseum - merktekens</title>

    <script type="text/javascript">
    var messages = new Array();

    messages[0] = new Array('../images/A-BAGGERMAN.jpg');
    messages[1] = new Array('../images/A-AKERBOOM-150.jpg');

    /***********************************************
    * Image w/ description tooltip- By Dynamic Web Coding (www.dyn-web.com)
    * Copyright 2002-2007 by Sharon Paine
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    /* IMPORTANT: Put script after tooltip div or
    put tooltip div just before </BODY>. */

    var dom = (document.getElementById) ? true : false;
    var ns5 = (!document.all && dom || window.opera) ? true: false;
    var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;
    var ie4 = (document.all && !dom) ? true : false;
    var nodyn = (!ns5 && !ie4 && !ie5 && !dom) ? true : false;

    var origWidth, origHeight;

    // avoid error of passing event object in older browsers
    if (nodyn) { event = "nope" }

    /////////////////////// CUSTOMIZE HERE ////////////////////
    // settings for tooltip
    // Do you want tip to move when mouse moves over link?
    var tipFollowMouse= true;
    // Be sure to set tipWidth wide enough for widest image
    var tipWidth= 160;
    var offX= 20; // how far from mouse to show tip
    var offY= 12;
    var tipFontFamily= "'Trebuchet MS', sans-serif, Verdana, arial, helvetica";
    var tipFontSize= "8pt";
    // set default text color and background color for tooltip here
    // individual tooltips can have their own (set in messages arrays)
    // but don't have to
    var tipFontColor= "#FEEF85";
    var tipBgColor= "#333333";
    var tipBorderColor= "#201E3E";
    var tipBorderWidth= 3;
    var tipBorderStyle= "ridge";
    var tipPadding= 4;

    //////////////////// END OF CUSTOMIZATION AREA ///////////////////

    // preload images that are to appear in tooltip
    // from arrays above
    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 tip in doTooltip function
    // startStr goes before image, midStr goes between image and text
    var startStr = '<table width="' + tipWidth + '"><tr><td align="center" width="100%"><img src="';
    var midStr = '" border="0"></td></tr><tr><td valign="top">';
    var endStr = '</td></tr></table>';

    ////////////////////////////////////////////////////////////
    // initTip - initialization for tooltip.
    // Global variables for tooltip.
    // Set styles
    // Set up mousemove capture if tipFollowMouse set true.
    ////////////////////////////////////////////////////////////
    var tooltip, tipcss;
    function initTip() {
    if (nodyn) return;
    tooltip = (ie4)? document.all['tipDiv']: (ie5||ns5)? document.getElementById('tipDiv'): null;
    tipcss = tooltip.style;
    if (ie4||ie5||ns5) { // ns4 would lose all this on rewrites
    tipcss.width = tipWidth+"px";
    tipcss.fontFamily = tipFontFamily;
    tipcss.fontSize = tipFontSize;
    tipcss.color = tipFontColor;
    tipcss.backgroundColor = tipBgColor;
    tipcss.borderColor = tipBorderColor;
    tipcss.borderWidth = tipBorderWidth+"px";
    tipcss.padding = tipPadding+"px";
    tipcss.borderStyle = tipBorderStyle;
    }
    if (tooltip&&tipFollowMouse) {
    document.onmousemove = trackMouse;
    }
    }

    window.onload = initTip;

    /////////////////////////////////////////////////
    // doTooltip function
    // Assembles content for tooltip and writes
    // it to tipDiv
    /////////////////////////////////////////////////
    var t1,t2; // for setTimeouts
    var tipOn = false; // check if over tooltip link
    function doTooltip(evt,num) {
    if (!tooltip) return;
    if (t1) clearTimeout(t1); if (t2) clearTimeout(t2);
    tipOn = true;
    // set colors if included in messages array
    var curBgColor = tipBgColor;
    var curFontColor = tipFontColor;
    if (ie4||ie5||ns5) {
    var tip = startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + '</span>' + endStr;
    tipcss.backgroundColor = curBgColor;
    tooltip.innerHTML = tip;
    }
    if (!tipFollowMouse) positionTip(evt);
    else t1=setTimeout("tipcss.visibility='visible'",100);
    }

    var mouseX, mouseY;
    function trackMouse(evt) {
    standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
    mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
    mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
    if (tipOn) positionTip(evt);
    }

    /////////////////////////////////////////////////////////////
    // positionTip function
    // If tipFollowMouse set false, so trackMouse function
    // not being used, get position of mouseover event.
    // Calculations use mouseover event position,
    // offset amounts and tooltip width to position
    // tooltip within window.
    /////////////////////////////////////////////////////////////
    function positionTip(evt) {
    if (!tipFollowMouse) {
    mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
    mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
    }
    // tooltip width and height
    var tpWd = (ie4||ie5)? tooltip.clientWidth: tooltip.offsetWidth;
    var tpHt = (ie4||ie5)? tooltip.clientHeight: tooltip.offsetHeight;
    // document area in view (subtract scrollbar width for ns)
    var winWd = (ns5)? window.innerWidth-20+window.pageXOffset: standardbody.clientWidth+standardbody.scrollLeft;
    var winHt = (ns5)? window.innerHeight-20+window.pageYOffset: standardbody.clientHeight+standardbody.scrollTop;
    // check mouse position against tip and window dimensions
    // and position the tooltip
    if ((mouseX+offX+tpWd)>winWd)
    tipcss.left = mouseX-(tpWd+offX)+"px";
    else tipcss.left = mouseX+offX+"px";
    if ((mouseY+offY+tpHt)>winHt)
    tipcss.top = winHt-(tpHt+offY)+"px";
    else tipcss.top = mouseY+offY+"px";
    if (!tipFollowMouse) t1=setTimeout("tipcss.visibility='visible'",100);
    }

    function hideTip() {
    if (!tooltip) return;
    t2=setTimeout("tipcss.visibility='hidden'",100);
    tipOn = false;
    }

    document.write('<div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>')


    </script>

    </head>
    [/code:1:19d504dbbe]

    Ik heb het script ook iets aangepast zodat je de kleur niet meer hoeft aan te geven en de optionele tekst niet hoeft in te voeren.

    Nu dien je voor ieder plaatje een regel in het script toe te voegen:

    [code:1:19d504dbbe]
    messages[XXXX] = new Array('../images/A-BAGGERMAN.jpg');
    [/code:1:19d504dbbe]

    Uiteraard ook het pad naar het plaatje

    [code:1:19d504dbbe]
    '../images/A-BAGGERMAN.jpg'
    [/code:1:19d504dbbe]

    Aanpassen naar het juiste plaatje.

    ipv XXXX het nummer van het plaatje dat je wilt laten zien.


    N.B. beginnen bij 0 en tekens 1 ophogen!

    Dus voor het eerste plaatje:

    [code:1:19d504dbbe]
    messages[0] = new Array('../images/A-BAGGERMAN.jpg');
    [/code:1:19d504dbbe]

    En als je twee plaatjes hebt:

    [code:1:19d504dbbe]
    messages[0] = new Array('../images/A-BAGGERMAN.jpg');
    messages[1] = new Array('../images/A-AKERBOOM-150.jpg');
    [/code:1:19d504dbbe]

    En als je drie plaatjes hebt:

    [code:1:19d504dbbe]
    messages[0] = new Array('../images/A-BAGGERMAN.jpg');
    messages[1] = new Array('../images/A-AKERBOOM-150.jpg');
    messages[2] = new Array('../images/A-Barneveld-150.jpg');
    [/code:1:19d504dbbe]

    Enzovoort, je hoeft dus maar 1 regel toe te voegen voor een plaatje.





    Nu de tekst in de tabel aanklikbaar maken. Helaas heb ik geen frontpage, maar deze pagina http://www.brainbell.com/tutorials/ms-office/FrontPage_2003/Creating_Behaviors.htm beschrijft hoe je de gebeurtenissen "onmouseover en onmouse out" kan aanpassen.

    Ik gebruik nu gewoon even de code als voorbeeld:

    Maak in frontpage een link (stukje tekst selecteren waarnaa je het plaatje wilt laten zien) en kies invoegen hyperlink oid.

    Nu vul je bij het adres van de hyperlink een # in en klik op ok.
    Het stukje tekst is nu onderstreept.

    Geef in frontpage nu de broncode weer en zoek naar de tekst die je zojuist aanklikbaar hebt gemaakt. Dit zal er ongeveer zo uitzien:

    [code:1:19d504dbbe]
    <a href="#">A A BAGGERMAN</a>[/code:1:19d504dbbe]

    Verander dit nu in

    [code:1:19d504dbbe]
    <a href="#" onmouseover="doTooltip(event,XXXX)" onmouseout="hideTip()">A A BAGGERMAN</a>[/code:1:19d504dbbe]


    ipv XXXX het nummer van het plaatje dat je zojuist hebt ingevoerd.

    In mijn voorbeeld

    [code:1:19d504dbbe]
    <a href="#" onmouseover="doTooltip(event,0)" onmouseout="hideTip()">A A BAGGERMAN</a>[/code:1:19d504dbbe]

    Voor het tweede plaatje dezefde procedure, dus selecteren invoegen hyperlink. # invullen OK, opzoeken in code en aanvullen. Nu wordt het dan zoiets:


    [code:1:19d504dbbe]
    <a href="#" onmouseover="doTooltip(event,XXXX)" onmouseout="hideTip()">A AKERBOOM</a>[/code:1:19d504dbbe]

    ipv XXXX het nummer van het plaatje dat je zojuist hebt ingevoerd.

    In mijn voorbeeld :

    [code:1:19d504dbbe]
    <a href="#" onmouseover="doTooltip(event,1)" onmouseout="hideTip()">A AKERBOOM</a>[/code:1:19d504dbbe]

    Succes! Als je vragen hebt gewoon hier stellen, het lukt vast!
  • Beste Error 404: voor de goede orde: ik ben de hele avond bezig geweest, maar het ging fout bij het aanmaken van de link naar de image. Frontpage accepteert # niet als link, maar wil een URL. Ik heb toen eerst de URL aangewezen en later veranderd in #. Maar dat werkte niet. Integendeel, de naam van de link verdween uit de tabel. Intussen heb ik ontdekt dat Frontpage JavaScript op de een of andere manier ondersteunt. Daar heb ik even naar gekeken en daar ga ik morgenavond mee verder. Daarna ben ik echter een paar dagen op reis. Het zal dus waarschijnlijk even duren voor ik weer contact kan maken en je kan informeren over de vorderingen. Dat zal ik zeker doen, want ik ben zeeer content met de wijze waarop je mij 'begeleidt'. Voor nu: bedankt en tot schrijfs.
  • Hallo, zoute zeeman ;) Mocht frontpage het # niet accepteren dan zou je een link kunnen maken naar de pagina zelf (sch-merk-1.htm) Minder elegant maar voor nu een prima oplossing. Goede reis en tot horens.
  • Ik heb hetzelfde script gebruikt op de volgende webpagina: http://home.scarlet.be/~tsi55435/Reis%202007
    eis2007.htm


    In Internet Explorer werkt alles perfect. Het script houdt rekening met de muispositie en de schermbreedte om de mouse-over afbeelding netjes op de juiste plaats te positioneren.

    In Firefox werkt dit script spijtig genoeg maar half. De schermbreedte en/of de muispositie (weet ik veel) worden niet herkend zodat de mouse-over afbeelding aan de rechterkant gedeeltelijk buiten de rand van het scherm valt (met name op een 17" scherm).

    Kan iemand mij assisteren om dit probleem weg te werken? Bedankt.

    Hieronder vind je de code (ik heb voor het goede overzicht wel een groot deel van de arrays weggelaten).

    [code:1:fd091b52f4]
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>

    <head>
    <meta http-equiv="Content-Language" content="nl-be">
    <title>Reis 2007</title>
    <base target="frmMain2">

    <script type="text/javascript">

    /***********************************************
    * Image w/ description tooltip- By Dynamic Web Coding (www.dyn-web.com)
    * Copyright 2002-2007 by Sharon Paine
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    /* IMPORTANT: Put script after tooltip div or
    put tooltip div just before </BODY>. */

    var dom = (document.getElementById) ? true : false;
    var ns5 = (!document.all && dom || window.opera) ? true: false;
    var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;
    var ie4 = (document.all && !dom) ? true : false;
    var nodyn = (!ns5 && !ie4 && !ie5 && !dom) ? true : false;

    var origWidth, origHeight;

    // avoid error of passing event object in older browsers
    if (nodyn) { event = "nope" }

    /////////////////////// CUSTOMIZE HERE ////////////////////
    // settings for tooltip
    // Do you want tip to move when mouse moves over link?
    var tipFollowMouse= true;
    // Be sure to set tipWidth wide enough for widest image
    var tipWidth= 160;
    var offX= 20; // how far from mouse to show tip
    var offY= 12;
    var tipFontFamily= "Tahoma, Verdana, arial, helvetica, sans-serif";
    var tipFontSize= "8pt";
    // set default text color and background color for tooltip here
    // individual tooltips can have their own (set in messages arrays)
    // but don't have to
    var tipFontColor= "#000000";
    var tipBgColor= "#CCCCFF";
    var tipBorderColor= "#CCCCFF";
    var tipBorderWidth= 0;
    var tipBorderStyle= "ridge";
    var tipPadding= 4;

    // tooltip content goes here (image, description, optional bgColor, optional textcolor)
    var messages = new Array();
    // multi-dimensional arrays containing:
    // image and text for tooltip
    // optional: bgColor and color to be sent to tooltip
    messages[0] = new Array('HPIM0896.jpg','',"#CCCCFF");
    messages[1] = new Array('HPIM0894.jpg','',"#CCCCFF");
    messages[2] = new Array('HPIM0515.jpg','',"#CCCCFF");
    messages[3] = new Array('HPIM0531.jpg','',"#CCCCFF");
    messages[4] = new Array('HPIM0530.jpg','',"#CCCCFF");
    messages[5] = new Array('HPIM0927.jpg','',"#CCCCFF");
    messages[6] = new Array('HPIM0533.jpg','',"#CCCCFF");



    //////////////////// END OF CUSTOMIZATION AREA ///////////////////

    // preload images that are to appear in tooltip
    // from arrays above
    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 tip in doTooltip function
    // startStr goes before image, midStr goes between image and text
    var startStr = '<table width="' + tipWidth + '"><tr><td align="center" width="100%"><img src="';
    var midStr = '" border="0"></td></tr><tr><td valign="top">';
    var endStr = '</td></tr></table>';

    ////////////////////////////////////////////////////////////
    // initTip - initialization for tooltip.
    // Global variables for tooltip.
    // Set styles
    // Set up mousemove capture if tipFollowMouse set true.
    ////////////////////////////////////////////////////////////
    var tooltip, tipcss;
    function initTip() {
    if (nodyn) return;
    tooltip = (ie4)? document.all['tipDiv']: (ie5||ns5)? document.getElementById('tipDiv'): null;
    tipcss = tooltip.style;
    if (ie4||ie5||ns5) { // ns4 would lose all this on rewrites
    tipcss.width = tipWidth+"px";
    tipcss.fontFamily = tipFontFamily;
    tipcss.fontSize = tipFontSize;
    tipcss.color = tipFontColor;
    tipcss.backgroundColor = tipBgColor;
    tipcss.borderColor = tipBorderColor;
    tipcss.borderWidth = tipBorderWidth+"px";
    tipcss.padding = tipPadding+"px";
    tipcss.borderStyle = tipBorderStyle;
    }
    if (tooltip&&tipFollowMouse) {
    document.onmousemove = trackMouse;
    }
    }

    window.onload = initTip;

    /////////////////////////////////////////////////
    // doTooltip function
    // Assembles content for tooltip and writes
    // it to tipDiv
    /////////////////////////////////////////////////
    var t1,t2; // for setTimeouts
    var tipOn = false; // check if over tooltip link
    function doTooltip(evt,num) {
    if (!tooltip) return;
    if (t1) clearTimeout(t1); if (t2) clearTimeout(t2);
    tipOn = true;
    // set colors if included in messages array
    if (messages[num][2]) var curBgColor = messages[num][2];
    else curBgColor = tipBgColor;
    if (messages[num][3]) var curFontColor = messages[num][3];
    else curFontColor = tipFontColor;
    if (ie4||ie5||ns5) {
    var tip = startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr;
    tipcss.backgroundColor = curBgColor;
    tooltip.innerHTML = tip;
    }
    if (!tipFollowMouse) positionTip(evt);
    else t1=setTimeout("tipcss.visibility='visible'",100);
    }

    var mouseX, mouseY;
    function trackMouse(evt) {
    standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
    mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
    mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
    if (tipOn) positionTip(evt);
    }

    /////////////////////////////////////////////////////////////
    // positionTip function
    // If tipFollowMouse set false, so trackMouse function
    // not being used, get position of mouseover event.
    // Calculations use mouseover event position,
    // offset amounts and tooltip width to position
    // tooltip within window.
    /////////////////////////////////////////////////////////////
    function positionTip(evt) {
    if (!tipFollowMouse) {
    mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
    mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
    }
    // tooltip width and height
    var tpWd = (ie4||ie5)? tooltip.clientWidth: tooltip.offsetWidth;
    var tpHt = (ie4||ie5)? tooltip.clientHeight: tooltip.offsetHeight;
    // document area in view (subtract scrollbar width for ns)
    var winWd = (ns5)? window.innerWidth-20+window.pageXOffset: standardbody.clientWidth+standardbody.scrollLeft;
    var winHt = (ns5)? window.innerHeight-20+window.pageYOffset: standardbody.clientHeight+standardbody.scrollTop;
    // check mouse position against tip and window dimensions
    // and position the tooltip
    if ((mouseX+offX+tpWd)>winWd)
    tipcss.left = mouseX-(tpWd+offX)+"px";
    else tipcss.left = mouseX+offX+"px";
    if ((mouseY+offY+tpHt)>winHt)
    tipcss.top = winHt-(tpHt+offY)+"px";
    else tipcss.top = mouseY+offY+"px";
    if (!tipFollowMouse) t1=setTimeout("tipcss.visibility='visible'",100);
    }

    function hideTip() {
    if (!tooltip) return;
    t2=setTimeout("tipcss.visibility='hidden'",100);
    tipOn = false;
    }

    document.write('<div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>')

    </script>

    <style type="text/css">
    <!–
    .style1 {
    font-family: Tahoma;
    font-size: 12px;
    }
    –>
    </style>


    </head>
    <body topmargin="0" leftmargin="10" bgproperties="fixed" bgcolor="#cccfff" background="../bg3.jpg">
    <div align="left">
    <table width="679" empty-cells="show" border-collapse="collapse" border="0" height="671" cellspacing="0" cellpadding="0" style="padding: 0">
    <tr>
    <td width="262" valign="middle" style="border-top-style: solid; border-top-width: 1; border-bottom-style: solid; border-bottom-width: 1" height="18" align="justify"><font size="2" face="Tahoma" color="#000080">Van
    9 tot 17 augustus zaten we in een huisje op het vakantiedomein van
    Intersoc in La Garde Freinet. Het was mooi zomerweer. We konden elke dag
    buiten eten.&nbsp;</font></td><td width="417" valign="middle" style="border-top-style: solid; border-top-width: 1; border-bottom-style: solid; border-bottom-width: 1" height="18" align="center">
    &nbsp;<a href="#"><IMG SRC="../Reis 2007/HPIM0896.jpg" onmouseover="doTooltip(event,0)" onmouseout="hideTip()" width="45" height="35" border="0"></a>
    <a href="#"><IMG SRC="../Reis 2007/HPIM0894.jpg" onmouseover="doTooltip(event,1)" onmouseout="hideTip()" width="45" height="35" border="0"></a>
    <a href="#"><IMG SRC="../Reis 2007/HPIM0515.jpg" onmouseover="doTooltip(event,2)" onmouseout="hideTip()" width="35" height="45" border="0"></a>
    <a href="#"><IMG SRC="../Reis 2007/HPIM0531.jpg" onmouseover="doTooltip(event,3)" onmouseout="hideTip()" width="45" height="35" border="0"></a>
    <a href="#"><IMG SRC="../Reis 2007/HPIM0530.jpg" onmouseover="doTooltip(event,4)" onmouseout="hideTip()" width="45" height="35" border="0"></a>
    <a href="#"><IMG SRC="../Reis 2007/HPIM0927.jpg" onmouseover="doTooltip(event,5)" onmouseout="hideTip()" width="45" height="35" border="0"></a>
    <a href="#"><IMG SRC="../Reis 2007/HPIM0533.jpg" onmouseover="doTooltip(event,6)" onmouseout="hideTip()" width="45" height="35" border="0"></a>
    <p style="margin-top: 0; margin-bottom: 0"><font face="Tahoma" size="1" color="#000080">&nbsp;Ga
    met de muis over de foto's</font>

    </tr>

    </table>
    </div>
    <hr>

    </body>

    </html>
    [/code:1:fd091b52f4]

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.