Popup openen
 | Maak een html pagina die je in de popup wil laten verschijnen. |
Bijvoorbeeld: http://educinno.intec.ugent.be/onderwijsinnov/antw1_popup.htm
| Kopieer de volgende code in het HEAD de html pagina waarin een knop moet komen om
antwoord.htm te openen. |
< script language="javascript">
<!--
function popup(pagina,breedte,hoogte) {
url = pagina;
window_name = "";
properties =
"toolbar=no,location=0,directories=no,status=no,menubar=0,scrollbars=yes,resizable=1,copyhistory=0,width="
+
breedte + ",height=" + hoogte + ",left=50,top=50";
instructions = window.open(url, window_name, properties);
}
// -->
</script>
| Popups kunnen geopend worden door op een knop, tekstlink of op een icoontje te drukken.
Voor elk van deze drie mogelijkheden moet je een ander stukje code kopieren in de BODY van
de html pagina op de plaats waar je de knop, de tekstlink of het icoontje wil plaatsen.
knop
< form>
<div align="center"><center><p> <input type="button" value="antwoord"
onclick="popup('antw1_popup.htm',380,280)"></p>
</center></div>
</form> |
tekstlink
< a href="javascript:popup('verkl_term.htm',380,280);"
onMouseOver="window.status='Klik hier voor een korte
uitleg'; return true"
onMouseOut="window.status=''; return true">term</a> |
icoontje
< a href="javascript:popup('verkl_term.htm',380,280);"
onMouseOver="window.status='Klik hier voor een korte
uitleg'; return true"
onMouseOut="window.status=''; return true">
<p align="center"><img src="images/info.JPG"
alt=" Klik hier om een popup met meer info te openen"
border="0" WIDTH="73" HEIGHT="73"></a>
</p> |
|
| Vergeet niet de parameter van de functie popup (de URL van de pagina die in de popup
moet komen) aan te passen. Bij de code voor het icoontje moet ook naam van de figuur
aangepast worden en moet de figuur zich bevinden in de directory images. |
| Ook de breedte en de hoogte van de popup moeten nu als parameter aan de functie popup
meegegeven worden. We nemen als standaardafmetingen 380 x 280 pixels. Als er echter
bijvoorbeeld een foto, java-applet, of nog iets anders getoond moet worden in de popup,
dan passen we deze afmetingen aan volgens de te tonen inhoud. |
| De tekst bij onMouseOver="window.status=' ' bij verschijnt in
de statusbalk als de muis over de knop, term of het prentje gaat. |
| De tekst bij alt=" " (enkel
in het geval van het icoontje) is de tekst die getoond wordt als "tooltip" als
je lang genoeg met de muis blijft stilstaan op het icoontje. |
Opmerking:
| Wil je op een pagina meerdere popups, dan hoef je de code in de HEAD van de html pagina
niet telkens opnieuw kopieren. |
| Nu is alleen de breedte en de hoogte van de popup als parameter opgegeven, maar het is
ook mogelijk om op analoge manier de positie van de popup als parameter mee te geven. |
Voorbeeld
|
Het is ook mogelijkeen tekstlink te maken van een term zodat als er op geklikt wordt, er een
popup-venster verschijnt met de verklaring ervan. |
Popup-venster sluiten met een knop
Kopieer de volgende code in de html code van het popup-venster op de plaats waar de
knop moet komen.
< form>
<div align="center"><center><p><input TYPE="button" VALUE="sluit dit venster"
onClick="window.close()"></p>
</center></div>
</form>
Stijlafspraken
Volg deze link naar het draaiboek
|
