Op deze pagina ...

Hoe plaats ik tekst over een plaatje? Het plaatsen van tekst over een plaatje kan het laden van een pagina aanzienlijk verbeteren, zeker als je bijvoorbeeld een menu hebt gemaakt met 16 knoppen, die er allemaal hetzelfde uitzien maar net even een andere tekst hebben. Je kunt dan kiezen om voor iedere knop een afbeelding te maken, of...

De truuc van tekst over afbeeldingen plaatsen

Het lijkt moeilijk, maar eigenlijk is het een eenvoudig truucje, als je het eenmaal gezien hebt, stelt het niets voor.

Om te beginnen hebben we een tabel nodig (ik heb hier een tabel gemaakt van slecht 1 cel):

Iedere cell kan een eigen achtergrond hebben en dat is een belangrijk gegeven voor de truuc.
Laten we eerst een plaatje maken of zoeken. Ik heb er snel een in elkaar geprutst en ik geef toe dat ik weleens fraaiere getekend heb. Ik heb het opgeslagen als "blue_button.gif" en ziet er als volgt uit:

De dimensies van dit plaatje zijn: breed=100 (width) en hoog=30 (height). Vergeet deze nummers niet!

De volgende stap is de cel net zo groot te maken als het plaatje.
De bovenstaande cel is duidelijk te groot, maar dat komt niet alleen door de foutieve gegevens toen we de cel hebben aangemaakt, maar ook omdat we de dimensies in procentent hebben uitgedrukt. Dit zal dus zelden de correcte dimensie zijn. Dat zien we in HTML-code terug:

<table width="38%">
<tr>
<td>een voorbeeld cel ...</td>
</tr>
</table>

Probleem nummer 1 is dus de omvang van de cel. Het volgende probleem is de lelijke rand rond de cel. Pas de HTML code als volgt aan, zodat die problemen opgelost zijn. Hiervoor hebben we de breedte en hoogte van de tekening nodig:

<table width="100" border="0" cellspacing="0" cellpadding="0" height="30">
<tr>
<td></td>
</tr>
</table>

We zijn er nog niet, want waar is het plaatje ?
Nu gaan we de BACKGROUND PATTERN (achtergrond patroon) aan de cel toevoegen en wel als volgt:

<table width="100" border="0" cellspacing="0" cellpadding="0" height="30">
<tr background="blue_button.gif">
<td></td>
</tr>
</table>

Wat resulteerd in een cel met het plaatje als achtergrond. Helaas ondersteunen de meeste browsers het niet als je in een tabel een tabel plaatst met een andere achtergrond. Omdat deze pagina bestaat uit een (grote) tabel, kan ik dit dus helaas niet demonstreren.

Nu kunnen we tekst in de cel plaatsen, let wel op dat de tekst niet groter mag worden dan de cel. Je kunt de tekst hetzelfde bewerken als reguliere HTML tekst en dus bijvoorbeeld een link er aan koppelen, maar ook dik, veranda, wit en gecentreerd toevoegen.

Zoals je ziet, als je het eenmaal weet is het een fluitje van een cent ... niet dan ?

Opmerking: bij bepaalde browsers, kan een tabel binnen een tabel geen andere achtergrond hebben ! (een manko in de browser dus).