Tegelpatronen van (elkaar overlappende) plaatjes
|
Om een leuke opmaak van je site te krijgen is het soms handig om de plaatjes elkaar gedeeltelijk te laten overlappen, zoals hierboven gebeurt. De aanpak hiervan ligt niet onmiddellijk voor de hand. Daarom wordt hier beschreven hoe je dat doet.
Ik heb deze code zelf ontwikkeld, waarbij ik gebruik gemaakt heb van bestaande code voor het bepalen van de plaats waar het ankerpunt zich bevindt (zie verder). Hij staat onderaan deze pagina. Je kunt hem ook downloaden voor je eigen gebruik, inclusief de plaatjes.
- In dit voorbeeld staat het tegelpatroon in een tabel die bestaat uit slechts één cel. Dat is gedaan om het kader rond de figuur te maken.
- Als je het window (veel) kleiner maakt, zouden de plaatjes geheel of gedeeltelijk buiten de tabel kunnen komen.
Dat komt door de werking van dit script. Daarom wordt de bladzijde opnieuw geladen als de grootte van het window
wordt gewijzigd. De plaats van de plaatjes wordt dan opnieuw berekend.
Ook wordt de grootte van de tabel voorgeschreven door in de <TABLE>-tag de attributen width en height op te nemen. De waarden van width en height moeten worden bepaald door te proberen. - De aanpak is als volgt:
- In de <BODY> wordt een plaatje neergezet, dat dient als ankerpunt. Dit gebeurt met gewone HTML-code.
Dit plaatje is het eerste in de reeks. - In de <img>-tag wordt het attribuut name= gebruikt.
- Er is een stukje JavaScript, dat deze naam gebruikt als referentie om de plaats van de andere plaatjes uit de reeks te bepalen.
- In de <BODY> wordt een plaatje neergezet, dat dient als ankerpunt. Dit gebeurt met gewone HTML-code.
- Het JavaScript staat in de file tileset.js. Deze file behoeft geen verandering om hem te kunnen gebruiken.
- Zoals hierboven gezegd heeft het eerste plaatje een name. Hier is daarvoor de naam "placeholder"
gebruikt. Dit plaatje is hier een rode stip van één pixel groot. Je ziet het staan in de linkerbovenhoek
van de tabel.
Het is niet nodig om een plaatje van 1 pixel als ankerpunt te nemen. Elk plaatje voldoet. De overige plaatjes worden gepositioneerd ten opzichte van de linker bovenhoek. Een eventuele border valt buiten het plaatje!
Je kunt natuurlijk ook een .GIF-plaatje met een transparante achtergrond, als placeholder nemen. Dan zie je de placeholder niet en dat is wel zo mooi. Een dergelijk plaatje vind je in de downloadfile (pixel-0.gif). - Alle plaatjes zijn ten opzichte van dit punt gepositioneerd. Het eerste plaatje (koffiekopje) staat 20 pixels naar rechts en 10 naar beneden.
- Om plaatjes aan de reeks toe te voegen roep je de JavaScript function TilePicture() aan. Deze function schrijft de benodigde HTML-code (per plaatje een <span>-tag en een <img>-tag) en staat in tileset.js.
- De function TilePicture() heeft acht parameters, die alle moeten worden ingevuld. Zie onderstaande tabel.
| Parameter | Betekenis |
| picture | Naam van het plaatje dat moet worden toegevoegd (string tussen quotes). |
| w | Breedte van het plaatje zoals dat op het scherm verschijnt (getal, pixels). |
| h | Hoogte van het plaatje zoals dat op het scherm verschijnt (getal, pixels). |
| b | Breedte de rand om het plaatje (getal, pixels). Als je geen rand wilt zet je dit op nul. |
| a | "alt"-tekst bij het plaatje (string tussen quotes). Mag een lege string zijn. |
| anchorpoint | Name van het ankerplaatje (string tussen quotes). |
| dx | Horizontale verplaatsing t.o.v. het ankerpunt (getal, pixels). dx < 0 geeft verplaatsing naar links; dx > 0 geeft verplaatsing naar rechts. |
| dy | Verticale verplaatsing t.o.v. het ankerpunt (getal, pixels). dy < 0 geeft verplaatsing naar boven; dy > 0 geeft verplaatsing naar beneden. |
- De waarden van hspace en vspace in de <img>-tag worden door het script allebei op nul gezet.
N.B.: Deze twee attributen zijn vervallen in HTML5. - Het plaatje dat je als eerste toevoegt ligt onderop de stapel. Het laatste plaatje ligt bovenop.
- Het JavaScript dat je gebruikt om de plaatjes toe te voegen aan de stapel mag niet in een tabel staan, anders werkt het niet. Het plaatje dat je gebruikt als ankerpunt mag wel in een tabel staan, zoals hier ook is gedaan.
Gebruik:
- De code staat voor een deel in de <HEAD> en voor een deel in de <BODY> en in de <BODY>-tag.
(Zet dit in de <HEAD>).
(Zet dit in de <BODY>, op de plaats waar de plaatjes moeten komen).<script src="tileset.js"></script>
<table width="280" align="center" cellpadding="5" cellspacing="2"(Neem het onderstaande attribuut op in de <BODY>-tag).
border="1" height="280">
<tr><td valign="top" align="left">
<img name="placeholder" src="pixel-1.gif" width="1" height="1"
border="0" alt="">
</td></tr></table>
<script type="text/javascript">
// Zet de plaatjes neer
TilePicture('plaatje4.gif',144,97,2,'koffie','placeholder',20,10);
TilePicture('plaatje5.gif',108,73,2,'klok','placeholder',56,140);
TilePicture('plaatje6.gif',72,49,2,'telraam','placeholder',150,100);
TilePicture('plaatje7.gif',72,49,2,'diskettes','placeholder',150,200);
</script>
onresize="self.location.reload()"
Downloaden:
Druk op de knop:
File: voorb102.zip, 49 677 bytes.
Opmerking:
Deze techniek kan heel mooie effecten geven met .GIF- of .PNG-plaatjes met een transparante achtergrond. De
plaatjes lopen dan door elkaar heen. Zet dan wel de dikte van de border op nul, tenzij je een "traliewerk" wilt...
