Image dynamique, hmtl et css

par **Cyrano** » 27 juil. 2006, 07:39

[Résolu]

par **Invité** » 27 juil. 2006, 00:31

Muchachos ca marche !!
J'avais d'abord essayé la version de polo mais ça m'avait détruit la mise en page.
Ensuite j'ai tenté la deuxième idée de jojolapine, une ligne à ajouter dans le php, une à virer dans le css, et c'est tout cuit !!

Merci à vous deux.

par **polo** » 26 juil. 2006, 23:11

Bonjour,
tu n'est pas obliger de créer une nouvelle image

Il faut juste copier ce code dans ta page!

<?php
$heure = date('H:i'); // On stocke l'heure et les minutes dans une variable
$jour = date("d-m-Y"); ?>

et de faire un echo dans le bloc div de l'image:

comme ceci:

<?php echo "<div align='left'>il est: $heure</div><div align='right'>nous somme le : $jour</div>"; ?>

Et voila! En espérant voir pu t'être utile!

par **jojolapine** » 26 juil. 2006, 22:57

Je sais pas si ça marche avec les feuilles de style mais en html ça marche alors pourquoi pas...

Essaye de remplacer ciel.jpg par heure.php...
si ça ne fonctionne pas, alors essaye de faire afficher la bannière non pas par le css, mais par la page en mettant un <img src="heure.php"> (ça c'est sûr que ça marche )

par **Pipolako** » 26 juil. 2006, 21:18

Bonsoir à vous, ardents lecteurs et lectrices...

Euh je m'égare, désolé.

J'ai un soucis avec une image, et comme je n'y connais toujours pas grand chose, j'implore votre aide. J'explique : Je me suis lancé dans la création d'un blog perso pendant les vacances, c'est à dire il y a 2 jours, j'ai commencé par la mise en page, en essayant de respecter le CSS au max. Jusque là ça va. J'ai une image en bannière, dans laquelle je souhaite afficher le jour et l'heure, en bidouillant j'ai aussi réussi. Seulement au départ l'image était affichée à partir du CSS, mais maintenant elle est générée en php, et je ne sais pas comment la remettre...

Je vous file mes bouts de codes :

Code : Tout sélectionner

<!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" xml:lang="fr" >
   <head>
       <title>Blog de Gab'z</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Design general" href="fak2.css" />
   </head>
   
<body>

	<div id="page">

		<div id="header">

		</div>

		<div id="gauche">
			<p>menu gauche</p>
			<p>largeur fixe : 150px</p>
	  
			<ul class="menugauche">
				<li><a href="">Menu 1</a></li>
				<li><a href="">Menu 2</a></li>

				<li><a href="">Menu 3</a></li>

				<li><a href="">Menu 4</a></li>
			</ul>
		</div>
	  
		<div id="droite">
			<p>menu droite</p>
			<p>largeur fixe : 150px</p>

			<ul class="menudroit">
			<li><a href="">Menu 1</a></li>

			<li><a href="">Menu 2</a></li>
			<li><a href="">Menu 3</a></li>
			<li><a href="">Menu 4</a></li>
			</ul>
		</div>
	  
		<div id="corps">
			partie centrale qui "pousse" les colones vers le bas.<br />
			partie avec du contenu occupant le reste de la largeur<br />
			partie avec du contenu occupant le reste de la largeur<br />

		</div>
		
		<div id="pied1">
		<br />
		</div>
		
		<div id="pied2">
			<p>pied</p> 
		</div>
		
	</div>

	
</body>

Code : Tout sélectionner

body {
background-color: #C0C0E3;
font-family: 'Trebuchet MS', Arial, sans-serif;
font-size: 0.8em;
margin-top: 20px;
margin-bottom: 20px;
}

#page {
position: absolute;
width: 780px;
left: 50%;
margin-left: -390px;
background-color: #E2E9F3;
border: 1px solid black;
margin-bottom: 200px;
}

#header {
/* background-image: url("ciel.jpg");
background-repeat: no-repeat; */
border-bottom: 1px solid black;
height: 180px;
background-color: #99CCCC;
}

#corps {
background-color:#FFFFFF;
margin-left: 150px;
margin-right: 150px;
border-right: 1px solid black;
border-left: 1px solid black;
}

#gauche {
position: absolute;
left:0;
width: 150px;
}

#droite {
position: absolute;
right:0;
width: 150px;
}

#pied1{
height: 15px;
width: 782px;
position: absolute;
left:-1px;
background-color: #C0C0E3;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-right: 1px solid #C0C0E3;
border-left: 1px solid #C0C0E3;
}

#pied2{
width: 780px;
background-color: #E2E9F3;
text-align: center;

}

Et le truc qui modifie l'image et qui fonctionne tout seul :

<?php
header ("Content-type: image/jpeg");
$image = imagecreatefromjpeg("ciel.jpg");
$couleur_texte = imagecolorallocate($image, 0, 0, 0); // Texte en noir
$heure = date('H:i'); // On stocke l'heure et les minutes dans une variable
$jour = date("d-m-Y");
imagestring($image, 3, 730, 160, $heure, $couleur_texte); // On affiche l'heure dans la bonne couleur
imagestring($image, 3, 10, 160, $jour, $couleur_texte); // On affiche le jour dans la bonne couleur

imagejpeg($image);
?>

Ca donne ça

Et l'image modifié grace à php donne ça

J'en mets peut-etre trop parce que je souhaite juste mettre l'image modifiée dans la bannière du site.

C'est possible au moins ??

Image dynamique, hmtl et css

Répondre

Étendre la vue Revue du sujet : Image dynamique, hmtl et css

Image dynamique, hmtl et css