bonjour, je realise un site pour visionner des peintures ou j'affiche une grande image en passant sur une image de taille reduite. J'affiche plusieurs galerie sur la meme page et qd je change de serie de vignettes (la grande image correspondante disparait) mon problème est le suivant : qd je navigue entre 2 series de vignettes il se creer des décalages et je me retrouve un peu n'importe ou sur la page. y'a t il une solution pour pour ancrer ma page en fonction de la série de vignettes survolées (avec window.ocation.href mais j'ai pas réussi 
)) peut etre une autre solution est elle plus adaptée.voici le code html de ma page (averc un bout de javascript dedans):
j'ai un autre probleme dans le javascript:
qd je remplace show et hide par fadeIn et fadeOut, je vois deux images simultanements pendant un cours instant, existe t'il un mayen pour attendre la fin du fadeOut avant de démarrer le fadeIn.
voici le css au cas ou
merci d'avance
vlad
)) peut etre une autre solution est elle plus adaptée.voici le code html de ma page (averc un bout de javascript dedans):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="tinoo.css" />
<title>Gallerie Mathilde Rossignol</title>
<script src="js/jquery.js"></script>
<script language="javascript">
$(document).ready(function(){
$(".galerie_img img").hide();
$("#galerie a").mousemove(function(){
if (
$("#"+this.dataset.image).is(":hidden"))
{
$(".galerie_img img").hide();
$("#"+this.dataset.image).show();
}
});
});
</script>
</head>
<body>
<div id="bloc_page">
<header>
<div id="entete">
<div id="lang">
<nav>
<li><a href="">Francais</a></li>
<li><a href="">English</a></li>
</nav>
</div>
<nav id="menu">
<li><a href="index.html">AccueiL</a></li>
<li><a href="galerie.html">GaLeries</a></li>
<li><a href="actualite.html">ActuaLite</a></li>
<li><a href="presentation.html">PréSentation</a></li>
</nav>
<div id="titre"><h1>Mat<span>hiLde Ros</span>SignoL</br><span>Artiste Peintre</span></h1></div>
</div>
</header>
<div id="galerie">
<h3 id="g1">2013</h3>
<div class="galerie_nav">
<a data-image="img1" href="#g1"><img src="images/2013/mini_bulbatik.jpg"/></a>
<a data-image="img2" href=""><img src="images/2013/mini_eclat_fleuri.jpg"/></a>
<a data-image="img3" href=""><img src="images/2013/mini_epopee_liquide.jpg"/></a>
<a data-image="img4" href=""><img src="images/2013/mini_le_miroir_des_ames.jpg"/></a>
<a data-image="img5" href=""><img src="images/2013/mini_rayonnement_residuel.jpg"/></a>
<a data-image="img6" href=""><img src="images/2013/mini_pensees_lunaires.jpg"/></a>
</div>
<div class="galerie_img">
<img id="img1" src="images/2013/bulbatik.jpg"/>
<img id="img2" src="images/2013/eclat_fleuri.jpg"/>
<img id="img3" src="images/2013/epopee_liquide.jpg"/>
<img id="img4" src="images/2013/le_miroir_des_ames.jpg"/>
<img id="img5" src="images/2013/rayonnement_residuel.jpg"/>
<img id="img6" src="images/2013/pensees_lunaires.jpg"/>
</div>
<h3>2012</h3>
<div class="galerie_nav">
<a data-image="img7" href=""><img src="images/2012/mini_deracinee.jpg"/></a>
<a data-image="img8" href=""><img src="images/2012/mini_derive.jpg"/></a>
<a data-image="img9" href=""><img src="images/2012/mini_une_partition.png"/></a>
<a data-image="img10" href=""><img src="images/2012/mini_etincelle_d_ete.jpg"/></a>
<a data-image="img11" href=""><img src="images/2012/mini_les_papilLons.jpg"/></a>
<a data-image="img12" href=""><img src="images/2012/mini_oeil_vulcanique.jpg"/></a>
<a data-image="img13" href=""><img src="images/2012/mini_penseur_et_mont_roz.jpg"/></a>
<a data-image="img14" href=""><img src="images/2012/mini_sablier_d_automne.jpg"/></a>
</div>
<div class="galerie_img">
<img id="img7" src="images/2012/deracinee.jpg"/>
<img id="img8" src="images/2012/derive.jpg"/>
<img id="img9" src="images/2012/une_partition.png"/>
<img id="img10" src="images/2012/etincelle_d_ete.jpg"/>
<img id="img11" src="images/2012/les_papilLons.jpg"/>
<img id="img12" src="images/2012/oeil_vulcanique.jpg"/>
<img id="img13" src="images/2012/penseur_et_mont_roz.jpg"/>
<img id="img14" src="images/2012/sablier_d_automne.jpg"/>
</div>
</div>
<footer>
<nav>
<li><a href="index.html">AccueiL</a></li>
<li><a href="galerie.html">GaLeries</a></li>
<li><a href="actualite.html">ActuaLite</a></li>
<li><a href="presentation.html">PréSentation</a></li>
<li><a href="mentions.html">Mentions Légales</a></li>
<li><a href="#">créateur du site</a></li>
</nav>
</footer>
</div>
</body>
<html>
j'ai un autre probleme dans le javascript:
qd je remplace show et hide par fadeIn et fadeOut, je vois deux images simultanements pendant un cours instant, existe t'il un mayen pour attendre la fin du fadeOut avant de démarrer le fadeIn.
voici le css au cas ou
html
{
height:100%;
}
body
{
height:100%;
margin:0px;
background-color: #775b59;
font-family: Calibri,Trebuchet MS;
}
#bloc_page
{
min-height:100%;
/*background-image: url("images/fond.jpg");*/
background-repeat:no-repeat;
width : 900px;
min-height:100%;
margin-left:auto;
margin-right:auto;
/* position:relative;/*pour pouvoir mettre le titre en position absolue*/
}
/*header*/
#entete
{
display:table;
}
#lang,#titre,#menu
{
display: table-cell;
vertical-align:middle;
text-align:center;
}
#menu
{
vertical-align:center;
text-align:center;
width:800px;
}
#lang
{
padding-left:10px;
width:50px;
}
header nav li
{
list-style-type: none;
background:rgba(255,255,255,0.5);
margin:1px;
}
#menu nav li:hover
{
background:rgba(255,255,255,1);
}
#menu li
{
display:inline-block;
background:rgba(255,255,255,0.5);
padding:5px 15px 5px 15px;
font-size:1.2em;
}
#menu li:hover
{
background:rgba(255,255,255,1);
}
h1
{
right:0px;
top:0px;
font-size : 1.8em;
text-align : center;
width: 300px;
background:rgba(255,255,255,0.5);
}
span
{
font-size : 0.8em;
}
h3
{
font-size:1.5em;
background:rgba(255,255,255,0.5);
text-align:center;
}
/*footer*/
footer nav
{
text-align:center;
}
footer nav li
{
display: inline-block;
list-style-type: none;
margin:4px;
}
/*page actualité*/
#titre_expo
{
position:relative;
left:100px;
width:200px;
}
#tableau
{
/*background-color : rgba(255,255,255,0.5);*/
padding:20px;
top:120px;
left:20px;
min-width:600px;
}
#titre_contact
{
margin-left:500px;
width:200px;
}
#text_contact
{
margin:40px;
text-align:right;
}
/*page galerie*/
.galerie_nav, .galerie_img
{
text-align:center;
}
img[id^=img]
{
border: 4px solid white;
}
/*page presentation*/
#titre_demarche
{
margin-left:75px;
width:300px;
}
#titre_parcours
{
margin-left:600px;
width:200px;
}
#texte_demarche, #texte_parcours
{
width:800px;
background-color:rgba(255,255,255,0.5);
}
#texte_demarche
{
margin-left:20px;
}
#texte_parcours
{
margin-left:90px;
}
a
{
text-decoration:none;
color:black;
}
#menu_index
{
position:relative;
background-color:yellow;
}
h4
{
text-align:center;
position:absolute;
background:rgba(255,255,255,0.5);
}
#lien_pres, #lien_gal, #lien_actu
{
background:rgba(255,255,255,0.5);
width:200px;
text-align:center;
font-size:1.8em;
position:absolute;
}
#lien_pres
{
left:120px;
}
#pres1
{
left:20px;
top:60px;
width:180px;
}
#pres2
{
left:140px;
top:110px;
width:100px;
}
#lien_gal
{
right:80px;
top:120px;
}
#gal1
{
right:140px;
top:180px;
width:60px;
}
#gal2
{
right:60px;
top:210px;
width:60px;
}
#gal3
{
right:125px;
top:260px;
width:60px;
}
#gal4
{
right:90px;
top:320px;
width:60px;
}
#lien_actu
{
left:80px;
top:360px;
}
#actu1
{
left:30px;
top:430px;
width:120px;
}
#actu2
{
left:190px;
top:480px;
width:90px;
}
merci d'avance
vlad