login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Pop-up

Offline RinkXing - 19/03/2005 16:00
Avatar van RinkXingHTML beginner Gegroet!

Ik zou graag een script willen hebben waarbij de bedoeling is dat je een plaatje hebt, en als je daarop klikt je dan een pop-up venster krijgt dat precies om dat plaatje past en verder niets.

Greets,

Rinky

6 antwoorden

Gesponsorde links
Offline Frederic - 19/03/2005 16:42
Avatar van Frederic PHP ver gevorderde
php code - Bekijk de code zonder highlighting - Klap code in 
  1. Een gedeelte voor in de head:
  2. <script type="text/javascript">
  3. // Variabelen voor de opmaak
  4. bbc = '#cccccc'; // body background-color
  5. lc = '#666666' // link, en visited
  6. lch = '#333333' // hover en active
  7.  
  8. // de kadertjes (div's)
  9. dbg = '#999999'; // achtergrondkleur
  10. bc = '#000000'; // borderkleur
  11. bd = '1' // borderdikte in pixels
  12. mb = '1' // ruimte tussen kadertjes
  13. pad = '10' // padding (image->border)
  14. bijh = '40' // hoogte bijschrift vakje (pixels)
  15. mt = '10' // margin aan boven en onderkant
  16.  
  17. // variabelen voor het resizen
  18. totalx = 2*(parseInt(bd)+parseInt(pad)+30);
  19. totaly = 2*(parseInt(mt)+parseInt(pad))+parseInt(bijh)+4*parseInt(bd)+50;
  20.  
  21. function vd(TXT){
  22. venster.document.write(TXT);
  23. }
  24.  
  25. function openvenster(titel,path,bijschrift){
  26. venster = window.open('','','toolbar=0,menubar=0,statusbar=0');
  27. vd('<html><head><title>' + titel + '</title>');
  28. vd('<style type="text/css">');
  29.  
  30. // styles worden gedefinieerd //
  31. vd('body{ background-color: ' + bbc + '}');
  32. vd('.link{ color: ' + lc + '}');
  33. vd('.link:visited{ color: ' + lc + '}');
  34. vd('.link:active{ color: ' + lch + '}');
  35. vd('.link:hover{ color: ' + lch + '}');
  36. vd('#fotodiv { padding: ' + pad + 'px; margin-top: ' + mt + '; }');
  37. vd('#bijdiv { overflow: auto; margin-bottom: ' + mt + '; height: ' + bijh + '; }');
  38. vd('.mijndiv {');
  39. vd('border-style: dashed; border-width: ' + bd + 'px; border-color: ' + bc + '; background-color: ' + dbg + ';');
  40. vd('align: center; text-align:center; margin-bottom: ' + mb + '; }');
  41. vd('.anderediv{ align: center; text-align:center; margin-bottom: ' + mb + '; ');
  42. vd('}</style></head>');
  43. vd('<body>');
  44.  
  45. // eigenlijke inhoud
  46. vd('<div class="mijndiv" id="fotodiv"><img src="' + path + '" border="0"></div>');
  47. vd('<div class="anderediv"><a href="javascript:window.close()" class="link">Sluiten</a></div>');
  48. vd('<div class="mijndiv" id="bijdiv">' + bijschrift + '</div>');
  49.  
  50. // resizen
  51. vd('<script type=\"text/javascript\">');
  52. vd('newx = (' + totalx + ' + document.images[0].width);');
  53. vd('newy = (' + totaly + ' + document.images[0].height);');
  54. vd('window.resizeTo(newx,newy);');
  55. vd('\</script\>');
  56. vd('</body></html>');
  57. }
  58.  
  59. </script>
  60.  
  61. En een link ziet er als volgt uit:
  62.  
  63. <a href="javascript:openvenster('Johannes','../images/image001.jpg','Hier is Johannes bezig met aardappelen schillen')">Foto van Johannes</a>
  64. Nog leuker: Je plaatst de link om een thumbnail van het origineel.
Offline prorsoft - 19/03/2005 17:21
Avatar van prorsoft PHP gevorderde dat hoeft echt niet zo ingewikkeld hoor
Offline RinkXing - 19/03/2005 18:48
Avatar van RinkXing HTML beginner weet iemand dan een kortere?
Offline ikkedikke - 19/03/2005 20:28 (laatste wijziging 19/03/2005 20:30)
Avatar van ikkedikke PHP expert <img src='foto' id='foto' onclick=win(this) width=200 height=200>
<script>
function win(obj)
{
myWin = open(obj.src, 'winin','toolbar=0,menubar=0,scrollbars=0,status=0,resizable=no,width='+obj.width+',height='+obj.height);
}
</script>
bij mij werkt het

edit: Ik heb echt geen flauw idee waar die 'winin' voor staat, ik heb die code ergens van een tijd terug maar het werkt
Offline numlockrond - 19/03/2005 20:58
Avatar van numlockrond Onbekend
Citaat:
edit: Ik heb echt geen flauw idee waar die 'winin' voor staat, ik heb die code ergens van een tijd terug maar het werkt
winin is de naam/id van dat venster. Als je daarna nog een keer window.open() doet met 'winin' als target, wordt hij in hetzelfde venster geopend (als dat venster nog open staat).
Offline Dekin - 20/03/2005 20:44
Avatar van Dekin Nieuw lid Zet dit in de Head
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script language="Javascript" type="text/javascript" >
  2. //aan te passen
  3. vanaf_links = 100;
  4. vanaf_boven = 100;
  5. grootste_breedte  = 500+20;//afmetingen van het grootste beeld +20
  6. grootste_hoogte = 500+20;  //afmetingen van het grootste beeld +20
  7. //hieronder niets wijzigen
  8. if (parseInt(navigator.appVersion.charAt(0))>=4){
  9. var isNN=(navigator.appName=="Netscape")?1:0;
  10. var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}
  11. var optNN='scrollbars=no,width='+grootste_breedte+',height='+grootste_hoogte+',left='+vanaf_links+',top='+vanaf_boven;
  12. var optIE='scrollbars=no,width=150,height=100,left='+vanaf_links+',top='+vanaf_boven;
  13. function popBeeld(BeeldURL,BeeldTitel){
  14. if (isNN){imgWin=window.open('about:blank','',optNN);}
  15. if (isIE){imgWin=window.open('about:blank','',optIE);}
  16. with (imgWin.document){
  17. writeln('<html><head><title>Bezig met inladen ...</title><style>body{margin:0px;}</style>');writeln('<sc'+'ript>');
  18. writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
  19. writeln('isNN=(navigator.appName=="Netscape")?1:0;');writeln('isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}');
  20. writeln('function aanpassen_aan_beeldgrootte(){');writeln('if (isIE){');writeln('window.resizeTo(100,100);');
  21. writeln('width=100-(document.body.clientWidth-document.images[0].width);');
  22. writeln('height=100-(document.body.clientHeight-document.images[0].height);');
  23. writeln('window.resizeTo(width,height);}');writeln('if (isNN){');       
  24. writeln('window.innerWidth=document.images["BeeldNaam"].width;');writeln('window.innerHeight=document.images["BeeldNaam"].height;}}');
  25. writeln('function maak_titel(){document.title="'+BeeldTitel+'";}');writeln('</sc'+'ript>');
  26. writeln('</head><body bgcolor=000000 scroll="no" onload="aanpassen_aan_beeldgrootte();maak_titel();self.focus()" onblur="self.close()">');
  27. writeln('<img name="BeeldNaam" src='+BeeldURL+' style="display:block"></body></html>');
  28. close();		
  29. }}
  30. </script>

Zet dit in de Body
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <a href="javascript:popBeeld('foto1.jpg','titel')">
  2. <img src="foto1.jpg" height=30 width=40 border="0" alt="klik voor de foto op originele grootte"></a>
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.194s