WebKnutselaarsHulpjes Webknutselaarshulpjes logo

WebKnutselaarsHulpjes

Zo blij  

Popups 2

Informatievenstertjes met tekst of plaatje.

De vensters worden relatief ten opzichte van een element in de pagina weergegeven.

Met tekst.

Ga met de muis over de links en zie wat er gebeurd.

 

Plaats aan het einde van de pagina net voor </body>:

<div id="bericht"></div>
 

In je stijlblad:

#bericht {
position : absolute;
top : 100px;
left : 300px;
width : 150px;
height : 150px;
color : #FFFF00;
background-color : #0000CC;
padding : 25px;
border : 2px solid #000000;
display : none;
}
 

Plaats deze (groene) code tussen <head> en </head>:

<script language="javascript" type="text/javascript">
<!--
function sluitPopup() {
if(document.getElementById) {
document.getElementById('bericht').style.display = "none";
}
}

function laatPopupzien(bericht) {
if(document.getElementById) {
var x;
var y;
x= document.getElementById('tekstbijlinks').offsetLeft;
y= document.getElementById('tekstbijlinks').offsetTop;
tekst=''+bericht+'';
document.getElementById('bericht').style.display = "block";
document.getElementById('bericht').style.left = x + 140 +'px';
document.getElementById('bericht').style.top = y - 90 +'px';
document.getElementById('bericht').innerHTML=tekst;
}
}
// -->
</script>

 

En deze (groene) code in het <body> gedeelte:

<div id="tekstbijlinks"> <a href="#" onMouseOver="laatPopupzien('Tekst eerste link')" onMouseOut="sluitPopup()" onClick="window.open('link1.html','','width=400,height=300'); return false">Link 1.</a>
<a href="#" onMouseOver="laatPopupzien('Tekst tweede link')" onMouseOut="sluitPopup()" onClick="window.open('link2.html','','width=400,height=300'); return false">Link 2.</a>
<a href="#" onMouseOver="laatPopupzien('Tekst derde link')" onMouseOut="sluitPopup()" onClick="window.open('link3.html','','width=400,height=300'); return false">Link 3.</a> </div>

Zet per link alles tussen <a en /a> op één regel!

Met de 'onClick' openen we een link, dit hoeft niet.

 

Met plaatjes.

Ga met de muis over de links en zie wat er gebeurd.

 

Plaats aan het einde van de pagina net voor </body>:

<div id="bericht"></div>
 

In je stijlblad:

#bericht {
position : absolute;
top : 100px;
left : 300px;
width : 150px;
height : 150px;
color : #FFFF00;
background-color : #0000CC;
padding : 50px;
border : 2px solid #000000;
display : none;
}
 

Plaats deze (groene) code tussen <head> en </head>:

<script language="javascript" type="text/javascript">
<!--
function sluitPopup2() {
if(document.getElementById) {
document.getElementById('bericht').style.display = "none";
}
}

function laatPopupzien2(plaatje) {
if(document.getElementById) {
var x;
var y;
x= document.getElementById('plaatjebijlinks').offsetLeft;
y= document.getElementById('plaatjebijlinks').offsetTop;
afbeelding=''+plaatje+'';
document.getElementById('bericht').style.display = "block";
document.getElementById('bericht').style.left = x + 140 +'px';
document.getElementById('bericht').style.top = y - 90 +'px';
document.getElementById('bericht').innerHTML=afbeelding;
}
}
// -->
</script>

 

En deze (groene) code in het <body> gedeelte:

<div id="plaatjebijlinks"> <a href="#" onMouseOver="laatPopupzien2('<img src=img/muilezel.jpg width=100 height=150 border=0>')" onMouseOut="sluitPopup2()" onClick="window.open('link1.html','','width=640,height=480'); return false"><b>Link 1.</b></a>  <a href="#" onMouseOver="laatPopupzien2('<img src=img/schip.jpg width=100 height=150 border=0>')" onMouseOut="sluitPopup2()" onClick="window.open('link2.html','','width=640,height=480'); return false"><b>Link 2.</b></a>  <a href="3" onMouseOver="laatPopupzien2('<img src=img/zee.jpg width=100 height=150 border=0>')" onMouseOut="sluitPopup2()" onClick="window.open('link3.html','','width=640,height=480'); return false"><b>Link 3.</b></a> </div>

Zet per link alles tussen <a en /a> op één regel!

Met de 'onClick' openen we een link, dit hoeft niet.

Pas de code en stijl aan naar uw eigen wensen en/of behoeften.

Divider

WebKnutselaarsHulpjesDisclaimer: de auteur van WebKnutselaarsHulpjes zal geen enkele aansprakelijkheid aanvaarden voor schadelijke gevolgen, lichamelijke klachten, slapeloze nachten, of enig ander gevolg van het gebruik van de hier getoonde voorbeelden.