texte à la place d'une image au survol de la souris.

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu texte à la place d'une image au survol de la souris.

Message par princesspeach le Dim 12 Fév 2012 - 17:50

Bonjour à tous !
Je cherche, je cherche, sur forumactif et ailleurs, impossible de mettre la main sur ce que je veux, même si ça me semble "assez simple". Voilà, je sais qu'il est facile qu'au survol de la souris, une image vienne en remplacer une autre. Notamment avec ce code, qui fonctionne bien il me semble, et avec d'autres un peu identiques que j'ai trouvé ici et là :

Code:
<img src="image1.png"onmouseover="javascript:this.src='image2.png';"onmouseout="javascript:this.src='image1.png';" />

Mais ce que je souhaiterais faire, c'est qu'au survol par la souris de l'image, ce soit un texte qui s'affiche, et non pas une autre image. Je récapitule :
{ce que je sais faire} au survol de la souris sur une image, cette image disparaît pour laisser la place à une autre
{ce que je voudrais faire} au survol de la souris une image, cette image disparaît pour laisser de la place à un texte (ou même à un tableau avec du texte, vous me comprenez.)

Ce serait pour placer sur la PA ou dans les descriptions de catégories, j'hésite encore.
Je vous serai vraiment redevable si vous pouvez m'aider *.*


Dernière édition par princesspeach le Lun 13 Fév 2012 - 12:42, édité 1 fois

princesspeach
**

Messages : 55
Inscrit(e) le : 14/03/2011

princesspeach a été remercié(e) par l'auteur de ce sujet.

Résolu Re: texte à la place d'une image au survol de la souris.

Message par SoraNoHime le Dim 12 Fév 2012 - 18:18

Bonjour

Essayez ceci :
Code:
<a nohref class="imgsurvol"><img src="adresse de l'image"/></a>

et dans la css mettez :
Code:
a.imgsurvol:hover:after
content:"votre texte";
}
img.imgsurvol:hover
display : none;
}

Dites moi si cela fonctionne ^^ Je ne l'ai pas testé

Cordialement


SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: texte à la place d'une image au survol de la souris.

Message par princesspeach le Dim 12 Fév 2012 - 18:21

Bonjour et merci d'aider Smile

L'accolade n'était pas ouverte dans le css, je l'ai rajoutée.

Alors, j'ai testé mais : au survol de l'image apparaît bien un texte, mais sur la droite de l'image, collé, et l'image ne disparaît donc pas pour être remplacée par le texte.

princesspeach
**

Messages : 55
Inscrit(e) le : 14/03/2011

princesspeach a été remercié(e) par l'auteur de ce sujet.

Résolu Re: texte à la place d'une image au survol de la souris.

Message par SoraNoHime le Dim 12 Fév 2012 - 18:24

Merci pour le problème de l'accolade ^^ faute de frappe.

Je vais testé de mon coté voir comment faire disparaitre cette image, je pensais que le display : none suffirait.

essayez de le remplacez par un visibility : hidden à tout hasard

sinon je vais faire quelques tests

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: texte à la place d'une image au survol de la souris.

Message par princesspeach le Dim 12 Fév 2012 - 18:26

Ce n'est pas encore ça :p

Merci beaucoup d'essayer !

princesspeach
**

Messages : 55
Inscrit(e) le : 14/03/2011

princesspeach a été remercié(e) par l'auteur de ce sujet.

Résolu Re: texte à la place d'une image au survol de la souris.

Message par SoraNoHime le Dim 12 Fév 2012 - 19:58

Le mieux que je puisse obtenir c'est avec cette css :

Code:
a.imgsurvol:hover{
  visibility : hidden;
}
a.imgsurvol:hover:after {
content:"votre texte";
border : 3px double #ff0000;
  visibility : visible;
}

sinon le mieux est encore de mettre votre premier code, et en image de remplacement une avec uniquement le texte

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: texte à la place d'une image au survol de la souris.

Message par princesspeach le Dim 12 Fév 2012 - 20:08

C'est déjà mieux c'est vrai, merci beaucoup, mais l'effet est assez aléatoire, et le texte ne vient pas exactement à la place de l'image, donc je vais laisser ce sujet ouvert, d'autant que je suis presque sûre d'avoir vu cet effet quelque part, mais impossible de me rappeler où ><

Quand à mettre une image transparente avec du texte, j'y ai pensé, mais je voudrais vraiment pouvoir organiser ce texte comme je l'entends (tableau, overflow si possible, liens sur différents mots...) donc ce serait impossible.

Merci d'avoir essayé en tout cas !

princesspeach
**

Messages : 55
Inscrit(e) le : 14/03/2011

princesspeach a été remercié(e) par l'auteur de ce sujet.

Résolu Re: texte à la place d'une image au survol de la souris.

Message par Daewyn le Lun 13 Fév 2012 - 0:35

Bonjour.

Je ne sais pas trop si c'ets ce que tu veux mais tu peux toujours essayer ça :

Dans ton message/PA/description

Code:
<span style="display: block; width: LARGEUR-DE-L'IMAGE; height: HAUTEUR-DE-L'IMAGE; background: url(URL-DE-L'IMAGE) center center no-repeat;">
<span class="img">Texte</span>
</span>

Le CSS associé

Code:
.img
{ position: absolute;
 display: block;
 margin-top: -18px;
  width: 390px;
 height: 90px;
 overflow: auto;
  background-color: #191817;
  font-size: 10px;
 color: #9c9c9c;
 text-align: justify;
 padding: 5px;
  opacity: 0;
 -moz-opacity: 0;
 -khtml-opacity: 0;
 filter: alpha(opacity=0); }
.img:hover
{  opacity: 0.8;
 -moz-opacity: 0.8;
 -khtml-opacity: 0.8;
 filter: alpha(opacity=80); }

Font-size, color et text-align concerne le texte, à modifier comme tu veux donc. Sur cet exemple l'image est encore apparente avec un effet d'opacité, mais il suffit de mettre 1 (100) d'opacité au hover pour ne plus la voir. Le margin-top sert à postionner la zone du texte mais selon sa taille ce sera à régler toi même. Il faut aussi que la zone du texte aie la même taille que l'image (encore que, dépend de ce que tu veux) mais dans ce cas attention aux paddings, si tu en as mis.


Dernière édition par Daewyn le Lun 13 Fév 2012 - 0:49, édité 1 fois

Daewyn
***

Féminin
Messages : 182
Inscrit(e) le : 23/06/2011

http://dae-test-fantasia.forumactif.org/
Daewyn a été remercié(e) par l'auteur de ce sujet.

Résolu Re: texte à la place d'une image au survol de la souris.

Message par princesspeach le Lun 13 Fév 2012 - 0:45

Alors alors, déjà merci !

Ce n'est pas exactement ce que je veux, mais ça me plaît beaucoup *.*
Le truc, c'est qu'en remplaçant les 0.8 par 1 et les 80 par 100, le fond du texte devient tout sombre, donc certes on ne voit plus l'image, mais ce que je souhaitais, c'est que l'image disparaisse (comme dans le principe où une image disparaît pour laisser la place à une autre, et non pas simplement un texte qui vient se superposer à une image).

Cela dit, l'effet fonctionne tout de même joliment pour ce que je cherchais, surtout en réduisant le margin-top. Donc je laisse encore ouvert au cas où quelqu'un ait la formule miracle qui remplace véritablement l'image par le texte, mais sinon je prendrai ça.

Merci beaucoup !

princesspeach
**

Messages : 55
Inscrit(e) le : 14/03/2011

princesspeach a été remercié(e) par l'auteur de ce sujet.

Résolu Re: texte à la place d'une image au survol de la souris.

Message par stella27 le Lun 13 Fév 2012 - 7:09

Alors, si j'ai bien compris, essai ceci :

Code:
<div class="translate">
<img src="liendetonimage" alt="titredetonimage">
<p>ton texte</p>
</div>


Et dans ton css

Code:
 .translate {
   height:/*hauteurdetonimagepx*/;
   width:/*largeurdetonimage*/px;
   background: black;
   overflow: hidden;
   position:relative;
 }
 
 .translate img {
        -moz-transition: all 1s ease-in-out;
   -webkit-transition: all1s ease-in-out;
   transition: all 1s ease-in-out;
   -o-transition: all 1s ease-in-out;
   -ms-transition: all 1s ease-in-out;
    position:absolute;
   top:0px;
   }

.translate:hover img {
   -moz-transform: translate(XXpx, YYpx);/*XX=largeur de ton image pour un  déplacement horizontal; YY=hauteur de l'image pour déplacement vertical*/
   -webkit-transform: translate(XXpx, YYpx);
   -o-transform: translate(XXpx, YYpx);
   -ms-transform: translate(XXpx, YYpx);
   transform: translate(XXpx, YYpx);
}

stella27
Nouveau membre

Messages : 4
Inscrit(e) le : 31/05/2011

http://learncss.forumgratuit.org/
stella27 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: texte à la place d'une image au survol de la souris.

Message par princesspeach le Lun 13 Fév 2012 - 9:39

Merci d'aider !
Hm, je ne sais pas si j'ai bien mis le code, mais ça me donne simplement l'image, et à côté d'elle sur la droite, le texte avec un fond noir ><

edit : au temps pour moi, je n'avais effectivement pas bien tout rempli. Je suis en train de bidouiller les XX et YY, je vous tiens au courant dans ce même edit *.*
edit 2 : alors alors, je suis ravie, le petit effet de l'image qui s'en va fonctionne à la perfection. Quelques détails si je peux ? J'essaye de mettre un padding sur le texte de 5px, mais du coup ça pose des petits soucis, l'image ne coïncidant plus avec le texte, auriez-vous la solution ? Sinon l'overflow hidden, cela signifie que l'overflow est interdit ? Cela ne m'embête pas trop puisque je vais essayer de faire un texte qui soit pile à la bonne taille, mais c'est juste pour être sûr.
Enfin, pour justifier le texte, où dois-je rajouter l'align ? Plutôt dans le html ou plutôt dans le CSS ?
Merci énormément !

princesspeach
**

Messages : 55
Inscrit(e) le : 14/03/2011

princesspeach a été remercié(e) par l'auteur de ce sujet.

Résolu Re: texte à la place d'une image au survol de la souris.

Message par stella27 le Lun 13 Fév 2012 - 12:37

Autant tout mettre dans le css Wink

Voici pour le padding, et la justification du texte, qui se fait au niveau du paragraphe.
Code:
.translate p {
padding:5px;
margin:0px;
text-align:justify;
}

Et pour l'overflow:hidden, c'est surtout pour empêcher l'image de sortir en fait, plus que pour limiter le texte.

Et pas de quoi !

stella27
Nouveau membre

Messages : 4
Inscrit(e) le : 31/05/2011

http://learncss.forumgratuit.org/
stella27 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: texte à la place d'une image au survol de la souris.

Message par princesspeach le Lun 13 Fév 2012 - 12:42

C'est parfait, je vais mettre le sujet en résolu !

Merci énormément pour toutes ces aides précieuses =)

princesspeach
**

Messages : 55
Inscrit(e) le : 14/03/2011

princesspeach a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum