Forum : Tutoriel Effet de survol

Auteur

J'ai avancé un peu et je me retrouve avec une autre problème dont je n'arrive pas à sortir. C'est un problème de CSS mais je le poste là puisque ça fait parti du post précédent. Voilà, j'essaie de placer ma description toujours au même endroit sous mes vignette mais je n'arrive pas à m'en sortir avec les histoires de absolute et relative. Si quelqu'un pouvait m'aider à dépatouiller tout ça…

voilà pour le HTML

<div id="content">
                <div class="trombi"> 
                    <span class="title">Joachim Latarjet</span>
                    <span class="descr">Musicien tromboniste né en 1970, il fonde avec Alexandra Fleischer la compagnie Oh ! Oui…, et met en scène des spectacles de théâtre musical.<br />
                                                    Depuis 2008, il est artiste associé à La Filature (Scène Nationale de Mulhouse) pour 3 saisons.<br />
                                                    Il est un des membres fondateurs de la compagnie Sentimental Bourreau et participe à toutes les créations de 1989 à 2000.<br />
                                                    Il a travaillé avec Michel Deutsch sur les Imprécations II, IV, 36. Il a composé la musique du Solo de Philippe Decouflé.</span>  
                    <span class="bg"></span> 
                    <img src="images/equipe/jo.jpg" alt="Joachim Latarjet" /> 
                </div>
</div>

Et voilà pour le CSS

#content{ width:900px;  padding-top:20px; position:relative}
#content .trombi{ margin:8px; width:160px; height:160px; display:inline-block; position:relative; text-decoration:none; }
#content .trombi img{ border:none; width:160px; height:160px; }
#content .trombi span{ position:absolute; top:25px; left:25px; display:none;}
#content .trombi:hover span{ display:block;}
#content span.title{ top:135px; left:10px; color:#DADAE0; font-size:12px; z-index:2; background-color:rgba(204,0,102,0.7); padding:2px 4px; }
#content span.descr{ position:absolute; top:420px; left:0px; width:880px; margin:0 0 0 10px; color:#333333; font-size:12px; line-height:18px; text-align:justify; z-index:2; }
#content span.bg{ top:0; left:0; height:160px; width:160px; background:#000; z-index:1; }
#content a:link, :visited { text-decoration: none; color:#D21C5D; }
#content a:hover { text-decoration: underline; color:#D21C5D; }

Vu que je n'ai aucune réponse pour l'instant, j'ai dégraissé un peu mon post pour qu'il soit plus digeste.
Merci de votre aide…

hatfab

Auteur

Bah zut ! Personne pour venir à mon secours ? Ça fait des heures que je cherche une solution mais je ne trouve pas, surtout cette histoire de position de "descr". Quelqu'un ? Une piste ?
Merci…

golendercaria

Yop, je te répond avec un petit mal de tête donc je vais essayer d’être clair.
Au départ tu réglés ton bg a 0,5 en css (voir opacity).

Et puis en javascript

<script type="text/javascript">
                // .bg => c'est dans ce cas présent une classe mais tu peux mettre ce que tu veux
        $(".bg").hover(function(){
            $('.bg').fadeTo("slow",0.0);
        });
</script>

Je regarderais ton deuxième post toute a l'heure.

EDIT : Pour les positions ce n'est pas trop dure, relative te permet de placer des éléments en fonction (d'ou le mot relative) d'autre élément, donc par exemple
des blocs "vignette" l'un a la suite de l'autre (flux normal).
Et absolute te permet de faire référence au bloc parent le plus proche mis en absolute. Dans le cas ou aucun bloc n'est en absolute ton élément fera référence au coin supérieur gauche de
ta page.

Le meilleur conseil que je peux te donner, est de tester toi même avec des petits bloc de couleur, aide toi de ceci
Tu verras que la théorie sera plus compréhensible si tu pratiques.

hatfab

Auteur

Salut, merci de ta réponse…
Dans mon cas je n'arrive pas à savoir où se trouve l'info de l'opacité de départ de mon bg ni dans le js :

jQuery(function($){

   var current = null; // Element actuellement survolé
   var t = parseInt($('#content .trombi:first span.title').css('top')); // Position du titre par rapport au top
   var l = parseInt($('#content .trombi:first span.descr').css('left')); // Poisition du contenu par rapport à la gauche

   // Lorsque l'on survole un des lien
   $('#content .trombi').mouseover(function(){
       // On vérifie que l'on ne suvole pas l'élément courant
       if(current && $(this).index() != current.index()){
           // On cache les infos de l'élément précédement sélectionné
           current.find('span.bg').stop().fadeOut();
           current.find('span.title').show().animate({
               top : t - 15,
               opacity : 0
           });
           current.find('span.descr').show().animate({
               left : l - 0,
               opacity : 0
           });
       }
       // Si on survol l'éménent déja sélectionné on ne fait rien de plus
       if(current && $(this).index() == current.index()){
           return null; 
       }
       // On anime le fond/titre et description
       $(this).find('span.bg').hide().stop().fadeTo(500,0.5);
       $(this).find('span.title').stop().css({
           opacity : 0,
           top : t - 15
       }).animate({
           opacity : 1,
           top : t
       });
       $(this).find('span.descr').stop().css({
           opacity : 0,
           left : l + 0
       }).animate({
           opacity : 1,
           left : l
       });
       // On modifie l'élément courant
       current = $(this); 
   });

});

ni dans le css

body{ font-family: Arial, Helvetica, sans-serif; margin:0;  padding:0px;    overflow-x:hidden;  background-color:#E9F7EB;}
#main{ width:900px; height:1200px;margin:0 auto; }
#cie{ font-size:12px; border-bottom-width: thin; border-bottom-style: dotted; border-bottom-color: #333333; }
#cie img{ border:none; float:right; padding: 14px 0 0 15px;}
p.txtgris { font-family: Arial, Helvetica, sans-serif; padding:13px; color: #333333; text-align: justify; line-height:16px; }   
ul { list-style-type: none; list-style-position: inside; padding: 10px; }
li { line-height:16px; }
a:link, :visited { color: #D21C5D; font-weight: normal; text-decoration: none; }
a:hover{ color: #D21C5D; font-weight: normal; text-decoration: underline; }
.titre {width:900px; height:44px; padding:10px 0px; border-bottom-width: thin; border-bottom-style: dotted; border-bottom-color: #333333; }
#content{ width:900px;  padding-top:10px; }
#content .trombi{ position:relative; margin:8px; width:160px; height:160px; display:inline-block; text-decoration:none; }
#content .trombi img{ border:none; width:160px; height:160px; }
#content .trombi span{ position:absolute; top:25px; left:25px; display:none;}
#content .trombi:hover span{ display:block;}
#content span.title{ top:135px; left:10px; color:#DADAE0; font-size:12px; z-index:2; background-color:rgba(204,0,102,0.7); padding:2px 4px; }
#content span.descr{ top:420px; left:0px; width:880px; margin:0 0 0 10px; color:#333333; font-size:12px; line-height:18px; text-align:justify; z-index:2; }
#content span.bg{ top:0; left:0; height:160px; width:160px; background:#000; z-index:1; }
#content a:link, :visited { text-decoration: none; color:#D21C5D; }
#content a:hover { text-decoration: underline; color:#D21C5D; }

Désolé pour ton mal de tête ;)

golendercaria

la ligne 20 :: #content span.bg{ top:0; left:0; height:160px; width:160px; background:#000; z-index:1; }
Si tu vire le z-index et que tu ajoutes une opacité. Sa te permet de gérer le tous avec l'opacité. Donc opacity:0,5; (qui va de 0 à 1 si mes souvenir sont bon)
vérifie juste la compatibilité avec les autres navigateurs. Ou utilise Jquery => opacité ou filtre.

Je te fait un rapide script. Une image avec un bg noir légèrement transparent. Et à l'hover le bg est totalement transparent.
J'ai placé grossièrement le bg sur l'image mais la partie qui t’intéresse est surement le JQuery.

<!-- la partie CSS -->
<style type="text/css">
    .bg{ background-color:black; height:77px; width:102px; position:absolute; top:0; left:0; opacity:0.5; }
    img{ top:0; left:0; position:absolute; }
</style>
<!-- une image et un bg qui la "cache" -->
    <img src="./Koala.jpg" style="height:77px; width:102px;" />
    <div class="bg"></div>
<!-- le js -->
<script type="text/javascript">
    //relativement simple on manipule le css
    $(".bg").mouseover(function(){
        $(".bg").css('opacity',0);
    }); 
    $(".bg").mouseout(function(){
    $(".bg").css('opacity',0.5);
    });
// un deuxieme exemple un peu plus propre peut etre (tu l'auras compris tu peux carrément modifier tous le css) 
// utilise l'element $(this) pour faire référence a l’élément courant.
    $(".bg").hover(function(){
        $(".bg").css({'backgroundColor':'transparent' , 'opacity' : 1});
    }); 
    $(".bg").mouseout(function(){
        $(".bg").css({'backgroundColor':'black' , 'opacity' : 0.5});
    });
</script>

Si tu ne comprend pas n'hésite pas à me le dire je t'expliquerais en détails.
A+ bon codage.

hatfab

Auteur

Merci beaucoup golendercaria de toutes pour ces pistes et le temps passé, ça m'a l'air très pertinent, j'ai hâte de les utiliser. Là je pars en vacances donc plus le temps de travailler dessus. Je te tiendrais au courant de mes avancées dès mon retour.
À bientôt, bonnes vacances à toi si tu en prends.

Tutoriel Effet de survol

6 réponses