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

schermpje bij rollover

Anoniem
None
21 antwoorden
  • hoi,
    gewaagde vraag, maar het is geen request:
    op http://www.portablegear.nl/nieuws-detail.htm?NID=599
    bijv. staat een woordje, (in dit geval mp3 cd speler), en als je daar met de muis overheen gaat, krijg je een "mededeling".
    leek me erg nuttig en interessant, maar de vraag: is dit een ingewikkeld javascript, of kan dit ook gewoon met html? (in de trant van rollover?)
    uit de broncode van die pagina kon ik niks duidelijk krijgen.
    zou iemand mij kunnen helpen met aan bijv. de naam komen van zoiets?

    bedankt,

    jules
  • lol deze mag wat mij betreft terug naar het andere forum,

    http://www.meyerweb.com/eric/css/edge/popups/demo.html

    -termin8or
  • uit de broncode:

    functie:
    [code:1:96dc2c62c2]
    <DIV ID=dek CLASS=dek></DIV>
    <SCRIPT TYPE='text/javascript'>

    <!–
    Xoffset=-60;
    Yoffset= 20;

    var nav, old, iex = (document.all),yyy = -1000;

    if(navigator.appName == 'Netscape')
    {
    (document.layers) ? nav = true : old = true;
    }

    if(!old)
    {
    var skn = (nav)?document.dek:dek.style;
    if(nav)document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove=get_mouse;
    }

    function popup(msg,bak)
    {
    var content='<table border=0 cellpadding=4 cellspacing=0><tr><td width=200 bgcolor=#FFFFFF><TABLE WIDTH=200 BORDER=1 BORDERCOLOR=black CELLPADDING=2 CELLSPACING=0 BGCOLOR=#FF9F20><TD ALIGN=center><FONT COLOR=white SIZE=2 face=arial>'+msg+'</FONT></TD></TABLE></td></tr></table>';
    if(old)
    {
    alert(msg);return;
    } else
    {
    yyy=Yoffset;

    if(nav)
    {
    skn.document.write(content);
    skn.document.close();
    skn.visibility='visible'
    }

    if(iex)
    {
    document.all('dek').innerHTML=content;
    skn.visibility='visible'
    }
    }
    }


    // var content='<table border=0 cellpadding=4 cellspacing=0><tr><td width=200 bgcolor=#ffffff><TABLE WIDTH=200 BORDER=1 BORDERCOLOR=black CELLPADDING=2 CELLSPACING=0 BGCOLOR=#1DADFF><TD ALIGN=center><FONT COLOR=white SIZE=2 face=arial>'+msg+'</FONT></TD></tr><tr><TD ALIGN=right><a href=javascript:void(null) onclick=kill()><FONT COLOR=white SIZE=2 face=arial><b>x</b></FONT></a></TD></TABLE></td></tr></table>';



    function get_mouse(e)
    {
    stringa = /MSIE 4.0/;
    substringa = stringa.test(navigator.appVersion);

    if(substringa == true)
    {
    var x = (nav)?e.pageX:event.x;skn.left=x+Xoffset;
    var y = (nav)?e.pageY:event.y;skn.top=y+yyy;
    } else
    {
    var x = (nav)?e.pageX:event.x+document.body.scrollLeft;skn.left=x+Xoffset;
    var y = (nav)?e.pageY:event.y+document.body.scrollTop;skn.top=y+yyy;
    }
    }

    function kill()
    {
    if(!old){yyy=-1000;skn.visibility='hidden';}
    }

    //–>
    </SCRIPT>
    [/code:1:96dc2c62c2]

    eventhandler:
    [code:1:96dc2c62c2]
    <a class=LinkGrijs href="javascript:void(null)" ONMOUSEOVER="popup('Een walkman die in staat is om digitale muziekbestanden, waaronder MP3, af te spelen.')" ONMOUSEOUT="kill()";>MP3 speler</a>
    [/code:1:96dc2c62c2]

    Als je de code daadwerkelijk gaat gebruiken; vraag ht dan eerst even aan de webmaster van de site.

    t.
  • [quote:21c2e832c7="juleswijers"]
    [..]
    uit de broncode van die pagina kon ik niks duidelijk krijgen.
    zou iemand mij kunnen helpen met aan bijv. de naam komen van zoiets?
    [..]
    [/quote:21c2e832c7]
    Het staat er toch echt in :).

    [..wat knippen en plakken later..]

    Het enige wat je nodig hebt is de DIV genaamd DEK (incl. de style definitie), het stukje javascript en een link om een tekstje.

    [code:1:21c2e832c7]
    <html>
    <head>
    <style type="text/css">
    .DEK {
    position : absolute;
    visibility : hidden;
    z-index : 200;
    }

    </style>
    </head>
    <body>
    <DIV ID=dek CLASS=dek></DIV>
    <SCRIPT TYPE='text/javascript'>

    <!–
    Xoffset=-60;
    Yoffset= 20;

    var nav, old, iex = (document.all),yyy = -1000;

    if(navigator.appName == 'Netscape')
    {
    (document.layers) ? nav = true : old = true;
    }

    if(!old)
    {
    var skn = (nav)?document.dek:dek.style;
    if(nav)document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove=get_mouse;
    }

    function popup(msg,bak)
    {
    var content='<table border=0 cellpadding=4 cellspacing=0><tr><td width=200 bgcolor=#FFFFFF><TABLE WIDTH=200 BORDER=1 BORDERCOLOR=black CELLPADDING=2 CELLSPACING=0 BGCOLOR=#FF9F20><TD ALIGN=center><FONT COLOR=white SIZE=2 face=arial>'+msg+'</FONT></TD></TABLE></td></tr></table>';
    if(old)
    {
    alert(msg);return;
    } else
    {
    yyy=Yoffset;

    if(nav)
    {
    skn.document.write(content);
    skn.document.close();
    skn.visibility='visible'
    }

    if(iex)
    {
    document.all('dek').innerHTML=content;
    skn.visibility='visible'
    }
    }
    }


    // var content='<table border=0 cellpadding=4 cellspacing=0><tr><td width=200 bgcolor=#ffffff><TABLE WIDTH=200 BORDER=1 BORDERCOLOR=black CELLPADDING=2 CELLSPACING=0 BGCOLOR=#1DADFF><TD ALIGN=center><FONT COLOR=white SIZE=2 face=arial>'+msg+'</FONT></TD></tr><tr><TD ALIGN=right><a href=javascript:void(null) onclick=kill()><FONT COLOR=white SIZE=2 face=arial><b>x</b></FONT></a></TD></TABLE></td></tr></table>';



    function get_mouse(e)
    {
    stringa = /MSIE 4.0/;
    substringa = stringa.test(navigator.appVersion);

    if(substringa == true)
    {
    var x = (nav)?e.pageX:event.x;skn.left=x+Xoffset;
    var y = (nav)?e.pageY:event.y;skn.top=y+yyy;
    } else
    {
    var x = (nav)?e.pageX:event.x+document.body.scrollLeft;skn.left=x+Xoffset;
    var y = (nav)?e.pageY:event.y+document.body.scrollTop;skn.top=y+yyy;
    }
    }

    function kill()
    {
    if(!old){yyy=-1000;skn.visibility='hidden';}
    }

    //–>
    </SCRIPT>

    test test test test test test test<br />
    test test test test test test test<br />
    test test test <a style='color:#999999;font-weight:bold;' href="javascript:void(null)" ONMOUSEOVER="popup('zomaar wat tekst')" ONMOUSEOUT="kill()";>popupje</a> test test test<br />
    test test test test test test test<br />

    </body>
    </html>
    [/code:1:21c2e832c7]
  • gvd, net te laat ;)
    maar gelukkig zie ik dat teacher de style van de div is vergeten :P
  • [quote:9e7480828f="Annie"]gvd, net te laat ;)
    [/quote:9e7480828f]
    Mhuhahahaha 8)

    [quote:9e7480828f]
    maar gelukkig zie ik dat teacher de style van de div is vergeten :P[/quote:9e7480828f]
    Moet toch wat voor jou overlaten… :)

    (die style vond ik even nvt hier…)
  • [quote:b6411900b4="teacher"](die style vond ik even nvt hier…)[/quote:b6411900b4]
    Alleen is deze wel van toepassing in dit geval, omdat je anders een niet werkend script overhoudt. :)
  • wat een gruwelijke scripts, waarom doen jullie het daarmee als het heel simpel met css kan?

    -termin8or
  • [quote:bde1b42155="termin8or"]wat een gruwelijke scripts, waarom doen jullie het daarmee als het heel simpel met css kan?
    [/quote:bde1b42155]Ik doe helemaal niks, wilde alleen maar laten zien dat het gewoon in de source terug te vinden was.

    Mijn waarde oordeel heb ik maar even buiten beschouwing gelaten. Daar wil ik jullie niet mee vervelen.
  • [quote:4adf2bc8ea="Annie"]Mijn waarde oordeel heb ik maar even buiten beschouwing gelaten. Daar wil ik jullie niet mee vervelen.[/quote:4adf2bc8ea]ik ben benieuwd…

    -termin8or
  • jep, bedankt allemaal!
    ik heb idd wel wat in de broncode gevonden, maar ja, als je niet echt verstand hebt van javascript, weet je niet wat wat is enzo.
    in ieder geval bedankt,
    ik zal eens kijken. (ook naar de css tip van - hoe kan het ook anders - termin8tor :D )

    doei,
    jules
  • btw, termin8tor, heb je wel de goede link opgegeven?
    op die pagina zie ik niks wat mij aan hetzelfde resultaat zou kunnen helpen, als met het javascriptje?
    of kijk ik grulwelijk scheel?
  • [quote:6fa58dbcd9="juleswijers"]btw, termin8tor, heb je wel de goede link opgegeven?[/quote:6fa58dbcd9]jep[quote:6fa58dbcd9="juleswijers"]op die pagina zie ik niks wat mij aan hetzelfde resultaat zou kunnen helpen, als met het javascriptje?
    of kijk ik grulwelijk scheel?[/quote:6fa58dbcd9]gruwelijk scheel denk ik :D .

    Als je over zo'n link aande zijkant gaat komt er toch zo'n tekstje onder? De plaats van dat tekstje kun je natuurlijk zelf bepalen, probeer het maar is uit. Er staat tevens een uitleg bij hoe het werkt.

    -termin8or
  • oooooow, nou zie ik het!
    in de navigatie!
    ok, k zal eens gaan zoeken.
    bedankt!
  • ja, k post n beetje veel, maar ik ben ook flink bezig :D

    ff termin8tor:

    ik heb dit:
    [code:1:da994e7fcf]
    <html>

    <head>

    <title>test</title>

    <style type="text/css">

    div#links {position: absolute; top: 181px; left: 0; width: 166px; height: 700px; font: 16px Verdana,

    sans-serif; z-index: 100;}
    div#links a {display: block; text-align: center; font: bold 1em sans-serif;
    padding: 5px 10px; margin: 0 0 1px; border-width: 0;
    text-decoration: none; color: #FFC; background: #444;
    border-right: 5px solid #505050;}
    div#links a:hover {color: #411; background: #AAA;
    border-right: 5px double white;}

    div#links a span {display: none;}
    div#links a:hover span {display: block;
    position: absolute; top: 280px; left: 180; width: 425px;
    padding: 25px; margin: 10px; z-index: 100;
    color: #FFFAAA; background: #fa8ff2;
    font: 12px Verdana, sans-serif; text-align: center;}


    </style>

    </head>

    <body>

    <div id="links">
    <a href="www.link 1.com">link 1<span> de informatie bij link 1.</span></a>
    <a href="www.link 2.com">link 2<span> de informatie bij link 2.</span></a>
    <a href="www.link 3.com">link 3<span> de informatie bij link 3.</span></a>

    </body>

    </html>
    [/code:1:da994e7fcf]
    er dus even uitgetoverd, en dat werkt.
    toch nog een paar vraagjes daarover:

    kan ik (en zo ja, waar) border toevoegen, zodat er een rand om die tekstvakjes komen?
    en, kan ik het ook zo maken, dat het geen link is, maar gewoon een woord?
    dus niet iets waar je op moet klikken, maar gewoon als je erover heen gaat, je een toelichting krijgt?

    want dat is eigenlijk de bedoeling, dat ik gewoon een lap tekst heb, en als je dan over een bepaald woord gaat in die lap tekst, moet er zo'n blokje toelichting ergens verschijnen.

    bedankt,

    jules
  • [quote:459ee7e471="juleswijers"]kan ik (en zo ja, waar) border toevoegen, zodat er een rand om die tekstvakjes komen?[/quote:459ee7e471]ja bij de style van de span, dit vind ik eigenlijk nogal een onnodige vraag die je op een van vele css tuts, uitleg ook wel kunt vinden.[quote:459ee7e471]en, kan ik het ook zo maken, dat het geen link is, maar gewoon een woord?[/quote:459ee7e471]ja, om met ie compatible te blijven zou ik wel <a>tekst</a>gebruiken, maar bv. geen href aangezien ie hover nog niet ondersteunt voor andere elementen dan het anchor element.

    -termin8or
  • dus, hier ergens:
    <style type="text/css">

    div#links {position: absolute; top: 181px; left: 0; width: 166px; height: 700px; font: 16px Verdana,

    sans-serif; z-index: 100;}
    div#links a {display: block; text-align: center; font: bold 1em sans-serif;
    padding: 5px 10px; margin: 0 0 1px; border-width: 0;
    text-decoration: none; color: #FFC; background: #444;
    border-right: 5px solid #505050;}
    div#links a:hover {color: #411; background: #AAA;
    border-right: 5px double white;}
  • [code:1:4a3bfbde34]<style type="text/css">
    div#links {
    position: absolute;
    top: 181px;
    left: 0;
    width:166px;
    height:
    700px;
    font:16px Verdana, sans-serif;
    z-index: 100;
    }
    div#links a{
    display:block;
    text-align:center;
    font:bold 1em sans-serif;
    padding:5px 10px;
    margin: 0 0 1px;
    border-width:0;
    text-decoration:none; color: #FFC;
    background:#444;
    border-right: 5px solid #505050;
    }
    div#links a:hover{
    color:#411;
    background: #AAA;
    border-right: 5px double white;
    }
    div#links a span{
    display: none;
    }
    div#links a:hover span {
    display: block;
    position: absolute;
    top:280px;
    left:180;
    width:425px;
    padding:25px;
    margin:10px;
    z-index: 100;
    color:#FFFAAA;
    background:#fa8ff2;
    font:12px Verdana, sans-serif;
    text-align: center;
    /*nieuw*/
    border:20px solid red;
    /*een rand van 20px breed met de stijl: solid en rood gekleurd*/
    }
    </style>[/code:1:4a3bfbde34]
    alsjeblieft let even op de commentaar-tags, en zoek voortaan toch maar even op het internet.

    -termin8or
  • @termin8or:

    Was jij niet degene die vond dat ik[code:1:77b0f8a692]border: 2px dotted black;[/code:1:77b0f8a692]moest vervangen door[code:1:77b0f8a692]border: 2px dotted #000;[/code:1:77b0f8a692]:roll: ;)

    - Bas
  • tja daar kan ik moeilijk onderuit, ik ben het er nog steeds mee eens, maar voor dit voorbeeld deed ik het even snel

    -termin8or

    ps: red is wel kleiner dan #ff0 (oid) btw

Beantwoord deze vraag

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