Link in nieuwe pagina

Status
Niet open voor verdere reacties.
M

mister 9

Gebruiker
Lid geworden
15 mrt 2004
Berichten
646
Hallo,

Ik wil graag mijn link (een plaatje) laten openen in een nieuwe pagina.
Weten jullie hoe dit moet?

Alvast hartelijk dank.

Groeten,

Sam
 
Hoe bedoel je? Met een popup, of gewoon in een nieuw venster?

Greetz : Jer:cool:en.
 
Da's geen probleem.
Houd er wel rekening mee dat sommige browsers dit sowieso tegenhouden, zoals firefox.

Het volgende komt in de head van je document :
HTML: 
<script language="javascript">
<!--
var img_arr = new Array();
img_arr[0] = "foto1.jpg";
img_arr[1] = "foto2.jpg";
.
.
.
img_arr[?] = "foto?.jpg";
/* hierboven zet je zoveel foto's als je wilt. Begin wel met nummer 0
 hieronder kan je de 400 veranderen om de hoogte en/of de breedte van de popup te veranderen. Zorg hierbij wel dat je enkele pixels meer kiest dan de foto hoog is voor de hoogte*/
function popUpImg(num) {
	var img = "<center><img src='" + img_arr[num] + "'></center>;
	var winTop = (screen.height-400)/2;
	var winLeft = (screen.width-400)/2;
	winprops = "height=400,width=400,top="+winTop+",left="+winLeft;
	newwindow = window.open("", "newWindow", winprops);
};
-->
</script>
Alles wat tuss /* en */ staat mag weg, inclusief de /* en */ .

Het volgende wordt de link om de popup te openen met de juiste foto, en komt in de body van je document :
HTML: 
<a href="javascript:popUpImg(0)">foto 1</a>
<a href="javascript:popUpImg(1)">foto 2</a>
.
.
.
<a href="javascript:popUpImg(?)">foto ?</a>
Succes.
Ik ben vanavond laat pas terug online.

Greetz : Jer:cool:en.
 
Laatst bewerkt:
Of je het plaatje nu in een nieuw browservenster of in een popupvenster wilt zien, in gewone HTML zul je er in ieder geval een aparte pagina voor moeten maken.
Om die pagina dan in een ander browservenster te laten openen, wordt de link bijvoorbeeld:

<a href="afbeelding.htm" target="_blank">

Het blauwe stukje code zorgt ervoor dat er een nieuw venster geopend wordt.

Voor een popupvenster zou je onderstaande code kunnen gebruiken. Bovenste is voor de link, onderste voor het popupvenster. Het is wat simpeler dan de code die Jeroen geeft, maar dit werkt ook in Firefox (zie bijlage "firefox"):
PHP: 
<html>
<head>
<title>Pagina</title>
</head>

<body>
<center>

<a href="afbeelding.htm" onclick="window.open('afbeelding.htm','venster1','width=320,height=290,left=352,top=230');return false"/>Klik om het venster te openen</a>

</center>
</body>
</html>


<html>
<head>
<title>Venster</title>
</head>

<body>
<center>
<img src="afbeelding.jpg">
<p>

<a href="javascript:window.close()">Klik om het venster te sluiten</a>

</p>
</center>
</body>
</html>
In dit voorbeeld moet het tweede html-document dus de naam afbeelding.htm krijgen om de link in het eerste html-document te laten werken.
Achter onclick="window.open zie je tussen haakjes v.l.n.r.: naam van het html-document, naam van het venster, hoogte en breedte van het venster en de schermpositie van de linker bovenhoek van het venster.
In de bijlage een zip-bestandje met een werkend voorbeeld van deze code.

Guus.
 
Laatst bewerkt:
Da's inderdaad beter van guusabc. :thumb:
Alleen weet ik niet wat die afbeelding.htm doet in de href, omdat die ook in de onclick staat. ;)
Het venster opent ook niet meer in het midden van het scherm. :(

Greetz : Jer:cool:en.
 
JeroenE zei:
Alleen weet ik niet wat die afbeelding.htm doet in de href, omdat die ook in de onclick staat. ;)
Klik om te vergroten...
Ik ook niet. :D Dit soort scriptjes zoek ik op internet op. Ik weet net genoeg van Java Script om te begrijpen wat ze doen. Kleine wijzigingen lukken meestal ook nog wel, maar daar houdt het dan wel mee op; als er iets niet helemaal klopt in zo'n stukje code zie ik dat echt niet - en waarom zou ik naar fouten gaan zoeken in iets dat werkt? ;)
Maar ik wil natuurlijk best weten hoe het zonder afbeelding.htm kan, al werkt de code op deze manier ook. :)
JeroenE zei:
Het venster opent ook niet meer in het midden van het scherm. :(
Klik om te vergroten...
Dan moet je de waardes achter left en top gewoon veranderen:

onclick="window.open('afbeelding.htm','venster1','width=320,height=320,left=250,top=150');return false"/

Of bedoel je dat niet?

Guus.
 
Guus abc zei:
waarom zou ik naar fouten gaan zoeken in iets dat werkt? ;)
Klik om te vergroten...
Gelijk heb je. :D

Je kan die href veranderen in : "javascript:void(0);" om de pagina niet te laten herladen, of je kan de "window.open...." in de plaats zetten en geen onClick gebruiken.

Guus abc zei:
Dan moet je de waardes achter left en top gewoon veranderen:

onclick="window.open('afbeelding.htm','venster1','width=320,height=320,left=250,top=150');return false"/

Of bedoel je dat niet?
Klik om te vergroten...
Dat zou inderdaad de plaats veranderen, maar het midden van het scherm hangt af van de schermresolutie.....
Daarmee dat in mijn javascriptje het volgende staat :
HTML: 
var winTop = (screen.height-[color=blue]hoogte afbeelding, gelijk waar te bepalen[/color])/2;
// deelt de hoogte van het scherm min de hoogte van de afbeelding in twee
var winLeft = (screen.width--[color=blue]breedte afbeelding, gelijk waar te bepalen[/color])/2;
// doet hetzelfde met de breedte van het scherm min de breedte van de afbeelding

Greetz : Jer:cool:en.
 
Als dat scriptje om het venster in het midden te krijgen ook in Firefox werkt, zou TS dat nog kunnen toevoegen.
Maar ook als dat niet kan is er geen man overboord. Dan geef je voor een popupvenster van bijv. 400 x 300 px de positie left=200 top=150.
Op 800 X 600 staat ie dan in het midden.
Op 1024 x 768 en hoger komt ie dan uiteraard niet in het midden, maar er zijn ergere dingen en je kunt in dit leven nu eenmaal niet alles krijgen zoals je het zou willen. :D

Guus.
 
Laatst bewerkt:
JeroenE zei:
Het werkt als je popups toestaat voor de site.
-> Klik <-
Klik om te vergroten...
Mister 9 kan kiezen: van een simpele gewone pagina die in een nieuw venster opent tot popupvensters die op alle resoluties in het midden komen te staan.
Ik heb je code nog even hieronder gezet (en ook opgeslagen voor eigen gebruik, want dit kan me nog weleens van pas komen. :))
HTML: 
<html>
<head>
<title>Gecentreerde popup</title>
<script language="javascript">
<!--
var img_arr = new Array();
img_arr[0] = "afbeelding_1.jpg";
img_arr[1] = "afbeelding_2.jpg";
img_arr[2] = "afbeelding_3.jpg";
function popUpImg(num) {
var img = "<center><img src='../Pictures/" + img_arr[num] + "'></center>";
var winTop = (screen.height-400)/2;
var winLeft = (screen.width-400)/2;
winprops = "height=400,width=400,top="+winTop+",left="+winLeft;
newwindow = window.open("", "newWindow", winprops);
newwindow.document.write(img);
};
-->
</script>
</head>
<body>
<center>
<p><a href="javascript:popUpImg(0)">foto 1</a></p>
<p><a href="javascript:popUpImg(1)">foto 2</a></p>
<p><a href="javascript:popUpImg(2)">foto 3</a></p>
</center>
</body>
</html>

Guus.
 
Ik heb het script wat verbeterd.
Je kan nu de grootte van de popup bepalen door de afmetingen erbij te zetten.

HTML: 
<html>
<head>
<title>Gecentreerde popup</title>
<script language="javascript">
<!--
var img_arr = new Array();
img_arr[0] = "foto1.jpg 150 208";
img_arr[1] = "foto2.jpg 300 71";
img_arr[2] = "foto3.gif 120 90";
function popUpImg(num) {
var imgWidth = img_arr[num].split(" ")[1];
var imgHeight = img_arr[num].split(" ")[2];
var img = "<center><img src='" + img_arr[num].split(" ")[0] + "'></center>";
var winLeft = (screen.width-imgWidth)/2;
var winTop = (screen.height-imgHeight)/2;
winprops = "height="+imgHeight+",width="+imgWidth+",top="+winTop+",left="+winLeft;
newwindow = window.open("", "newWindow", winprops);
newwindow.document.write(img);
};
-->
</script>
</head>
<body>
<center>
<p><a href="javascript:popUpImg(0)">foto 1</a></p>
<p><a href="javascript:popUpImg(1)">foto 2</a></p>
<p><a href="javascript:popUpImg(2)">foto 3</a></p>
</center>
</body>
</html>
-> Voorbeeld <-

Het werkt echter nog niet perfect. Misschien dat onze beste scripter Egel ons kan helpen om de afbeelding nog helemaal in het midden te krijgen, want ik moet gaan slapen en heb dus geen tijd meer vandaag. Morgen vroeg op hé. :(

Greetz : Jer:cool:en.
 

Bijlagen

Laatst bewerkt:
JeroenE zei:
Ik heb het script wat verbeterd.
Je kan nu de grootte van de popup bepalen door de afmetingen erbij te zetten.
Klik om te vergroten...
Nog mooier. :thumb:
Egel kan die laatste foutjes er vast wel uitkrijgen. :)

Guus.
 
Laatst bewerkt:
Dat hebben we toch al eens gemaakt? :)

Bij dit onderwerp kun je popupvenster.zip downloaden.
HTML: 
<html>
 <head>
  <title>PopUp venster | Egel 051018</title>

  <script language="JavaScript">
   <!-- PopUp venster | Egel 051018
    function show(photo,width,height,padding,color) {
     if (!padding) var padding = 0; padding = 2 * (padding + 2); // +2 => Fx!
     if (!color) var color = '#c0c0c0';
     var format = 'resizeable=no,width=' + (width + padding) + ',height=' + (height + padding);
     var title = photo.split('/'); title = title[title.length - 1]; title = title.split('.'); title = title[0];
     var console = open('','',format);
     function cw(text) { console.document.writeln(text);};
     console.document.open();
     cw('<html>');
     cw(' <head>');
     cw('  <title>' + title + '</title>');
     cw('  <style type="text/css">');
     cw('   body { margin: 0px; border: 0px; padding: 0px; background: ' + color + ';}');
     cw('   table { width: 100%; height:100%;');
     cw('  </style>');
     cw(' </head>');
     cw(' <body>');
     cw('  <table cellspacing="0" cellpadding="0"><tr><td align="center"><a href="javascript:window.close()"><img src="' + photo + '" border="0" title="Klik om dit venster te sluiten"></a></td></tr></table>');
     cw(' </body>');
     cw('</html>');
     console.document.close();
     return false;
     };
   // -->
  </script>

 </head>

 <body>
  <hr>
  <a href="bloem.jpg" target="_blank" onclick="return show('bloem.jpg',300,225)"><img border="0" src="thumbnail_bloem.jpg" title="Klik voor de grote versie"></a>
  <a href="klok.jpg" target="_blank" onclick="return show('klok.jpg',320,320)"><img border="0" src="thumbnail_klok.jpg" title="Klik voor de grote versie"></a>
  <hr>
  <a href="bloem.jpg" target="_blank" onclick="return show('bloem.jpg',300,225,10)"><img border="0" src="thumbnail_bloem.jpg" title="Klik voor de grote versie"></a>
  <a href="klok.jpg" target="_blank" onclick="return show('klok.jpg',320,320,10)"><img border="0" src="thumbnail_klok.jpg" title="Klik voor de grote versie"></a>
  <hr>
  <a href="bloem.jpg" target="_blank" onclick="return show('bloem.jpg',300,225,10,'black')"><img border="0" src="thumbnail_bloem.jpg" title="Klik voor de grote versie"></a>
  <a href="klok.jpg" target="_blank" onclick="return show('klok.jpg',320,320,10,'#000')"><img border="0" src="thumbnail_klok.jpg" title="Klik voor de grote versie"></a>
  <hr>
  <a href="bloem.jpg" target="_blank" onclick="return show('bloem.jpg',300,225,10,'white')"><img border="0" src="thumbnail_bloem.jpg" title="Klik voor de grote versie"></a>
  <a href="klok.jpg" target="_blank" onclick="return show('klok.jpg',320,320,10,'#fff')"><img border="0" src="thumbnail_klok.jpg" title="Klik voor de grote versie"></a>
  <hr>
 </body>

</html>
Het javascript zet je in de head sectie van je pagina. Een link maak je als:

<a href="bloem.jpg" target="_blank" onclick="return show('bloem.jpg',300,225)">bloem</a>

of

<a href="klok.jpg" target="_blank" onclick="return show('klok.jpg',320,320,10,'#000')">klok</a>

met een extra randje in 't zwart.

De bijlage venster.jpg laat bovenstaande voorbeelden in Fx en Ie zien.


Vr.Gr. Egel.
 

Bijlagen

  • vensters.jpg
    vensters.jpg
    59,3 KB · Weergaven: 41
Laatst bewerkt:
JeroenE zei:
Alleen weet ik niet wat die afbeelding.htm doet in de href, omdat die ook in de onclick staat. ;)
Klik om te vergroten...
Guus abc zei:
Ik ook niet. :D Dit soort scriptjes zoek ik op internet op.
Klik om te vergroten...
Dit soort scriptjes moet je ook op helpmij.nl zoeken. ;)

<a href="bloem.jpg" target="_blank" onclick="return show('bloem.jpg',300,225)">bloem</a>

De href is de gewone link die, in een nieuw venster, opent als javascript uitstaat. Staat het aan dan wordt eerst de onclick uitgevoerd en als die false returned gaat de href niet door. :)


Vr.Gr. Egel.
 
Laatst bewerkt:
Egel zei:
Dit soort scriptjes moet je ook op helpmij.nl zoeken. ;)
Klik om te vergroten...
Sinds wanneer maakt Helpmij geen deel meer uit van internet? ;)
Egel zei:
De href is de gewone link die, in een nieuw venster, opent als javascript uitstaat. Staat het aan dan wordt eerst de onclick uitgevoerd en als die false returned gaat de href niet door.
Klik om te vergroten...
Kijk, dat snap ik - zelfs op maandagochtend. :)
Ik ga toch maar eens een boekje over Java Script uit de bieb halen.
Een mens raakt ook nooit uitgeleerd. :rolleyes:

Guus.
 
Egel zei:
Cursusweb: Cursus Javascript is een goede online handleiding.
Klik om te vergroten...
Dat ziet er allemaal niet echt heel moeilijk uit. Lijkt ook vaak wel een beetje op BASIC met dingen als IF...THEN...ELSE e.d.
Soms ook weer een beetje anders - WHILE heeft geen WEND meer en FOR geen NEXT, maar dat was in latere BASIC-versies ook al zo, geloof ik.
Nu nog even uitvinden wanneer je ( ), { } of [ ] gebruikt en waar wel en geen spaties mogen, dan ben ik al een heel eind. :)
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan