Plaatje (knop) met tekst uit de database

Door Twan T op 02-09-2009 23:03

887 views

Voor een website wil ik knoppen kunnen tonen wat eigenlijk plaatjes zijn:
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.

Jan Koehoorn

02-09-2009 23:22

De teksten gewoon in een divje zetten en met CSS de goede background-image toewijzen.

Mitchell

03-09-2009 09:29

3 anchors maken en die een background geven, is totaal niet moeilijk. Je kan ook buttons (<button>) of submit input gebruiken, maar die zijn wat moeilijker.

Twan T

04-09-2009 09:06

het lezen geslagen op w3c enz maar kom er
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.

Jan Koehoorn

04-09-2009 09:22

Bedoel je zoiets?
http://www.jankoehoorn.nl/text_over_images.php

Zo ja, hier de broncode. Aanpassen naar je eigen situatie uiteraard.


<?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>

Twan T

04-09-2009 09:28

Ja zo ongeveer inderdaad, echter moeten ook de teksten in verschillende stylen kunnen worden getoond.

Maar dit moet wel weer een stuk in de juiste richting komen.

Jan Koehoorn

04-09-2009 09:43

Je kunt een span om je tekst heen zitten met een inline style erin. Of CSS classes gebruiken, als je maar een paar tekststyles nodig hebt.

Reageren

Inloggen om te reageren