login  Naam:   Wachtwoord: 
Registreer je!
 Forum

popup

Offline leendertW - 16/02/2005 17:21
Avatar van leendertWPHP beginner Ik wil graag een script die er voor zorgt dat als je over een link heen gaat er een popup komt met daarin tekst die je er zelf in gezet hebt. Niet zo'n windows popup mar ziets van dhtml.

Wie weet hoe dat moet?

6 antwoorden

Gesponsorde links
Offline twopeak - 30/11/1999 00:00
Avatar van twopeak Gouden medaille

PHP ver gevorderde		 ik zou ff zoeken op internet naar overlib rndat is een superjavascript dat je kan gebruiken die dat voor je doet.rnrnJe kan de code niet echt veranderen, maar het is echt goed.rnrnAls je negatieve punten van dat script wilt weten, vraag je DennisVB. (we wouden het hier op SM gebruiken)
Offline Fenrir - 30/11/1999 00:00
Avatar van Fenrir PHP expert ik raad je toch aan gewoon title= te gebruiken dat is beter voor screen-readers, etc.rnrnmaar tochrnhttpwww.walterzorn.comtooltiptooltip_e.htm
Offline leendertW - 30/11/1999 00:00 (laatste wijziging 30/11/1999 00:00)
Avatar van leendertW PHP beginner @Twopeak bedankt en het is WILDEN^^ rn@Fenrir Bedankt voor de link, dat is wat ik bedoelde.rnrnEditrnrnDit is dus voor als je over een link gaat. Maar nu wat anders wat ik ook niet kan vinden.rnIk wil graag een popup krijgen als je over een woord heen gaat (dus geen link) kan dat
Offline Dekin - 20/03/2005 17:27 (laatste wijziging 20/03/2005 17:28)
Avatar van Dekin Nieuw lid Niet dak weet. Volgens mij nie.
Trouwens hier nog een script voor als je over een link gaat. Is wel een leuk scriptje.
Head
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <style type="text/css">
  2. #tooltip2{
  3. position: absolute;
  4. width: 150px;
  5. border: 1px solid black;
  6. font-family: Arial;
  7. font-weight: bold;
  8. font-size: 12px;
  9. padding: 2px;
  10. background-color: #FFFF66;
  11. visibility: hidden;
  12. z-index: 100;
  13. /*Verwijder onderstaande regel indien je geen schaduw wenst*/
  14. filter: progid:DXImageTransform.Microsoft.Shadow(color=silver,direction=120);
  15. }
  16. </style>

Body
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="tooltip2"></div>
  2.  
  3. <script language="JavaScript" type="text/javascript">
  4. var richtingx=-60 //horizontale plaatsing tooltip t.o.v. muisaanwijzer
  5. var richtingy=20  //verticale plaatsing tooltip t.o.v. muisaanwijzer
  6. var ie=document.all
  7. var ns6=document.getElementById && !document.all
  8. var tipOK=false
  9. if (ie||ns6)
  10. var tipobj=document.all? document.all["tooltip2"] : document.getElementById? document.getElementById("tooltip2") : "";
  11. function compatibel(){
  12. return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}
  13. function toontip(tekst, kleur, breedte){
  14. if (ns6||ie){
  15. if (typeof breedte!="undefined") tipobj.style.width=breedte+"px"
  16. if (typeof kleur!="undefined" && kleur!="") tipobj.style.backgroundColor=kleur
  17. tipobj.innerHTML=tekst
  18. tipOK=true
  19. return false}}
  20. function plaatstip(e){
  21. if (tipOK){
  22. var curX=(ns6)?e.pageX : event.x+compatibel().scrollLeft;
  23. var curY=(ns6)?e.pageY : event.y+compatibel().scrollTop;
  24. var linkerzijde=(richtingx<0)? richtingx*(-1) : -1000
  25. var rechterzijde=ie&&!window.opera? compatibel().clientWidth-event.clientX-richtingx : window.innerWidth-e.clientX-richtingx-20
  26. var onderzijde=ie&&!window.opera? compatibel().clientHeight-event.clientY-richtingy : window.innerHeight-e.clientY-richtingy-20
  27. if (rechterzijde<tipobj.offsetWidth)
  28. tipobj.style.left=ie? compatibel().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
  29. else if (curX<linkerzijde)
  30. tipobj.style.left="5px"
  31. else tipobj.style.left=curX+richtingx+"px";
  32. if (onderzijde<tipobj.offsetHeight)
  33. tipobj.style.top=ie? compatibel().scrollTop+event.clientY-tipobj.offsetHeight-richtingy+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-richtingy+"px"
  34. else tipobj.style.top=curY+richtingy+"px";
  35. tipobj.style.visibility="visible"}}
  36. function verbergtip(){
  37. if (ns6||ie){
  38. tipOK=false
  39. tipobj.style.visibility="hidden"
  40. tipobj.style.left="-1000px"
  41. tipobj.style.backgroundColor=''
  42. tipobj.style.width=''}}
  43. document.onmousemove=plaatstip
  44. </script>


Of een ander
Head
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script language="Javascript">
  2. var PopUp = window.createPopup();
  3. function ToonTip(){
  4.     var vboven = event.offsetY-15;
  5.     var vlinks = event.offsetX-300;
  6.     PopUp.document.body.innerHTML = MijnTip.innerHTML; 
  7.     PopUp.show(vlinks, vboven, 250, 90, ttip);}
  8. function ToonTip2(){
  9.     var vboven = event.offsetY-15;
  10.     var vlinks = event.offsetX-430;
  11.     PopUp.document.body.innerHTML = MijnTip2.innerHTML; 
  12.     PopUp.show(vlinks, vboven, 250, 90, ttip2);}
  13. function ToonTip3(){
  14.     var vboven = event.offsetY-15;
  15.     var vlinks = event.offsetX-550;
  16.     PopUp.document.body.innerHTML = MijnTip3.innerHTML; 
  17.     PopUp.show(vlinks, vboven, 250, 90, ttip3);}
  18. </script>

Body
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <span id="ttip"> 
  2. <a href="#" onmouseover="ToonTip()" onmouseout="PopUp.hide()"> Eigen tooltip 1</a>
  3. </span>      
  4. <DIV ID="MijnTip" STYLE="display:none;">
  5.  <div style="position:absolute;top:0;left:0;width:100%;height:100%;border:2px solid brown;font:normal 10pt tahoma;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=brown, EndColorStr='#dddddd');padding:10px;color:gold;" >
  6. <b>Eigen tips maken 1</b>
  7. <hr size="1" style="border:1px solid brown;">
  8. Tooltips die je zelf maakt, zien er beter uit dan de standaardtips.
  9. </div>
  10. </DIV>
  11.  
  12. <span id="ttip2"> 
  13. <a href="#" onmouseover="ToonTip2()" onmouseout="PopUp.hide()"> Eigen tooltip 2</a>
  14. </span>      
  15. <DIV ID="MijnTip2" STYLE="display:none;">
  16.  <div style="position:absolute;top:0;left:0;width:100%;height:100%;border:1px solid blue;font:normal 10pt tahoma;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='lightblue', EndColorStr='#FF33FF');padding:10px;color:'#3333CC';" >
  17. <b>Eigen tips maken 2</b>
  18. <hr size="1" style="border:1px solid blue;">
  19. Je past de kleuren en lettertypes aan naar eigen smaak.
  20. </div>
  21. </DIV>
  22.  
  23. <span id="ttip3"> 
  24. <a href="#" onmouseover="ToonTip3()" onmouseout="PopUp.hide()"> Eigen tooltip 3</a>
  25. </span>
  26. <DIV ID="MijnTip3" STYLE="display:none;">
  27.  <div style="position:absolute;top:0;left:0;width:100%;height:100%;border:2px solid silver;font:normal 10pt tahoma;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=silver, EndColorStr=white);padding:10px;color:#CC0000;" >
  28. <b>Eigen tips maken 3</b>
  29. <hr size="1" style="border:1px solid silver;">
  30. Heel leuk om mee te experimenteren.<br>
  31. Gewoon doen !
  32. </div>
  33. </DIV>

Suc6;-)
Offline zointer - 20/03/2005 18:51 (laatste wijziging 20/03/2005 18:52)
Avatar van zointer HTML gevorderde
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <style type="text/css">
  2. .popup
  3. {
  4. COLOR: #9F141A;
  5. CURSOR: help;
  6. TEXT-DECORATION: none
  7. }
  8. </STYLE>
  9.  
  10. <p><SPAN title=" hier de text beschrijving " class="popup">over deze text kom dus een popup </SPAN></p>


@Dekin denk da dit een beetje korter is^^
Offline Dekin - 20/03/2005 21:26
Avatar van Dekin Nieuw lid Jah wa jij wil:D :p 
Tis un script.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.226s