Image d'un slideshow qui influence un bouton

**Geinoch** · 20/11/2012, 17h00

Bonjour,
J'ai essayé tant bien que mal et j'ai chercher sur le forum, sans trouver exactement ce que je désire.

j'aimerais que selon une image d'un slideshow, un bouton créé en fireworks puisse changer d'apparence

(Image 1 = bouton 1 en apparence (onclick))
(Image 2 = bouton 2 en apparence (onclick))
.. etc.)

Je vous remercie beaucoup à l'avance pour votre aide, elle serait grandement apprécié

Voici les bouts de codes

SLIDESHOW

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<script>
 
 
var slideShowSpeed = 5000
 
var crossFadeDuration = 2
 
 
var Pic = new Array() 
Pic[0] = "images/IMGprincipale1B.jpg"
Pic[1] = "images/IMGprincipale2C.jpg"
Pic[2] = "images/IMGprincipale3C.jpg"
Pic[3] = "images/IMGprincipale4A.jpg"
 
var t
var j = 0
var p = Pic.length
var preLoad = new Array()
for (i = 0; i < p; i++){
   preLoad[i] = new Image()
   preLoad[i].src = Pic[i]
}
function runSlideShow(){
   if (document.all){
      document.images.SlideShow.style.filter="blendTrans(duration=2)"
      document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
      document.images.SlideShow.filters.blendTrans.Apply()      
   }
   document.images.SlideShow.src = preLoad[j].src
   if (document.all){
      document.images.SlideShow.filters.blendTrans.Play()
   }
   j = j + 1
   if (j > (p-1)) j=0
   t = setTimeout('runSlideShow()', slideShowSpeed)
}
var count = 0  
var images = new Array(Pic[i])  
 
</script>

Script du bouton

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<script language="JavaScript1.2" type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
  if (event == "init" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
        if (!img.MM_up) img.MM_up = img.src;
        img.src = img.MM_dn = args[i+1];
        nbArr[nbArr.length] = img;
    } }
  } else if (event == "over") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])?args[i+1] : img.MM_up);
      nbArr[nbArr.length] = img;
    }
  } else if (event == "out" ) {
    for (i=0; i < document.MM_nbOver.length; i++) { img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
  } else if (event == "down") {
    nbArr = document[grpName];
	if (nbArr) for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
      nbArr[nbArr.length] = img;
  } }
}
 
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
 
//-->
</script>

et code html du bouton

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<td><table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="1024">
  <!-- fwtable fwsrc="Untitled" fwpage="defile" fwbase="defile.gif" fwstyle="Dreamweaver" fwdocid = "1877931716" fwnested="0" -->
  <tr>
    <td><img src="images/defilement/spacer.gif" alt="" name="undefined_2" width="16" height="1" border="0" /></td>
    <td><img src="images/defilement/spacer.gif" alt="" name="undefined_2" width="14" height="1" border="0" /></td>
    <td><img src="images/defilement/spacer.gif" alt="" name="undefined_2" width="7" height="1" border="0" /></td>
    <td><img src="images/defilement/spacer.gif" alt="" name="undefined_2" width="14" height="1" border="0" /></td>
    <td><img src="images/defilement/spacer.gif" alt="" name="undefined_2" width="7" height="1" border="0" /></td>
    <td><img src="images/defilement/spacer.gif" alt="" name="undefined_2" width="14" height="1" border="0" /></td>
    <td><img src="images/defilement/spacer.gif" alt="" name="undefined_2" width="7" height="1" border="0" /></td>
    <td><img src="images/defilement/spacer.gif" alt="" name="undefined_2" width="14" height="1" border="0" /></td>
    <td><img src="images/defilement/spacer.gif" alt="" name="undefined_2" width="931" height="1" border="0" /></td>
    <td><img src="images/defilement/spacer.gif" alt="" name="undefined_2" width="1" height="1" border="0" /></td>
  </tr>
  <tr>
    <td colspan="9"><img name="defile_r1_c1_s1" src="images/defilement/defile_r1_c1_s1.gif" width="1024" height="8" border="0" id="defile_r1_c1_s1" alt="" /></td>
    <td><img src="images/defilement/spacer.gif" alt="" name="undefined_2" width="1" height="8" border="0" /></td>
  </tr>
  <tr>
    <td rowspan="2"><img name="defile_r2_c1_s1" src="images/defilement/defile_r2_c1_s1.gif" width="16" height="28" border="0" id="defile_r2_c1_s1" alt="" /></td>
    <td><a href="javascript:; " onmouseout="MM_nbGroup('out'); " onmouseover="MM_nbGroup('over','defile_r2_c2_s1','images/defilement/defile_r2_c2_s2.gif','images/defilement/defile_r2_c2_s4.gif',1);" onclick="MM_nbGroup('down','navbar1','defile_r2_c2_s1','images/defilement/defile_r2_c2_s3.gif',1); document.images.SlideShow.src = Pic[0]"><img name="defile_r2_c2_s1" src="images/defilement/defile_r2_c2_s1.gif" width="14" height="13" border="0" id="defile_r2_c2_s1" alt="" /></a></td>
    <td rowspan="2"><img name="defile_r2_c3_s1" src="images/defilement/defile_r2_c3_s1.gif" width="7" height="28" border="0" id="defile_r2_c3_s1" alt="" /></td>
    <td><a href="javascript:;" onmouseout="MM_nbGroup('out');" onmouseover="MM_nbGroup('over','defile_r2_c4_s1','images/defilement/defile_r2_c4_s2.gif','images/defilement/defile_r2_c4_s4.gif',1);" onclick="MM_nbGroup('down','navbar1','defile_r2_c4_s1','images/defilement/defile_r2_c4_s3.gif',1); document.images.SlideShow.src  = (Pic[1])"><img name="defile_r2_c4_s1" src="images/defilement/defile_r2_c4_s1.gif" width="14" height="13" border="0" id="defile_r2_c4_s1" alt="" /></a></td>
    <td rowspan="2"><img name="defile_r2_c5_s1" src="images/defilement/defile_r2_c5_s1.gif" width="7" height="28" border="0" id="defile_r2_c5_s1" alt="" /></td>
    <td><a href="javascript:;" onmouseout="MM_nbGroup('out');" onmouseover="MM_nbGroup('over','defile_r2_c6_s1','images/defilement/defile_r2_c6_s2.gif','images/defilement/defile_r2_c6_s4.gif',1);" onclick="MM_nbGroup('down','navbar1','defile_r2_c6_s1','images/defilement/defile_r2_c6_s3.gif',1); document.images.SlideShow.src = (Pic[2])"><img name="defile_r2_c6_s1" src="images/defilement/defile_r2_c6_s1.gif" width="14" height="13" border="0" id="defile_r2_c6_s1" alt="" /></a></td>
    <td rowspan="2"><img name="defile_r2_c7_s1" src="images/defilement/defile_r2_c7_s1.gif" width="7" height="28" border="0" id="defile_r2_c7_s1" alt="" /></td>
    <td><a href="javascript:;" onmouseout="MM_nbGroup('out');" onmouseover="MM_nbGroup('over','defile_r2_c8_s1','images/defilement/defile_r2_c8_s2.gif','images/defilement/defile_r2_c8_s4.gif',1);" onclick="MM_nbGroup('down','navbar1','defile_r2_c8_s1','images/defilement/defile_r2_c8_s3.gif',1); document.images.SlideShow.src = (Pic[3])"><img name="defile_r2_c8_s1" src="images/defilement/defile_r2_c8_s1.gif" width="14" height="13" border="0" id="defile_r2_c8_s1" alt="" /></a></td>
    <td rowspan="2"><img name="defile_r2_c9_s1" src="images/defilement/defile_r2_c9_s1.gif" width="931" height="28" border="0" id="defile_r2_c9_s1" alt="" /></td>
    <td><img src="images/defilement/spacer.gif" alt="" name="undefined_2" width="1" height="13" border="0" /></td>
  </tr>
  <tr>
    <td><img name="defile_r3_c2_s1" src="images/defilement/defile_r3_c2_s1.gif" width="14" height="15" border="0" id="defile_r3_c2_s1" alt="" /></td>
    <td><img name="defile_r3_c4_s1" src="images/defilement/defile_r3_c4_s1.gif" width="14" height="15" border="0" id="defile_r3_c4_s1" alt="" /></td>
    <td><img name="defile_r3_c6_s1" src="images/defilement/defile_r3_c6_s1.gif" width="14" height="15" border="0" id="defile_r3_c6_s1" alt="" /></td>
    <td><img name="defile_r3_c8_s1" src="images/defilement/defile_r3_c8_s1.gif" width="14" height="15" border="0" id="defile_r3_c8_s1" alt="" /></td>
    <td><img src="images/defilement/spacer.gif" alt="" name="undefined_2" width="1" height="15" border="0" /></td>
  </tr>
</table>

Au fond j'aimerais que lorsque l'image IMGprincipale1A apparaisse.
que le bouton à qui il se rattache, passe de son slice "defile_c2_r2_s1.gif" à "defile_c2_r2_s3.gif" (ainsi de suite pour les 3 autres images et leurs boutons)

Code :

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

1
2
 
   <td><a href="javascript:; " onmouseout="MM_nbGroup('out'); " onmouseover="MM_nbGroup('over','defile_r2_c2_s1','images/defilement/defile_r2_c2_s2.gif','images/defilement/defile_r2_c2_s4.gif',1);" onclick="MM_nbGroup('down','navbar1','defile_r2_c2_s1','images/defilement/defile_r2_c2_s3.gif',1); document.images.SlideShow.src = Pic[0]"><img name="defile_r2_c2_s1" src="images/defilement/defile_r2_c2_s1.gif" width="14" height="13" border="0" id="defile_r2_c2_s1" alt="" /></a></td>

J'espère que c'est plus simple

**RomainVALERI** · 21/11/2012, 10h30

Ah... Dreamweaver

**Geinoch** · 21/11/2012, 16h44

C'est bon ou pas bon?.. Je suis pas vraiment expert... Je cherche juste un moyen de me démerder =)

**Geinoch** · 22/11/2012, 04h07

Es-ce que je dois travailler sur la fonction MM_nbGroup? ou bien j'ajoute une sorte de if sur le slideshow?

J'ai essayer sur le slide show sans réussir =(

Celui qui m'apporte une piste à droit à un bout de robot =)

**Geinoch** · 23/11/2012, 00h37

J'imagine que par vos réponses c'est impossible ?

**RomainVALERI** · 23/11/2012, 09h56

Envoyé par Geinoch

J'imagine que par vos réponses c'est impossible ?

Probablement pas, non.

En revanche, travailler sur un code généré comme celui de Dreamweaver, étrangement, ne donne envie à personne.

Ce genre de produit a justement pour but de permettre à des personnes d'horizons divers de "développer" des pages web sans trop "mettre les mains dans le cambouis" ^^ Mais malheureusement, si (et c'est *toujours* le cas) on bloque au bout d'un moment sur un problème technique que l'interface WYSIWYG ne résoud pas de manière simple... c'est la cata.

Je ne sais pas quoi te suggérer car résoudre le point très précis qui te pose problème ici ne servirait qu'à gagner un peu de temps sur l'inévitable "prochain problème" qui te laissera perplexe aussi...

J'aurais voulu t'aider

...mais je vais laisser la main à d'éventuels spécialistes Dreamweaver... y'a quelqu'un ?

**Geinoch** · 23/11/2012, 17h40

Le code que tu vois plus haut c'est un image Slicé avec Firework, le slideshow je l'ai construit en modifiant un code d'un tutoriel et en y ajoutant le fade. L'interface de dreamweaver ne me sert qu'a mettre à jour facilement le FTP.

Je ne me sert pas des mise en forme de dreamweaver. Si la façon dont la page est monté n'est pas très performante, j'en suis le seul responsable =(

**NoSmoking** · 23/11/2012, 17h49

Bonjour,
pas bien regardé le fond

, mais du CSS standard n'est-il pas suffisant avec un :hover bien senti ?

Sinon mets une page test en ligne que l'on comprenne sans avoir à déchiffrer les fonctions, la grosse flemme

**RomainVALERI** · 23/11/2012, 18h52

Envoyé par Geinoch

Je ne me sert pas des mise en forme de dreamweaver. Si la façon dont la page est monté n'est pas très performante, j'en suis le seul responsable =(

Je parlais notamment du code des fonctions MM_... qui sont j'imagine générées par DW, je ne doute ni de ta compétence ni de ta bonne foi, pardon si je t'ai froissé

Mais il se trouve que les fonctions JS générées par DW sont vraiment peu lisibles... et je suis de l'avis de NoSmoking (ce qui est très souvent un pari gagnant, même "à l'aveugle"

) : il vaut probablement mieux gérer ça en CSS (ou bien écrire de petites fonctions JS "propres") plutôt que d'essayer de "réparer" du code généré. ^^

**Geinoch** · 23/11/2012, 19h29

Envoyé par RomainVALERI

Je parlais notamment du code des fonctions MM_... qui sont j'imagine générées par DW, je ne doute ni de ta compétence ni de ta bonne foi, pardon si je t'ai froissé

Mais il se trouve que les fonctions JS générées par DW sont vraiment peu lisibles... et je suis de l'avis de NoSmoking (ce qui est très souvent un pari gagnant, même "à l'aveugle"

) : il vaut probablement mieux gérer ça en CSS (ou bien écrire de petites fonctions JS "propres") plutôt que d'essayer de "réparer" du code généré. ^^

Hehe tu ne m'as pas froissé et tu devrais plutot douter de mes compétences, c'est ce que je voulais dire hehe.

La fonction MM a été créée lorsque j'ai fait l'enregistrement dans Firework. Donc, si je comprend bien ce que vous dites, c'est au niveau de cette fonction que c'est pas terrible?

(www.visionartconcept.com) si vous voulez voir le travail.

**Geinoch** · 24/11/2012, 21h10

oops, je n'avais pas encore mise à jour la page avec l'image en slice, vous n'avez peut-être pas dû comprendre.
Il est à jour maintenant.

Désolé pour le contre-temps.

**NoSmoking** · 25/11/2012, 21h20

j'ai regardé un peu plus avant et.....la construction sur base d'une TABLE n'aide pas à voir rapidement les tenants et aboutissants

Beaucoup d'images identiques ce qui n'aide pas à s'y retrouver non plus...

Néanmoins cela à l'air jouable en créant une fonction modifiant les "voyants" lors de l'affichage de la nouvelle "image bannière", par contre effectivement exit le CSS du fait de l'affichage différent en cas "d'activité" même si en CSS3 cela serait à regarder.

Les fonctions MM_xxxxx, dans ton cas peuvent être remplacées par une fonction plus simple de mouseover/out.

par exemple

Code :

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

1
2
3
4
5
6
7
8
9
10
var imgOVER = 'images/defilement/defile_r2_c2_s2.gif';  // cela me semble bon
// fonction pour le mouseover/out
function swapImage( obj, etat){
  // get et set l'image associée au lien si non encore fait
  obj.oImg =  obj.oImage || obj.getElementsByTagName('IMG')[0];
  // save image affichée en cours
  obj.oImg.src_sav = obj.oImg.src_sav || obj.oImg.src;
  // affecte image suivant cas etat == 1 => OVER sinon OUT
  obj.oImg.src = etat == 1 ? imgOVER : obj.oImg.src_sav;
}

l'appel sur les liens se feront de la manière suivante

Code html :

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

1
2
3
4
5
<td >
  <a href="voyant_0" onmouseout ="swapImage(this);" onmouseover="swapImage(this,1);" onclick="return (showPic(0));">
    <img class="voyant" id="voyant_0" src="images/defilement/defile_r2_c2_s1.gif" alt="" />
  </a>
</td>

le code HTML est très allégé mais visiblement suffisant pour peu que l'on ajoute le CSS suivant

Code css :

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

1
2
3
4
5
img.voyant{
  width:14px;
  height:13px;
  border:0;
}

la fonction showPic reste à définir et doit retourner false pour annihiler le comportement par défaut des liens, cela pourrait d'ailleurs être géré sans les balises A englobantes directement sur les images "voyant".

Tu gagnerais en clarté du code à utiliser une feuille de style et à utiliser autre chose que les TABLEs.

**Geinoch** · 26/11/2012, 01h06

Merci beaucoup d'avoir passé du temps, c'est très apprécié. Mes compétences étant très limitées, je vais passer une bonne partie de la journée de demain à travailler sur ce que tu avances. Je te redonne des nouvelles dès que je réussis à me démêler =)

Merci encore. Je te reviens là-dessus!

**Geinoch** · 26/11/2012, 20h03

Bon voilà ce qui se passe.

1 - J'ai de la difficulté à comprendre ton principe de "voyant" (je parle Québecois

) Si je met voyant_0, le site est redirigé vers une page du nom de voyant_0 qui n'existe pas.

2- Au lieu de créer une fonction showpic, j'ai tout simplement ramené l'image vers document.images.slideshow.src = Pic[0 à 3].

En conclusion, le tout retombe à faire exactement la même chose qu'avant. C'est à dire je clique, la bonne image du slideshow aparait, cependant le bouton ne suit toujours pas le slideshow.

J'ai l'impression qu'il faudrait une commande qui dirait:
Si l'image slideshow.src = Pic[1] est affiché (par exemple) alors le deuxième bouton affiche l'image defile_r2_c4_s3 (par exemple)

**NoSmoking** · 27/11/2012, 00h17

Envoyé par Geinoch

1 - J'ai de la difficulté à comprendre ton principe de "voyant" (je parle Québecois

)

je vais faire l'effort d'écrire Québecois pour t'être agréable

Ce que j'ai appelé "voyant" ce sont les indicateurs visuel qui te permettent de savoir quelle image est affichée.

Je reprend ta fonction runSlideShow

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function runSlideShow(){
  var oImage = document.getElementById('Slideshow');
  if( oImage){
    // applique filtre IE  
    if( oImage.filters){
      oImage.style.filter="blendTrans(duration=2)"
      oImage.filters.blendTrans.Apply();
    }
    // affiche image
    showPic( numEncours);
    // applique filtre IE
    if( oImage.filters){
      oImage.filters.blendTrans.Play();
    }
    // test débordement
    numEncours = ( numEncours +1) % nbImg;
    // relance fonction
    timer = setTimeout( runSlideShow, 5000); // 5s
  }
}

c'est dans celle ci que nous allons mettre notre appel à la fonction showPic non encore définie, nous lui passons en paramètre le numéro en cours.

Maintenant la fonction showPic

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// fonction d'affichage bandeau
function showPic( num){
  // get image bannière
  var oImage = document.getElementById('Slideshow');
  if( oImage){
    // efface les images voyant
    var ind = 0;
    while( oVoyant = document.getElementById('voyant_' +ind)){
      // affecte image suivant cas
      oVoyant.src = ind == num ?  imgON : imgOFF;
      // sauve image voyant en cours
      oVoyant.src_sav = oVoyant.src;
      // suivant
      ind++;
    }
    // affiche image correspondante
    oImage.src = preLoad[num].src;
    // sauve encours
    numEncours = num;
  }
  // annule action par défaut du lien
  return false;
}

il me semble que je l'ai suffisamment commentée pour que tu en comprennes le principe.

Tous les "voyant" ont des numéros qui se suivent, voyant_0, voyant_1, voyant_2... ce qui permet de les "éteindre" et de n'allumer que celui concerné.

Au final le code javascript est

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
// images de la bannière
var Pic = [];
Pic[0] = "images/IMGprincipale1B.jpg";
Pic[1] = "images/IMGprincipale2C.jpg";
Pic[2] = "images/IMGprincipale3C.jpg";
Pic[3] = "images/IMGprincipale4A.jpg";
var nbImg = Pic.length;
// url des images voyant par défaut
var imgOFF  = 'images/defilement/defile_r2_c2_s1.gif';
var imgOVER = 'images/defilement/defile_r2_c2_s2.gif';
var imgON   = 'images/defilement/defile_r2_c2_s3.gif'
var timer;
var numEncours = 0;
var preLoad = [];
for( var i = 0; i < nbImg; i++){
  preLoad[i] = new Image();
  preLoad[i].src = Pic[i];
}
function runSlideShow(){
  var oImage = document.getElementById('Slideshow');
  if( oImage){
    // applique filtre IE  
    if( oImage.filters){
      oImage.style.filter="blendTrans(duration=2)"
      oImage.filters.blendTrans.Apply();
    }
    // affiche image
    showPic( numEncours);
    // applique filtre IE
    if( oImage.filters){
      oImage.filters.blendTrans.Play();
    }
    // test débordement
    numEncours = ( numEncours +1) % nbImg;
    // relance fonction
    timer = setTimeout( runSlideShow, 5000); // 5s
  }
}
// fonction pour le mouseover/out
function swapImage( obj, etat){
  // get l'image associée au lien si non encore fait
  obj.oImg =  obj.oImage || obj.getElementsByTagName('IMG')[0];
  // save image affichée en cours
  obj.oImg.src_sav = obj.oImg.src_sav || obj.oImg.src;
  // affecte image suivant cas etat == 1 => OVER sinon OUT
  obj.oImg.src = etat == 1 ? imgOVER : obj.oImg.src_sav;
}
// fonction d'affichage bandeau
function showPic( num){
  // get image bannière
  var oImage = document.getElementById('Slideshow');
  if( oImage){
    // efface les images voyant
    var ind = 0;
    while( oVoyant = document.getElementById('voyant_' +ind)){
      // affecte image suivant cas
      oVoyant.src = ind == num ?  imgON : imgOFF;
      // sauve image voyant en cours
      oVoyant.src_sav = oVoyant.src;
      // suivant
      ind++;
    }
    // affiche image correspondante
    oImage.src = preLoad[num].src;
    // sauve encours
    numEncours = num;
  }
  // annule action par défaut du lien
  return false;
}

et le code HTML associé( réduit) qu'il serait bon de reprendre au niveau de la structure.

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<table align="center" width="100%"  cellspacing="0">
  <tr>
    <td align="center" class="bandesbleues">
      <img id="Slideshow" src="images/IMGprincipale1B.jpg" name='SlideShow' align="middle">
    </td>
  </tr>
</table>
<table width="1024" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td>
      <table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="1024">
        <tr id="tr_entete">
          <td colspan="9">
            <img src="images/defilement/defile_r1_c1_s1.gif" width="1024" height="8" border="0" alt="" />
          </td>
          <td>
            <img src="images/defilement/spacer.gif" alt="" name="undefined_2" width="1" height="8" border="0" />
          </td>
        </tr>
        <tr id="tr_voyant">
          <td rowspan="2">
            <img src="images/defilement/defile_r2_c1_s1.gif" width="16" height="28" border="0" alt="" />
          </td>
          <td >
            <a href="0" onmouseout ="swapImage(this);" onmouseover="swapImage(this,1);" onclick=" return (showPic(0));">
              <img class="voyant" id="voyant_0" src="images/defilement/defile_r2_c2_s1.gif" alt="" />
            </a>
          </td>
          <td rowspan="2">
            <img src="images/defilement/defile_r2_c3_s1.gif" width="7" height="28" border="0" alt="" />
          </td>
          <td>
            <a href="1" onmouseout ="swapImage(this);" onmouseover="swapImage(this,1);" onclick=" return (showPic(1));">
              <img class="voyant" id="voyant_1" src="images/defilement/defile_r2_c4_s1.gif" alt="" />
            </a>
          </td>
          <td rowspan="2">
            <img src="images/defilement/defile_r2_c5_s1.gif" width="7" height="28" border="0" alt="" />
          </td>
          <td>
            <a href="2" onmouseout ="swapImage(this);" onmouseover="swapImage(this,1);" onclick=" return (showPic(2));">
              <img class="voyant" id="voyant_2" src="images/defilement/defile_r2_c6_s1.gif" alt="" />
            </a>
          </td>
          <td rowspan="2">
            <img src="images/defilement/defile_r2_c7_s1.gif" width="7" height="28" border="0" alt="" />
          </td>
          <td>
            <a href="3" onmouseout ="swapImage(this);" onmouseover="swapImage(this,1);" onclick=" return (showPic(3));">
              <img class="voyant" id="voyant_3" src="images/defilement/defile_r2_c8_s1.gif" alt="" />
            </a>
          </td>
          <td rowspan="2">
            <img src="images/defilement/defile_r2_c9_s1.gif" width="931" height="28" border="0" alt="" />
          </td>
          <td>
            <img src="images/defilement/spacer.gif" alt="" width="1" height="13" border="0" />
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

j'allais oublier le CSS des "voyant"

Code css :

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

1
2
3
4
5
img.voyant{
 width:14px;
 height:13px;
 border:0;
}

Je t'encourage à utiliser la feuille de style plutôt que le style inline.

Voilà j'espère avoir été complet.

**Geinoch** · 27/11/2012, 01h24

Je te remerci beaucoup, ça fonctionne maintenant. J'aurais jamais été en mesure de me débrouiller.

Merci mille fois!

Votre site est definitivement dans mes favoris!

Image d'un slideshow qui influence un bouton

JavaScript

Discussions similaires

Partager

Partager