Bonjour,
Vaxilart merci pour ta réponse.
J'ai essayé plusieurs code mais mon problème persiste. Je pense que ça vient du e.target
du coup j'ai abandonné cette manière de faire et j'ai directement mis sur l’élément.
Voici mon html:
<div id="page_folio">
<div id="cont_slider" >
<div id="slider" class="conteneur">
<ul id="slide_img">
<li>
<img src="Images/image1.jpg" alt="Image du site" class="img_flexible" />
</li><li>
<img src="Images/image2.jpg" alt="Image du site" class="img_flexible" />
</li><li>
<img src="Images/image3.jpg" alt="Image du site" class="img_flexible" />
</li><li>
<img src="Images/image4.jpg" alt="Image du site" class="img_flexible" />
</li>
</ul>
<ul id="slide_nav">
<li class="premier" onmouseover="aide(this,1);" onmouseout="aide_sup(this,1);">
<a href="#site1" title="site 1" id="img1" class="survol">
<span class="titre">Titre 1</span>
<span class="texte">Mon premier site </span>
<span class="info"><span>Afficher le site</span></span>
</a>
</li><li class="milieu" onmouseover="aide(this,2);" onmouseout="aide_sup(this,2);">
<a href="#site2" title="site 2" id="img2">
<span class="titre">Titre2</span>
<span class="texte">Mon deuxiéme site</span>
<span class="info"><span>Afficher le site</span></span>
</a>
</li><li class="milieu" onmouseover="aide(this,3);" onmouseout="aide_sup(this,3);">
<a href="#site3" title="site 3" id="img3">
<span class="titre">Titre3</span>
<span class="texte">Mon troisiéme site</span>
<span class="info"><span>Afficher le site</span></span>
</a>
</li><li onmouseover="aide(this,3);" onmouseout="aide_sup(this,3);">
<a href="#site4" title="site 4" id="img4" onmouseover="aide(this,4);" onmouseout="aide_sup(this,4);">
<span class="titre">Titre4</span>
<span class="texte">Mon quatriéme site</span>
<span class="info"><span>Afficher le site</span></span>
</a>
</li>
</ul>
</div>
</div>
</div>
En mettant directement onmouseover et onmouseout ça marche, même si il lance les deux événements à chaque fois. Que je rentre ou que je sorte il m'affiche les alert('texte') des deux fonction appeler.
Tous les span dans le a ansi que le a ont été placer en display: block.
La "Afficher site" n'apparait que quand la souris passe sur le li.
Le css:
#cont_slider{
background-color: #fefefe;
}
#slide_img{
width: 5000px;
}
#slide_img li{
display: inline-block;
vertical-align: top;
}
#slider{
height: 500px;
overflow:hidden;
position: relative;
background-color: #fefefe;
}
#slide_nav{
position: absolute;
left: 0;
bottom: 0px;
}
#slide_nav li{
display: inline-block;
width: 25%;
}
#slide_nav li .survol{
background-color: #DE473D;
background-image: none;
background: linear-gradient(135deg, #D93A32 52%, #E5584A 100%) repeat scroll 0 0 transparent;
}
#slide_nav li a{
display: block;
text-decoration: none;
color: #F4F4F4;
background-image: url("../Images/fond_folio.png");
background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0px, rgba(0, 0, 0, 0.8) 40%, rgba(50, 50, 50, 0.8) 100%) repeat scroll 0 0 transparent;
padding: 10px 0 0 8%;
text-align: left;
}
#slider ul li a span{
display: block;
}
#slide_nav li a .titre{
font-size: 1.4em;
padding: 0 0 4px 0;
}
#slide_nav li a .texte{
font-size: 1em;
padding: 0 0 15px 0;
}
#slide_nav li a .info{
border-top: solid 1px #262626;
height: 30px;
position: relative;
}
#slide_nav li a .info span{
position: absolute;
top: 0;
left: 0;
padding: 7px 0 0 12%;
background-image: url("../Images/oeil_slider.png");
background-repeat: no-repeat;
background-position: 0 center;
height: 20px;
display: none;
}
Voici le code jquery:
/* Slider valeurs */
var nombre_diapo = $('#slide_img li img').length;
var deplacement_slide = '1100';
var temps = 6000;
var i = 0;
var a = 0;
var Timer_slide = false;
/* Slider Port folio */
function slide(){
if(i==0){
$('#img1').find('.info').css('border-top', 'solid 1px #E3594E').find('span').show();;
i++;
a=1;
}
else if((i < nombre_diapo && a>0) || (i==1 && a==0)){
i++;
a++;
setTimeout(function(){
$('#img'+(i-1)).removeClass('survol').find('.info').css('border-top', 'solid 1px #262626').find('span').hide();
$('#img'+i).addClass('survol').find('.info').css('border-top', 'solid 1px #E3594E').find('span').show();
},180);
$('#slide_img').animate({
marginLeft: '-='+deplacement_slide+'px'
},600);
}
else{
i--;
setTimeout(function(){
$('#img'+(i+1)).removeClass('survol').find('.info').css('border-top', 'solid 1px #262626').find('span').hide();
$('#img'+i).addClass('survol').find('.info').css('border-top', 'solid 1px #E3594E').find('span').show();
},180);
$('#slide_img').animate({
marginLeft: '+='+deplacement_slide+'px'
},600);
a=0;
}
}
function boucle(){
slide();
Timer_slide = setTimeout(boucle,temps);
}
Je lance la fonction boucle quand on est sur la page folio.
Ce que je voudrais c'est que quand on passe sur les li de #slide_nav, le slider s’arrête. Le li prend la class .survol et affiche le bon visuel. Quand la souris sort du ul le slider reprend.
Voici mon code pour le moment:
function aide(id, numero){
clearTimeout(Timer_slide);
var ie = (numero-1)*deplacement_slide;
alert(ie);
if(numero != i){
$('#img'+i).removeClass('survol').find('.info').css('border-top', 'solid 1px #262626').find('span').hide();
$(id).addClass('survol').find('.info').css('border-top', 'solid 1px #E3594E').find('span').show();
$('#slide_img').animate({
marginLeft: '-'+ie+'px'
},600);
}
}
function aide_sup(id, numero){
Timer_slide = setTimeout(boucle,temps);
var ie = (i-1)*1100;
if(numero != i){
$('#img'+i).addClass('survol').find('.info').css('border-top', 'solid 1px #E3594E').find('span').show();
$(id).removeClass('survol').find('.info').css('border-top', 'solid 1px #262626').find('span').hide();
$('#slide_img').animate({
marginLeft: '+'+ie+'px'
},600);
}
}
Je voudrais savoir si quelqu'un peut m'orienter sur une piste au niveau du slider: pouvoir arreter le slider, afficher le visuel correspondant au li survoler par la souris et faire redémarrer le slider.
Et aussi savoir si ce n'est pas trop n'importe quoi au niveau du code.
Merci à tous
Modifié par renard13 (17 Nov 2012 - 21:06)
