Discussion :

[jeckyl]

Bonjour à tous,

Je me lance dans mon premier script jquery pour modifier un javascript qui fonctionne mais qui n'est pas parfait.

Je cherche à faire un truc qui doit surement exister en jquery.

J'ai des liens et je veux afficher une image différente au survol des liens.

J'ai en plus un css hover qui change le background du lien pour afficher une image.

Mapage

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div class="feature clearfloat" id="lead">
 
 <h3>
<a href="/category/evenements-et-soirees/">Evènements et Soirées</a><br />
</h3>
 
<a href="/au-buck-en-fevrier-2009/" rel="bookmark"><img src="/wp-content/uploads/2009/01/pub-kifekoi-fevrier1.jpg" alt="" class="leadpic" id="0" /></a>
<a href="/le-festival-de-jazz-eclat-demail-sinvite-au-buck-pour-le-moi-de-novembre/" rel="bookmark"><img src="/eclat-email-affiche.jpg" alt="" class="leadpic" id="1" style="display:none" /></a>
 
<h6><a href="/au-buck-en-fevrier-2009/" rel="bookmark" class="title" onmouseover="AfficherFlyer('0')">Au Buck en Février 2009</a></h6>
<h6><a href="/le-festival-de-jazz-eclat-demail-sinvite-au-buck-pour-le-moi-de-novembre/" rel="bookmark" class="title" onmouseover="AfficherFlyer('1')">Le Festival de Jazz</a></h6>
</div>

Mon css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
.feature#lead .title:hover {
    background: url(images/fleche.png) no-repeat left top;
}

Mon script

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
function AfficherFlyer(nom) {
       for (var i=0; i<2; i++) {
        if (i == nom) {
            document.getElementById(nom).style.display = "block";
        } else {
            document.getElementById(i).style.display = "none";
        }
    }
}

Merci d'avance à ceux qui aurons une piste à me donner.

Car il faut que je mette en place plusieurs choses.

Faire disparaitre le onmouseover du code.
que mon background fleche reste en place lorsque la bonne image est afficher
Faire que les images ne se chargent que lorsque l'on survol le lien et non au 1er chargement de la page.

[jeckyl]

bon,

j'ai trouvé cela http://timothyfletcher.com/journal/p...ap-with-jquery

Mais je n'arrive pas à le faire fonctionner.

[jeckyl]

Bon je vient d'avancer de nouveau

Je bloque sur un truc simple surement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#imageFlyers img').hide().filter(this.attr("id")).show();

Normalement cela doit faire disparaitre toutes mes images et garder celle qui a le même id que mon lien.
Sauf que 2 objet ne peuvent pas avoir le même id donc cela doit bloquer ici.

mon image devrait avoir un id du type PIC0, ..., PICn et mes lien un id LINK0, ..., LINKn.

Je cherche à mettre cela dans la formule.

[zyongh]

Tu peux utiliser une boucle for ou tu incrémentes un entier et à chaque cycle tu concatènes ta valeur à PIC et à LINK

exemple (non testé):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
for(i=0, i<N, i++){
  $('.selector').html("blablabla LINK"+i+" bla bla bla PIC"+i+" blabla");

[marcha]

Salut,

tu peux peut-être recomposer l'id de l'image en te basant sur l'id du lien,
c'est à dire, extraire le chiffre de LINKn (soit le "n") et l'appondre à PIC.

quelque chose dans le genre:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var pic_id = "PIC" + $(this).attr('id').substring(4);

[jeckyl]

Bon,

Merci pour les réponses, javance à grands pas.

Mais, je bloque toujours sur le show/hide de mes images.

Voici ce que j'utilise lors du mouseover (qui fonction vu que mes addClass et removeClass tournent)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var pic_id = "pic" + $(this).attr('id').substring(4);
$('#imageFlyers img').hide().filter('pic_id').show();

Cela ne fait rien ???

[marcha]

Salut,

si tu met pic_id entre guillemet il va prendre ce texte tel quel et pas
la valeur de la variable pic_id, d'autre part il manque le #
filter('#' + pic_id) devrait aller mieux

[jeckyl]

Tout fonctionne.

Merci beaucoup pour l'aide, cela me permet de comprendre un peux mieux le framework jquery qui est pas mal.