tekst schrijven in afbeelding

[pontoe]

ey all,

is het mogelijk om tekst in een afbeelding te maken met javascript? dus dat je gewoon een standaard plaatje hebt, en dat javascript daar tekst in zet?

edit: ik zag ergens op internet dat het het makkelijkst is om de afbeelding gewoon als achtergrond in te stellen. dit wordt bij mij nogal lastig, want als ik op dat stuk een table invoeg, schiet alles op de pagina weg, en ik weet niet of ik in een css document gewoon javascript kan gebruiken... hij past namelijk het plaatje ergens op aan.

 

[Glest]

je kunt niet in het plaatje zelf scrhijven, maar je kunt inderdaad of het plaatje als achtergrond instellen of je teks voor je plaatje plaatsen.

Ik zie trouwens geen rede om een tabel te gebruiken voor je achtergrond plaatje. Gebruik gewoon een div.

En nee, javascript IN een css bestand mag niet (behalve in IE, niet gebruiken!), maar je kunt natuurlijk altijd CSS en javascript samen gebruiken in een html document. Je hebt hier alleen geen Javascript voor nodig, dit moet gewoon met CSS.

neem een div, geef hem met css een achtergrond, de goede afmetinh en position:relative. Zet in de div een span met position:absolute en de goede coordinaten. Zet in de span je tekst =)

<style type="text/css">
div#imgDiv
{
  background-image: url(achtergrond.gif);
  position: relative;
  width: 200px; /* zet hier de breedte van je plaatje */
  height: 200px; /* zet hier de hoogte van je plaatje */
}

div#imgDiv span
{
  position: absolute;
  left: 10px; /* x coordinaat voor je tekst */
  top: 20px; /* Y coordianat voor je tekst */
}
</style>


<div id="imgDiv">
  <span>Tralala</span>
</div>

 

[pontoe]

uhm... wat houd een div precies in? en het is zeker niet mogelijk om 2 achtergrondafbeeldingen over elkaar te leggen en de ene half doorzichtig te maken ofzo?

 

[Glest]

Jawel, je kunt een ander plaatje in de div zetten met "position: absolute; top: 0; left: 0; opacity: 0.5; filter:alpha(opacity=50);". Let dan wel op dat de z-index van je span hoger is dan de z-index van je plaatje.


Een div is een blok, meer niet. Je kunt erin zetten wat je wilt, en normaal gesproken is het een block-element (display: block). Het is een vierkantje waarin je kunt doen wat je wilt.