Image d'un slideshow qui influence un bouton

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

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, 09h30

Ah... Dreamweaver

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

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

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

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** · 22/11/2012, 23h37

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

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

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 ?

Image d'un slideshow qui influence un bouton

JavaScript

Vue hybride

Discussions similaires

Partager

Partager