Plaatje (knop) met tekst uit de database
Zie het als volgt:
rode knop (cirkel)
groen knop (vierkant)
blauwe knop (driekhoek)
Vervolgens moeten in deze knoppen texten uit de database komen.
Wat is hier de beste methode voor? Gebruik maken van plaatjes en daar tekst over heen zetten (zo ja hoe doe ik dit) of misschien Ajax oid gebruiken maar kan iemand verwijzen naar een tutotrial / boek waar ik dit in kan vinden.
Gewijzigd op 01/01/1970 01:00:00 door Mitchell
niet helemaal uit.
Mijn plaatje is 75 pixels bij 75 pixels. Niet de text maar het plaatje
moet bepalend voor het formaat zijn.
Ik krijg dit nog niet voor elkaar het volgende heb ik tot nu toe.
<table>
<tr>
<td width="75" height="75"><div style="background-image:
url(images/buttons/group.png); background-repeat:repeat-n;
size:">Groep 1</div></td>
</tr>
</table>
Op deze manier zie ik maar een klein deel van het plaatje namelijk het formaat dat de tekst is.
Gewijzigd op 01/01/1970 01:00:00 door Twan T
http://www.jankoehoorn.nl/text_over_images.php
Zo ja, hier de broncode. Aanpassen naar je eigen situatie uiteraard.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?php
ini_set ('display_errors', 1);
error_reporting (E_ALL | E_STRICT);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
li {border: 1px solid #ccc; float: left; display: inline; text-align: center; color: white; font-weight: bold;}
</style>
</head>
<body>
<ul style="list-style-type: none; margin: 0; padding: 0;">
<?php
$i = 1;
foreach (glob ('imagick/s/*.jpg') as $img) {
list ($w, $h) = getimagesize ($img);
echo '
<li style="line-height: ' . $h . 'px; background-image: url(' . $img . '); width: ' . $w . 'px; height: ' . $h . 'px;">Hier tekst ' . $i++ . '</li>
';
}
?>
</ul>
</body>
</html>
ini_set ('display_errors', 1);
error_reporting (E_ALL | E_STRICT);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
li {border: 1px solid #ccc; float: left; display: inline; text-align: center; color: white; font-weight: bold;}
</style>
</head>
<body>
<ul style="list-style-type: none; margin: 0; padding: 0;">
<?php
$i = 1;
foreach (glob ('imagick/s/*.jpg') as $img) {
list ($w, $h) = getimagesize ($img);
echo '
<li style="line-height: ' . $h . 'px; background-image: url(' . $img . '); width: ' . $w . 'px; height: ' . $h . 'px;">Hier tekst ' . $i++ . '</li>
';
}
?>
</ul>
</body>
</html>
Maar dit moet wel weer een stuk in de juiste richting komen.