Modifier un script de slider

Version imprimable

19/11/2019, 19h25
agatos

Modifier un script de slider

Bonjour,
Il y a longtemps que je n'était pas venu sur ce forum.
Voila j'ai depuis très longtemp un script en JS qui fait un diaporama.
L'avancement se fait par 2 flèches (affreuses) que j'ai mis en place des deux côtés.
Je voudrai supprimer ces flèches par d'autres plus discrète mais à l’interrieur sur les bords de la photo.
Je pense que ça serai possible en CSS mais je n'y suis jamais arrivé.
Je veux vous montrer mon script mais je ne sais pas si je peux faire un copier coller ou s'il y a des codes à mettre.
Pouvez-vous m'aider.
Merci de votre attention
Cordialement
19/11/2019, 19h32
danielhagnoul

:salut:

La balise

Code:

copier-coller votre code ici

est insérée par le bouton # ci-dessus (dans la boite de dialogue)

Merci de l'aide, voici le script.

Code:

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
71
72
73
74
75
76
77
78
79
 <?php
   $dir = $_GET['repert'];
   $ptr = opendir($dir);
   while ($fichier = readdir($ptr))
   {
     if (is_file("$dir$fichier") && preg_match("%.jpg%i",$fichier))    // ou .gif éventuellement
     {
      $Diapo[] = $dir.$fichier;
   }
   } 
    sort($Diapo);
 
   $nb = count($Diapo);  // nombre d'images en PHP
 
 ?>
 
 <script style="text/JavaScript">
 
 // ************** d'après un petit script de SVM juin 2002 *********************
         var n = 0;
         var ImgDiapo = new Array();
 
         nb = <?php  echo "$nb;"; ?>  // nb d'images en JavaScript (trouvé par PHP)
 
 
 <?php
    for ($i=0 ; $i<$nb ; $i++)
      {
        echo("\tImgDiapo[$i]=\"$Diapo[$i]\";\r\n") ;
      }
 ?>
 
             var NbrImg = nb-1;  // ou (ImgDiapo.length - 1);
 
             var img = new Array();
 
             for (i=0;i<=NbrImg;i++)
             {
              img[i]= new Image();
              img[i].src=ImgDiapo[i];
             }
 
             function Diapo(d) {
                     n = n + d;
                     if (n < 0) {
                     n = NbrImg;
                     }
                     if (n > NbrImg) {
                     n = 0;
                     }
                     document.MonImage.src = ImgDiapo[n];
             }
 
  </script>
 
 <body onload="document.form1.reset();">
 
 <form name="form1">
<center>
   <table border="0" style="height: 700px;width: 800px;margin: 0;padding: 0;">
   <tr><td>
<a href='Photos_en_vrac' ><img src='photos/retour.png' border='0' alt='' /></a>
    </td></tr>
     <tr> 
          <td>
          <a href='#' onclick='Diapo(-1);return(false);'><img src='photos/precedent.png' border='0' alt='' /></a>
                    <img src="<?php echo "$Diapo[0]"; ?>" name="MonImage" border="2" />
 
          <a href='#' onclick='Diapo(+1);return(false);'><img src='photos/suivant.png' border='0' alt='' /></a>
 
          </td>     
     </tr>
 
   </table>
 
</center>
 </form>
 
 </body>

Bonjour,

les scripts PHP et JS n'ont, ici, pas d'importance.
Ce sont les codes HTML et CSS qui comptent.

Code:

1
2
3
4
5
6
7
8
9
     <tr> 
          <td>
          <a href='#' onclick='Diapo(-1);return(false);'><img src='photos/precedent.png' border='0' alt='' /></a>
                    <img src="<?php echo "$Diapo[0]"; ?>" name="MonImage" border="2" />
 
          <a href='#' onclick='Diapo(+1);return(false);'><img src='photos/suivant.png' border='0' alt='' /></a>
 
          </td>     
     </tr>

Peut-on voir le code CSS actuellement appliqué ?
Peut-on voir une page en ligne ?

Sinon, voici une solution (avec le CSS en ligne de code) :

Code:

1
2
3
4
5
6
7
8
9
<tr> 
  <td>
    <div style="position:relative;display:inline-block;">
      <a href="#" onclick="Diapo(-1);return(false);"><img style="position:absolute;left:0;top:30%;width:48px;border:0;" src="http://www.icône.com/images/icones/6/0/go-previous-5.png" alt="" /></a>
      <img src="<?php echo $Diapo[0]; ?>" name="MonImage" border="2" />
      <a href="#" onclick="Diapo(+1);return(false);"><img style="position:absolute;right:0;top:30%;width:48px;border:0;" src="http://www.icône.com/images/icones/6/0/go-next-5.png" alt="" /></a>
    </div>
  </td>     
</tr>

N.B. Les 2 icônes sont téléchargeables sur ce site.