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

[princesspeach]

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 *.*

[SoraNoHime]

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

[princesspeach]

Bonjour et merci d'aider

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.

[SoraNoHime]

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

[princesspeach]

Ce n'est pas encore ça :p

Merci beaucoup d'essayer !

[SoraNoHime]

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

[princesspeach]

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 !

[Daewyn]

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.

[princesspeach]

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 !

[stella27]

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);
}

[princesspeach]

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 !

[stella27]

Autant tout mettre dans le css

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 !

[princesspeach]

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

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