Image qui se cache

3 participants

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

Résolu Image qui se cache

Message par Feuille d'Or Lun 23 Sep 2013, 13:18

Bonjour tout le monde,
Alors voilà j'ai un problème, vous savez les images qui se décalent, quand la souris passe sur l'image, celle-ci se cache pour laisser apparaître un texte, et ben j'ai fais ça sur mon message d'accueil ça marche jusqu'à ce que j'enlève ma souris et là l'image ne revient plus... PK???
Merci de me répondre le plus rapidement possible (: ♥

Voici ce que j'ai mis en CSS:

Code:
.bloc-tfa {      
     background: #b5c9d9;
     position: relative;
     overflow: hidden;   
     height: 150px;         
     width: 350px;
     margin: 0;
     padding: 0;
     border: 1px solid #7da2bc;   
}
.bloc-tfa  p{
     display: block;
     color: #00305c;         
     height: 150px;
     width: 350px;
     margin: 0;         
     padding: 0;            
}         
.bloc-tfa img{         
     position: absolute;         
     top: 0;         
     left: 0;               
}
En javascript:
Code:
$(function(){
  $('.bloc-tfa').hover(function(){$(this).find('img').animate({left:'350px'},{queue:false,duration:500})},function(){$(this).find('img').animate({left:'350px'},{queue:false,duration:500})});
 });
Et dans mon message d'accueil:
Code:
<div class="bloc-tfa">
    <img src="http://i76.servimg.com/u/f76/17/86/88/50/a_bmp12.jpg" alt="" />
    <p>
      ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU
    </p>
</div>
Cordialement.


Dernière édition par Feuille d'Or le Mer 25 Sep 2013, 07:38, édité 1 fois
Feuille d'Or

Feuille d'Or
**

Messages : 91
Inscrit(e) le : 15/06/2013

http://chatmalo.forumsactifs.com/
Feuille d'Or a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui se cache

Message par [AoH]Insane Lun 23 Sep 2013, 17:21

Pour être honnête, j'aurais fait ça complètement avec du CSS, puisque le JavaScript complique beaucoup les choses pour quelque chose d'aussi simple. J'utiliserais simplement un contrôle d'opacité. Voilà donc le code de CSS que ça me donne (basé sur le tiens):

Code:
.bloc-tfa{
background: #b5c9d9;
     position: relative;
     overflow: hidden;  
    height: 150px;        
    width: 350px;
     margin: 0;
     padding: 0;
     border: 1px solid #7da2bc;  
}
.bloc-tfa  p{
     display: block;
     color: #00305c;        
    height: 150px;
     width: 350px;
     margin: 0;        
    padding: 0;            
}        
.bloc-tfa img{        
    position: absolute;        
    top: 0;        
    left: 0;              
}
.bloc-tfa img:hover{
opacity: 0            
}
Pour ton code HTML, alors ce serait simplement :
Code:
       <div class="bloc-tfa">
            <img src="http://i76.servimg.com/u/f76/17/86/88/50/a_bmp12.jpg" alt="" />
            <p>
              ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU ICI LE CONTENU
            </p>
        </div>
En gros l'image opaque cache le texte, lorsque la souris passe sur l'image, l'opacité devient nulle, ce qui laisse apparaître le texte caché normalement.

Cordialement
[AoH]Insane
[AoH]Insane

[AoH]Insane
***

Masculin
Messages : 118
Inscrit(e) le : 04/07/2013

http://aoh-rpg.forum-canada.com/
[AoH]Insane a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Image qui se cache

Message par Adam_sfp Mar 24 Sep 2013, 02:07

Bonjour

Dans votre code javascript mettez 0 px au 2ème
Code:
left:'350px'

Cdt
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui se cache

Message par Feuille d'Or Mer 25 Sep 2013, 07:34

Merci beaucoup [AoH]Insane mais ce n'étais pas exactement ce que je demandais, mais merci quand même d'avoir répondu (:
Adam_sfp, merci beaucoup c'ets exactement ce que je voulais ^^ ♥ et ça marche!! (:
Feuille d'Or

Feuille d'Or
**

Messages : 91
Inscrit(e) le : 15/06/2013

http://chatmalo.forumsactifs.com/
Feuille d'Or a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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