HTML/CSS Ecrire par dessus une image

par **Rockleader** » 29 Jan 2015, 15:59

La question est toute simple; comment écrire un texte par dessus une image.

Je vous avouerais que je n'ai pas poussé la recherche très loin; je pense que trouver comment écrire par dessus une image ne doit pas être très compliqué...mais là où je me pose une vrai question c'est...que faire si l'image bouge ?
Le texte doit alors suivre...on ne peut donc pas simplement dire à un texte de s'afficher à tel ou tel endroit; il faut qu'il s'affiche à chaque fois au niveau de l'image.

J'ai pu voir un début de solution ici: http://www.xul.fr/css/texte-sur-image.php

Mais je ne suis pas sûr de tout comprendre et j'aimerais quelques éclaircissement^^

Imaginons un exemple simple pour essayer d'appliquer

Code: Tout sélectionner: Affichage:

On a donc un tableau dont l'une des cases contient une image.
Imaginons que je veuille écrire 12345 sur cette image.

par **ampholyte** » 29 Jan 2015, 16:27

Bonjour,

Si ton image bouge, il faudra prévoir une couche de javascript.

Concernant le css :

position:absolute => Permet de placer ton noeud à l'emplacement défini

top:360px; => Permet de placer l'image à 360px du haut de ton site

z-index:2; => Définit la priorité de ton noeud (il sera au dessus de tout ce qui possède un z-index inférieur et en dessous de tout ce qui possède un z-index supérieur).

par **Rockleader** » 29 Jan 2015, 18:08

ampholyte a écrit:Bonjour,

Si ton image bouge, il faudra prévoir une couche de javascript.

Concernant le css :

position:absolute => Permet de placer ton noeud à l'emplacement défini

top:360px; => Permet de placer l'image à 360px du haut de ton site

z-index:2; => Définit la priorité de ton noeud (il sera au dessus de tout ce qui possède un z-index inférieur et en dessous de tout ce qui possède un z-index supérieur).

Salut et merci.

Je ne prévois pas de faire une image de type gif qui bouge...mais je prévois plutôt des problème d'affichages.
Si pour une raison x ou y un élément de la page ne s'affichait pas et que cela entraînait une déformation par endroit; je voudrais alors que le texte suive l'image dans le sens ou le décalage ne s'appliquerait pas qu'à l'image mais aussi au texte.

Par ailleurs qu'entends tu par noeuds ?

N'y aurait il pas également une solution avec php 5 qui intègre l'objet ?

par **julia2** » 29 Jan 2015, 18:30

)onjour,ceci est un dm de seconde et je suis complètement bloquée. En plus de ça, il est a rendre pour demain! Pourrez vous m'aider? Voici le sujet:

Une entreprise artisanale produit un article.
Sa capacité de production ne dépasse pas 80
Le coût totale de production,en euro,pour x articles produits est: C(x) = 2x²-60x+900
Tous les articles produits sont vendus 50pièce.

(On rappelle que le bénéfice est égal a " recette-cout de production"

1) a quel interval appartient x? Justifier
2) exprimer la recette R(x) en euros, obtenu pour la vente de x articles.
3)a) exprimer le bénéfice B(x) eu euros,obtenu pour la vente de x articles
B)montre que B(x) =(20-2x)(x-45)
4) résoudre l'inequation (20-2x)(2x-45)>0. Que représentent concrètement les solution?
5) dans un repère orthogonal (1cm pour 5 articles en abcisses /1cm pour 500 en ordonnée ), tracer les courbes des fonctions C et R. Déterminer graphiquement le prix de vente minimum qui permet de réaliser des donnés.

S'il vous plaît ! Merci

par **fatal_error** » 29 Jan 2015, 19:28

si tu veux écrire sur ton image, tu peux
créer un canvas, afficher ton image dedans et écrire via l'api canvas.

si tu veux pas passer par canvas (ce qui est un peu byzarre comme usecase), tu peux...prendre ton td.
dans ton td, tu crèes un div, que tu mets en position relative
ton image tu lenquilles dans le div
et tu peux créer un span dans le div, en position relative toujours, et là tu peux choisir le css top left etc qui sera positionné par rapport à l'anchor "positionné" idem ton div.

bref qqch du genre

Code: Tout sélectionner: td div position relative span position absolute,: par rapport à ton div, mais img ignore le span img

par **Rockleader** » 29 Jan 2015, 21:37

Ok je vais essayer tout ça :)

par **Rockleader** » 29 Jan 2015, 22:55

Bon; j'ai réussi à faire ce que je voulais à peu près avec le texte par dessus l'image^^

Maintenant j'ai un autre soucis..j'ai voulu utiliser une image pour remplacer un bouton classique de type submit d'un formulaire...au final on clique sur une image au lieu de cliquer sur un bouton.

Sauf que....lorsque je clique sur mon image, ça ne me ramène pas sur la page pointé par mon formulaire.

En gros j'ai une page

connexion.php à laquelle j'accède après avoir vérifier l'appartenance d'un utilisateur à la BD.

Pour simplifier j'ai un truc de ce style

Code: Tout sélectionner: Gestion du Compte "; ?>

Au final l'image s'affiche bien; mais lieu de rafraîchir la page connexion.php sur laquelle on est; elle me ramène sur ma page accueil.html.
Mauvaise syntaxe pour le submit sur l'image ou bien c'est mon location du début qui déconne ?
Pourtant ça ne devrait pas étant donné que la session est ouverte je devrais conserver les variables.

par **fatal_error** » 30 Jan 2015, 00:02

ben non, quand tu soumets le formulaire, tu tapes sur connexion.php
et quand t'arrives sur connexion.php, ben reslogin est pas setté, donc ben...tu rediriges vers accueil.

Au lieu de rediriger, pour tester, tu devrais faire des echo pour dire si t'es dans le if ou le else...

et accessoirement, fermes ta balise form

par **Rockleader** » 30 Jan 2015, 00:35

J'aurais pensé qu'à partir du moment où on démarrait une session on gardait ce genre d'information en mémoire.

Je me trompais donc :hum:

Merci.

par **fatal_error** » 30 Jan 2015, 00:41

tu démarres une session via session_start,
et tu accèdes aux variables de session via $_SESSION['tavariable']

par **Benjamin** » 30 Jan 2015, 12:09

Salut,

D'ailleurs, tu ne nous as pas donné la suite sur l'autre sujet et ta page de connexion ? Si tu finissais ce sujet là, avant de passer à l'image, ça réglerait déjà ton problème de variable de session ;)

A+

par **Rockleader** » 31 Jan 2015, 23:51

Benjamin a écrit:Salut,

D'ailleurs, tu ne nous as pas donné la suite sur l'autre sujet et ta page de connexion ? Si tu finissais ce sujet là, avant de passer à l'image, ça réglerait déjà ton problème de variable de session

A+

Pour ce problème là j'avais opté pour une solution intermédiaire.

La page que j'appelle ouvrait: soit la session avant de me mettre sur la page de traitement ou alors elle me renvoyait sur l'accueil si mauvais identifiant. Sa marche comme il faut

Sa me permet même d'éviter les problèmes de variables inconnu lors du passage en session.

Problème réglé donc

Merci à tous !

HTML/CSS Ecrire par dessus une image

HTML/CSS Ecrire par dessus une image

Qui est en ligne