[Résolu] Conserver un GIF animé lorsque lien actif

[Résolu]
J'ai conservé la méthode du JS pour afficher les GIFS en hover (animation/lecture depuis le départ contrairement aux CSS) + ajout supplémentaire des GIFS via CSS en background pour l'état actif des liens de navigation du slideshow. C'est du bricolage mais en attendant ça fonctionne, c'est le principal ^^
-----

Salut à tous,

Le titre n'est pas très parlant... J'ai un menu qui affiche différents textes selon le lien survolé. Il y a également une fonction de slideshow automatique mis en place. Les icônes du menu sont des PNG et lorsque je les survole j'affiche un GIF animé à la place du PNG grâce à un petit bout de code JS.

Ma question est, comment faire pour conserver le GIF animé lorsque l'état du lien est actif (lors du slideshow automatique par exemple) ?

Pour le moment j'ai bien mon GIF à la place du PNG au survol mais dès que je retire le pointeur de la zone, l'image retourne à son état initial en PNG, idem lorsque le slideshow passe de lien en lien.

Merci !

Le code JS servant à l'affichage du GIF au lieu du PNG lors du hover

$('#services').find('li').hover(function() {
var target = $(this).find('img').attr('src');
var newTarg = target.replace('.png', '.gif');
$(this).find('img').attr("src", newTarg);
}, function() {
var target = $(this).find('img').attr('src');
var newTarg = target.replace('.gif', '.png');
$(this).find('img').attr("src", newTarg);
});

Le code du slideshow

$(document).ready(function() {
var $slideshow;
var $nav;
var interval;
var delay = 5000;
var time_slide = 0;

$slideshow = $("#slideshow");
$nav = $("#services nav");

var tabcss = {
'position':'relative',
'top':'0',
'left':'0'
};
$("article",$slideshow).css(tabcss);

$("article:gt(0)",$slideshow).hide();

$("a:first",$nav).addClass("active");

function slide_next(sens) {
if(typeof sens=='undefined' || sens==undefined) {
sens=1;
}
var $slideCurrent = $("article:visible",$slideshow);
if(sens>0)
var $suivante = $slideCurrent.last().next("article");
else
var $suivante = $slideCurrent.first().prev("article");
if ($suivante.length<1) {
if(sens>0) $suivante = $("article:first",$slideshow);
else $suivante = $("article:last",$slideshow);
}
$suivante.stop(true, true).fadeIn(time_slide);
$slideCurrent.stop(true, true).fadeOut(time_slide);
$("a",$nav).removeClass("active");
$("a#"+$suivante.data("nav")).addClass("active");
}

$("a",$nav).mouseenter(
function() {
clearInterval(interval);
$("a",$nav).removeClass("active");
$(this).addClass("active");
$("article",$slideshow).stop(true, true).fadeOut(time_slide);
var id = $(this).attr("id");
$("article[data-nav="+id+"]",$slideshow).stop(true, true).fadeIn(time_slide);

});

$("a",$nav).mouseleave(slide_start);

$slideshow.mouseenter(slide_stop);
$slideshow.mouseleave(slide_start);

function slide_start() {
clearInterval(interval);
interval = setInterval(function() { slide_next(1); },delay);
}

function slide_stop() {
clearInterval(interval);
}

slide_start();
});

Modifié par yank (22 May 2016 - 21:13)