Popup informatiepaneel

Bezoek mijn Fotosite!

Een site met mijn beste foto's, al of niet bewerkt. www.webmasterij.nl/fotoalbum
 

Een verzameling hobby-websites.
Een bezoekje zeker waard! www.webmasterij.nl

Rechts onder op deze pagina zie je een soort knop die je aanmoedigt om mijn fotosite te bezoeken. Als je er op klikt krijg je een veel grotere advertentie te zien. De plaatjes zijn (ook) links, hoewel dat niet direct zichtbaar is. Als je buiten de plaatjes klikt verdwijnt de advertentie en komt de knop weer terug.
Op deze pagina wordt uitgelegd hoe je zoiets maakt. De code kun je downloaden op zelf te gebruiken.

Dit is een bewerking van een script dat ik aantrof in Webdesigner Magazine nr. 94 (Maart 2017), pag. 58 en 59.
Het blad Webdesigner Magazine wordt sinds eind november 2017 niet meer gemaakt.
Het oorspronkelijke script is niet meer beschikbaar op internet. De maker van het script is niet bij het betreffende artikel genoemd.

Voor deze website is de oorspronkelijke CSS geschoond en is het voorbeeld verfraaid.

• Er worden twee items besproken:
  1. De werking van het script
  2. Toepassen in je eigen site
   
• De werking van het script
• Het script bestaat uit HTML, CSS voor de opmaak en JavaScript om te reageren op klikken met de muis (alle drie in het document).
   
• HTML
• De HTML-code bestaat uit twee, los van elkaar staande, <div>-tags. De plaats in de body is arbitrair.
• De eerste <div>-tag heeft id="bumper" en class="up". Het id is nodig voor de communicatie met JavaScript. De klasse geeft aan dat de knop in het zichtbare deel van het document staat.
• De tweede <div>-tag heeft id="details" en class="down". Ook hier is het id nodig voor de communicatie met JavaScript. De klasse geeft aan dat de advertentie buiten het zichtbare deel van het document staat.
• Beide <div>-tags hebben onclick="switcher()". Bij een klik op de knop of de advertentie wordt de JavaScript-function switcher() aangeroepen.
• Binnen de <div>-tags mag alle (binnen een <div>-tag geldige) HTML-code staan, hoewel ik <audio> en <video> niet zou aanraden. Verder ben je heel vrij in de opmaak van de knop en de advertentie.
   
• CSS
• De CSS bestaat uit twee delen die elk weer in tweeën zijn verdeeld:
  •  De opmaak van de id bumper
  •  De opmaak van de id details
  º  De plaats van bumper en details op het zichtbare deel
  van het document: klasse up
  º  De plaats van bumper en details op het niet- zichtbare deel
  van het document: klasse down
• Zowel bumper als details hebben position:fixed. Dat maakt het mogelijk om ze met de klassen up en down te positioneren.
• De rechter rand van zowel bumper als details staat altijd op 40px van de rechter rand van het document.
• De onderrand van zowel bumper als details staat op 40px boven de onderrand van het window (klasseup) of of 250px onder onderrand van het window (klassedown).
   
• De blokken bumper en details zijn doorzichtig, tenzij je een achtergrond(9)-kleur) opgeeft.
• In beide blokken is cursor: pointer; opgegeven, zodat de cursor steeds een handje is. Hiermee wordt aangegeven dat je overal in het blok kunt klikken en er dus altijd wat gebeurt.
• Voor het wisselen tussen de klassen up en down is voor zowel bumper als details een transition opgegeven. Deze duren resp. 0.8 seconde en 0.5 seconde.
   
• JavaScript
• Het JavaScript bestaat uit de declaratie van de variabelen bumper en details, die elk verwijzen naar de id's met dezelfde naam. Daarbij is er ook de function switcher().
• De declaratie van de variabelen moet in de body na de twee div-tags staan, omdat de twee id's in de DOM bekend moeten zijn alvorens er naar kan worden verwezen. De function switcher() kan eventueel naar de head-sectie worden verplaatst.
• De function switcher() verwisselt de klassen up en down van de knop en de advertentie. Dat gebeurt met behulp van de methode toggle(). Als een id de klasse up heeft wordt die verwijderd. Als een id de klasse up niet heeft, wordt die toegevoegd. Voor down geldt hetzelfde.
• switcher() wordt aangeroepen door een klik op de knop of op de advertentie, via onclick.

Gebruik:

• De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code van het voorbeeld ziet er als volgt uit:
 
(Zet dit in de <HEAD>).

<style>
#bumper {
  position: fixed;
  background: #333;
  color: #fff;
  padding: 10px 30px;
  transition: all 0.8s ease;
  cursor: pointer;
}
#details {
  position: fixed;
  border: 5px solid #333;
  padding: 10px 30px;
  width: 400px;
  height: 200px;
  transition: all 0.5s ease;
  cursor: pointer;
  background:#dfd;
}
.up {
  bottom: 40px;
  right: 40px;
}
.down {
  bottom: -250px;
  right: 40px;
}
</style>

(Zet dit in de <BODY>; de plaats is arbitrair. Het JavaScript komt na de HTML).

<div id="bumper" class="up" onclick="switcher()">Bezoek
    mijn fotosite!</div>
<div id="details" class="down" onclick="switcher()"><h2>Bezoek
    mijn Fotosite!</h2>
<a href="https://www.webmasterij.nl/fotoalbum" target="NewBen">
  <img name="Fotos" src="ben_foto.png" alt="Bezoek mijn Fotosite!!"
    style="width:85px; height;85px; border:0; float:right;
    margin-left:40px">
</a>
<p>Een site met mijn beste foto's, al of niet bewerkt.
<a href="https://www.webmasterij.nl/fotoalbum"
    target="NewBen">www.webmasterij.nl/fotoalbum</a><br>
&nbsp;</p>
<a href="https://www.webmasterij.nl" target="NewBen">
  <img src="wm-215x20.png" alt="Webmasterij logo"
    title="Deze site is onderdeel van Webmasterij. Bezoek de site!"
    style="height:20px; width:215px; border:0; text-align:center">
</a>
<p>Een verzameling hobby-websites.<br>
Een bezoekje zeker waard! <a href="https://www.webmasterij.nl" target="NewBen">www.webmasterij.nl</a></p></div>
<script>
var bumper = document.getElementById("bumper");
var details = document.getElementById("details");

function switcher() {
  bumper.classList.toggle("down");
  bumper.classList.toggle("up");
  details.classList.toggle("down");
  details.classList.toggle("up");
}
</script>

Downloaden:
 
Druk op de knop:  File: voorb562.zip, 897 bytes.