anoniem Geplaatst: 27 maart 2003 Delen Geplaatst: 27 maart 2003 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 Quote Link naar reactie
anoniem Geplaatst: 27 maart 2003 Auteur Delen Geplaatst: 27 maart 2003 lol deze mag wat mij betreft terug naar het andere forum, [url]http://www.meyerweb.com/eric/css/edge/popups/demo.html[/url] -termin8or Quote Link naar reactie
anoniem Geplaatst: 27 maart 2003 Auteur Delen Geplaatst: 27 maart 2003 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 Link naar reactie
anoniem Geplaatst: 27 maart 2003 Auteur Delen Geplaatst: 27 maart 2003 [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] Quote Link naar reactie
anoniem Geplaatst: 27 maart 2003 Auteur Delen Geplaatst: 27 maart 2003 gvd, net te laat ;) maar gelukkig zie ik dat teacher de style van de div is vergeten :P Quote Link naar reactie
anoniem Geplaatst: 27 maart 2003 Auteur Delen Geplaatst: 27 maart 2003 [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 Link naar reactie
anoniem Geplaatst: 27 maart 2003 Auteur Delen Geplaatst: 27 maart 2003 [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. :) Quote Link naar reactie
anoniem Geplaatst: 27 maart 2003 Auteur Delen Geplaatst: 27 maart 2003 wat een gruwelijke scripts, waarom doen jullie het daarmee als het heel simpel met css kan? -termin8or Quote Link naar reactie
anoniem Geplaatst: 27 maart 2003 Auteur Delen Geplaatst: 27 maart 2003 [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 Link naar reactie
anoniem Geplaatst: 27 maart 2003 Auteur Delen Geplaatst: 27 maart 2003 [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 Quote Link naar reactie
anoniem Geplaatst: 27 maart 2003 Auteur Delen Geplaatst: 27 maart 2003 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 Quote Link naar reactie
anoniem Geplaatst: 27 maart 2003 Auteur Delen Geplaatst: 27 maart 2003 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 Link naar reactie
anoniem Geplaatst: 27 maart 2003 Auteur Delen Geplaatst: 27 maart 2003 [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 Quote Link naar reactie
anoniem Geplaatst: 27 maart 2003 Auteur Delen Geplaatst: 27 maart 2003 oooooow, nou zie ik het! in de navigatie! ok, k zal eens gaan zoeken. bedankt! Quote Link naar reactie
anoniem Geplaatst: 27 maart 2003 Auteur Delen Geplaatst: 27 maart 2003 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 Link naar reactie
anoniem Geplaatst: 27 maart 2003 Auteur Delen Geplaatst: 27 maart 2003 [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 Quote Link naar reactie
anoniem Geplaatst: 27 maart 2003 Auteur Delen Geplaatst: 27 maart 2003 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;} [color=red:6be8337016][size=16:6be8337016]div#links a span {display: none;} div#links a:hover span {display: block;[/size:6be8337016] [/color:6be8337016] 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> ? ik zou het niet weten, kun je me dat nog even vertellen? (helaas, ben nog steeds geen pro :wink: ) Quote Link naar reactie
anoniem Geplaatst: 27 maart 2003 Auteur Delen Geplaatst: 27 maart 2003 [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 Quote Link naar reactie
anoniem Geplaatst: 27 maart 2003 Auteur Delen Geplaatst: 27 maart 2003 @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 Quote Link naar reactie
anoniem Geplaatst: 27 maart 2003 Auteur Delen Geplaatst: 27 maart 2003 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 Quote Link naar reactie
Aanbevolen berichten
Om een reactie te plaatsen, moet je eerst inloggen