Problème de positionnement d'une div au survol qui se met à clignote

Question

learoch

29 Mar 2017 à 21:42

Salut à tous !
Je suis débutante et j'ai un petit problème d'affichage.

Voici ce que je voudrais faire :
Des petites images en vignettes qui forment des lignes. Ces lignes s'adaptent à la taille de l'écran. Lorsqu'on agrandit la page, les images qui étaient sur la deuxième ligne ont la place de se glisser sur la première ligne et inversement.
Jusque là tout va bien.
Ensuite, je voudrai qu'au survol de la souris, chaque image s'agrandisse (l'image est aussi un lien) et en s'agrandissant, qu'elle pousse les images qui sont à sa droite.
Là aussi pas de problème, sauf que mes images tout à droite de l'écran se mettent à clignoter quand je les survole. Elles clignotent et font clignoter aussi toutes les images du dessous. Bref grosse galère, ça fait trop jours que je suis dessus, je m'en sors pas !

Voici une partie le code :

HTML :

<body width=100% text="#000000" alink="#000000" vlink="#000000" link="#000000">
<div class="TYPOMENU" id="M">
<h1 align="left"><a href="../accueil.html">Charles Sanchez</a></h1>
<h2 align="left" class="TYPOMENU2"><a href="travaux.html">Travaux</a>  </h2>
<h2 align="left" class="TYPOMENU2"><a href="../cv.html">CV</a>  </h2>
<h2 align="left" class="TYPOMENU2"><a href="">Presse</a>  </h2>
<h2 align="left" class="TYPOMENU2"><a href="">Liens</a>  </h2>
<h2 align="left" class="TYPOMENU2"><a href="../contact.html">Contact</a></h2>
</div>

<table width="100%">

<div class="conteneur">
<a href=""><img src="visuels/animatehombre.jpg" class="conteneur1" align="top"></a>
</div>

<div class="conteneur">
<a href=""><img src="visuels/feufollet.jpg" class="conteneur1" align="top"></a>
</div>

<div class="conteneur">
<a href=""><img src="visuels/legrandgeocoucou.jpg" class="conteneur1" align="top"></a>
</div>

<div class="conteneur">
<a href=""><img src="visuels/lentrejambedevulcain.jpg" class="conteneur1" align="top"></a>
</div>

<div class="conteneur">
<a href=""><img src="visuels/massagethailandais.jpg" class="conteneur1" align="top"></a>
</div>

<div class="conteneur">
<a href=""><img src="visuels/Narcose.jpg" class="conteneur1" align="top"></a>
</div>

<div class="conteneur">
<a href=""><img src="visuels/niddepoule.jpg" class="conteneur1" align="top"></a>
</div>

<div class="conteneur">
<a href=""><img src="visuels/nymphose.jpg" class="conteneur1" align="top"></a>
</div>

<div class="conteneur">
<a href=""><img src="visuels/playboy.jpg" class="conteneur1" align="top"></a>
</div>

<div class="conteneur">
<a href=""><img src="visuels/reaper.jpg" class="conteneur1" align="top"></a>
</div>

<div class="conteneur">
<a href=""><img src="visuels/rubber.jpg" class="conteneur1" align="top"></a>
</div>

<div class="conteneur">
<a href=""><img src="visuels/runrabbitrun.jpg" class="conteneur1" align="top"></a>
</div>

<div class="conteneur">
<a href=""><img src="visuels/spaceskate.jpg" class="conteneur1" align="top"></a>
</div>

<div class="conteneur">
<a href=""><img src="visuels/supersaiyan.jpg" class="conteneur1" align="top"></a>
</div>

</table>

ET CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>travaux</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
<style type="text/css">
@font-face {
font-family: 'gravity';
src: url(../font/Gravity-Book.otf)
}
.TYPOTITRE {
position: middle;
font-family: "gravity";
font-size: 25px;
font-style: normal;
line-height: 30px;
font-weight: lighter;
color:#000;
}
.TYPOMENU {
position: middle;
font-family: "gravity";
font-size: 15px;
font-style: normal;
line-height: 20px;
color:#000;
}
.TYPOMENU2 {
position: middle;
font-family: "gravity";
font-size: 15px;
font-style: normal;
line-height: 15px;
font-weight: lighter;
color:#000;
}
.TYPO {
position: middle;
font-family: "gravity";
font-size: 12px;
font-style: normal;
line-height: 15px;
font-weight: lighter;
color:#000;
}
.ECART {
line-height: 1,5px;
font-size: 15px;
}
#M {
width: 100%;
}
#ACTU {
width: 50%;
position: left;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration:none;
}
a:active {
text-decoration: none;
}
.conteneur img:hover {
width:350px;
height:230px;
}
.conteneur1 {
width:150px;
height:100px;
margin-right:1%;
margin-left:1%;
margin-top:1%;
margin-bottom:1%;
border:none;
float:left;
}
</style>

QLQU'UN PEUT M'AIDER ? Smiley sweatdrop

GJboba

30 Mar 2017 à 00:12

Salut learoch,

J'ai compris se qu'il se passait : lorsque tu passe sur la dernière l'image de ta ligne, sa taille augmente et de ce fait elle passe sur la ligne suivante pour le coup ton curseur n'est plus "hover" l'image...elle reprend donc sa petite taille et revient à sa place et évidemment ton cursor redevient "hover" l'image et ainsi de suite ....

J'ai un solution a te proposer mais il y a quelques lignes de jquery:


<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

    
<style type="text/css">
   
@font-face {
font-family: 'gravity';
src: url(../font/Gravity-Book.otf)
}
.TYPOTITRE {
position: middle;
font-family: "gravity";
font-size: 25px;
font-style: normal;
line-height: 30px;
font-weight: lighter;
color:#000;
}
.TYPOMENU {
position: middle;
font-family: "gravity";
font-size: 15px;
font-style: normal;
line-height: 20px;
color:#000;
}	
.TYPOMENU2 {
position: middle;
font-family: "gravity";
font-size: 15px;
font-style: normal;
line-height: 15px;
font-weight: lighter;
color:#000;
}	
.TYPO {
position: middle;
font-family: "gravity";
font-size: 12px;
font-style: normal;
line-height: 15px;
font-weight: lighter;
color:#000;
}	
.ECART {
line-height: 1,5px;
font-size: 15px;
}
#M {
width: 100%;
}
#ACTU {
width: 50%;
position: left;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration:none;
}
a:active {
text-decoration: none;
}

/*
.conteneur img:hover {
width:350px;
height:230px;
}*/
.conteneur1 {
width:150px;
height:100px;
margin-right:1%;
margin-left:1%;
margin-top:1%;
margin-bottom:1%;
border:none;
float:left;
}
/*
* Losque l'on utilise les % c'est toujours relativement au container parent
et si le container parent n'a pas de dimension c'est 100% de 0!
*/
html {
    width: 100%;
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
}
.tableau {
    width: 100%;
    height: 100%;
}

</style>
</head>
<body>
<div class="TYPOMENU" id="M">
<h1 align="left"><a href="../accueil.html">Charles Sanchez</a></h1> 
<h2 align="left" class="TYPOMENU2"><a href="travaux.html">Travaux</a>&nbsp;&nbsp;</h2>
<h2 align="left" class="TYPOMENU2"><a href="../cv.html">CV</a>&nbsp;&nbsp;</h2>
<h2 align="left" class="TYPOMENU2"><a href="">Presse</a>&nbsp;&nbsp;</h2>
<h2 align="left" class="TYPOMENU2"><a href="">Liens</a>&nbsp;&nbsp;</h2>
<h2 align="left" class="TYPOMENU2"><a href="../contact.html">Contact</a></h2>
</div>


<div class='tableau'>


<div class="conteneur">
<a href=""><img src="visuels/animatehombre.jpg" class="conteneur1" align="top"></a>
</div>

<div class="conteneur">
<a href=""><img src="visuels/feufollet.jpg" class="conteneur1" align="top"></a>
</div>

<div class="conteneur">
<a href=""><img src="visuels/legrandgeocoucou.jpg" class="conteneur1" align="top"></a>
</div>

<div class="conteneur">
<a href=""><img src="visuels/lentrejambedevulcain.jpg" class="conteneur1" align="top"></a>
</div>

<div class="conteneur">
<a href=""><img src="visuels/massagethailandais.jpg" class="conteneur1" align="top"></a>
</div>

<div class="conteneur">
<a href=""><img src="visuels/Narcose.jpg" class="conteneur1" align="top"></a>
</div>

<div class="conteneur">
<a href=""><img src="visuels/niddepoule.jpg" class="conteneur1" align="top"></a>
</div>

<div class="conteneur">
<a href=""><img src="visuels/nymphose.jpg" class="conteneur1" align="top"></a>
</div>

<div class="conteneur">
<a href=""><img src="visuels/playboy.jpg" class="conteneur1" align="top"></a>
</div>

<div class="conteneur">
<a href=""><img src="visuels/reaper.jpg" class="conteneur1" align="top"></a>
</div>

<div class="conteneur">
<a href=""><img src="visuels/rubber.jpg" class="conteneur1" align="top"></a>
</div>

<div class="conteneur">
<a href=""><img src="visuels/runrabbitrun.jpg" class="conteneur1" align="top"></a>
</div>

<div class="conteneur">
<a href=""><img src="visuels/spaceskate.jpg" class="conteneur1" align="top"></a>
</div>

<div class="conteneur">
<a href=""><img src="visuels/supersaiyan.jpg" class="conteneur1" align="top"></a>
</div>

</div>
    <script>
        //Quand tu rentre dans une image toutes les images passe au format réduit
        // et l'image dans laquelle tu rentres s'agrandie...
        $(".conteneur").on("mouseenter","img", function () {
            $(".tableau").find("img").css({width:"150px",height:"100px"});
            $(this).css({width:"350px",height:"230px"});
            $(this).focus();
        });
        //Quand tu sorts du tableau toutes les images passent au format reduit
        $(".tableau").on("mouseleave",function() {
            $(this).find("img").css({width:"150px",height:"100px"});
        })
    </script>
</body>
</html>

Bonne nuit

learoch

30 Mar 2017 à 09:56

Salut GJboba,
Merci beaucoup pour ta réponse mais il y a un problème avec ton code : les images ne s'agrandissent plus au survol de la souris... Est-ce que tu vois où est l'erreur ?

GJboba

30 Mar 2017 à 10:52

J'ai repris tout le code que j'ai publié sur le post par un copié-collé standard et collé dans un fichier html et retesté sur chrome et firefox au cas où mais sur les 2 cela fonctionne.

As-tu partiellement copié le code ou tout repris?

Par exemple sans si il n'y a pas cette ligne dans le <head> rien ne peut fonctionner:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

Tu peux aussi voir si il y a des erreurs en inspectant la page avec ton navigateur ( sur chrome cliquer sur le bouton droit et choisir "inspecter").

Cordialement,
bonne journée

GJboba

30 Mar 2017 à 11:01

Tu peux le voir fonctionner sur ce lien:

http://gjboba.esy.es/vignettes.html

il n'y a pas les images puisque je ne les ai pas mais tu peux voir les cadres se redimentionner...

Cordialement

learoch

30 Mar 2017 à 11:26

Effectivement ton lien marche niquel !
J'ai bien tout copier-coller sur dreamweaver, et je fais l'aperçu web avec IExplore, peut etre que c'est ça qui pose probleme ? Je vais inspecter pour voir si je n'ai pas fait d'erreur et je reviens vers toi. Merci !

GJboba

30 Mar 2017 à 11:45

Oui le redimentionnement fonctionne bien mais je crois que au final cela ne va pas te convenir si tu mets des ancres sur les images. En effet pour aller sur l'image agrandie qui passe sur la ligne suivante l'utilisateur devra "slalomer" délicatement entre les autres vignettes !!! Bref ton pb est un casse tête intéressant et j'ai trouvé une autre solution.
Tu peux l'essayer en remplaçant le <script> par cet autre :


    <script>
        $(".conteneur").on("mouseenter","img", function () {            
            if (($(this).offset().left+350)>parseInt($(".tableau").width())) {
                $(this).css({"margin-left":"-200px"});
            }
            $(this).css({width:"350px",height:"230px"});
        });
        
        $(".conteneur").on("mouseleave","img",function() {
            $(this).css({"margin-left":"0px"});
            $(this).css({width:"150px",height:"100px"});
        })

        $(".tableau").on("mouseleave",function() {
            $(this).find("img").css({"margin-left":"0"});
            $(this).find("img").css({width:"150px",height:"100px"});
        })
    </script>

le comportement de l'image la plus à droite sera différente des autres images : elle se superposera partiellement avec l'image précédente

Sujet clos

CSS et mise en forme, CSS3

Problème de positionnement d'une div au survol qui se met à clignote