28173 sujets

CSS et mise en forme, CSS3

Ecrire du texte sur une image

Bonjour tous le monde Smiley smile

Voila, j'aimerai bien afficher un texte dynamique sur mon image lorsque l'on passe dessu avec le curseur, et modifier en même temps l'opacité de mon image pour que l'on puisse bien distinguer mon texte.

Pour ça, j'ai trouvé un code qui me permettait de changer l'opacité de l'image, et il marche pour IE et Firefox, donc je suis content Smiley smile
Mais pour afficher du texte sur l'image, je ne vois pas comment faire, car si j'utilise un document.write("Mon texte"), alors mon image disparait Smiley bawling

Donc si quelqu'un pouvais m'aider Smiley smile

Merci d'avance
Modifié par Duffy (25 Nov 2006 - 18:05)
Bonjour,
il y a possibilité d'utiliser z-index qui permet d'afficher plusieurs éléments l'un chevauchant l'autre. Ainsi si ton texte est dans un <div id="div1" style="z-index:1 ; position : absolute ; left : 50px ; top : 100px">Mon texte</div> et ton image dans <div id="div2" style="z-index:2; position : absolute ; left : 50px ; top : 100px">Mon Image</div> alors le texte apparaitra devant. De plus tu peux ke faire apparaitre à volonté en jouant sur visibility : hidden ou visibility : visible. Smiley biggrin
Ok, merci pour le lien je vais essayer Smiley smile

PS : Coucou, j'ai esayé ta technique, mais elle n'a pas marcher, le texte ne s'affiche pas Smiley biggrin

Elle ne marche que si dans deux divs c'est du texte, si dans le premier c'est du texte, et dans le second un lien vers une image, sa ne marche pas Smiley smile
En faites, si j'inverse l'ordre, sa marche Smiley smile
Mais est-il possible de faire ça avec des positions relative et non absolute, car je voudrais en afficher plusieurs qui serait le résultat d'une boucle en php en faites Smiley smile
Modifié par Duffy (25 Nov 2006 - 21:08)
Modérateur
Rebonjour,

Un élément placé en absolu se positionne par rapport au premier conteneur parent positionné ou, à défaut, par rapport au body. Il te suffit donc de positionner le conteneur (absolu ou relatif).

PS : Cette technique n'écrit pas de contenu... donc le titre de ton sujet ne correspond pas à ce que tu recherches et ne concerne pas Javascript. C'est néanmoins plus adapté pour que tout le monde dispose de ces informations (y compris ceux qui n'ont pas JS). Je déplace dans le salon CSS. Smiley cligne
Ok, merci Smiley smile
Sinon, j'ai un petit problème avec la visibility, je ne comprend pas pourquoi elle ne marche pas.
Voiçi mon code en CSS : 
.div1
{
z-index:1 ; 
position : absolute ; 
left : 50px ; 
top : 100px;
}
.div2
{
z-index:2; 
position : absolute ; 
left : 50px ; 
top : 100px;
visibility:hidden;
}
.div2:hover
{
visibility:visible;
}


Mais le problème, c'est que mon div2 reste toujours en caché, même lorsque je passe ma souris dessu Smiley bawling
Bonjour
Je réponds tardivement mais peut être pas trop tard
La pseudo classe :hover ne marche qu'avec des ancres (balise <a>) et donc pas dans une classe ...
Administrateur
coucou a écrit :
La pseudo classe :hover ne marche qu'avec des ancres (balise <a>) et donc pas dans une classe ...

Pour être plus précis, cela fonctionne partout sauf sur IE6 et inférieur qui ne reconnait :hover que sur <a>.
Sujet clos
Aller à