Inserer une class dans une image.

**carmen256** · 20/02/2009, 19h07

Bonjour

Je connais un souci, je ne code quand php. On m'a donné un script auquel je doit ajouter un paramètre. Le script permet de faire un slide show d'image avec un lien.

voici le script

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
<link rel="stylesheet" href="css/fi.css" type="text/css" />
<script type="text/javascript">
 
var photos=new Array()
var photoslink=new Array()
var which=0
 
 
//la liste des images pour le slide
photos[0]="images/transparent.png"
photos[1]="images/transparent.png"
photos[2]="images/transparent.png"
 
//ici on spécifie le lien. Si on veut un lien pour chaque image on met linkornot=1 sinon zero
var linkornot=1
 
//Si lien = 1 la liste de liens correspondante aux image est ci dessous
photoslink[0]="essai.php?ref=1"
photoslink[1]="essai.php?ref=2"
photoslink[2]="essai.php?ref=3"
 
//prechargement images
 
var preloadedimages=new Array()
             for (i=0;i<photos.length;i++){
                              preloadedimages[i]=new Image()
                              preloadedimages[i].src=photos[i]
                                          }
 
function applyeffet(){
       if (document.all && photoslider.filters){
               photoslider.filters.revealTrans.Transition=Math.floor(Math.random()*23)
               photoslider.filters.revealTrans.stop()
               photoslider.filters.revealTrans.apply()
                                               }
                      }
 
function playeffet(){
           if (document.all && photoslider.filters)
           photoslider.filters.revealTrans.play()
                     }
 
function kt(){
           window.status="Image "+(which+1)+" of "+photos.length
                    }
 
 
function backward(){
           if (which>0){
           which--
           applyeffet()
           document.images.photoslider.src=photos[which]
           playeffet()
           kt()
                       }
                   }
 
function forward(){
       if (which<photos.length-1){
                              which++
                              applyeffet()
                              document.images.photoslider.src=photos[which]
                              playeffet()
                              kt()
                                 }
                   }
function transport(){
window.location=photoslink[which]
                    }
 
</script>
</head>
 
<body>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%" colspan="2" height="22"><center>
<script type="text/javascript">
if (linkornot==1)
document.write('<a href="javascript:transport()">')
document.write('<img src="'+photos[0]+'" name="photoslider" style="filter:revealTrans(duration=2,transition=23)" border=0  alt ="" />')
if (linkornot==1)
document.write('<\/a>')
</script>
</center></td>
  </tr>
  <tr>
    <td width="50%" height="21"><p align="left"><a href="#" onClick="backward();return false">Previous Slide</a></td>
    <td width="50%" height="21"><p align="right"><a href="#" onClick="forward();return false">Next Slide</a></td>
  </tr>
</table>
</body>
</html>

Le script fonctionne bien . le paramètre que je dois insérer est une fonction css class dans images.

J'ai fait ceci

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
<link rel="stylesheet" href="css/fi.css" type="text/css" />
<script type="text/javascript">

var photos=new Array()
var photoslink=new Array()
var which=0

// ici je met les class ca va cela ressemble à php
var class= new Array()
class[0]="i"
class[1]="in"
class[2]="id"

//la liste des images pour le slide
photos[0]="images/ic_h.png"
photos[1]="images/ic_h_s.png"
photos[2]="images/ic_h.png"


//ici on spécifie le lien. Si on veut un lien pour chaque image on met linkornot=1 sinon zero

var linkornot=1

//Si lien = 1 la liste de liens correspondante aux image est ci dessous
photoslink[0]="essai.php?ref=1"
photoslink[1]="essai.php?ref=2"
photoslink[2]="essai.php?ref=3"

//prechargement images

var preloadedimages=new Array()
             for (i=0;i<photos.length;i++){
                              preloadedimages[i]=new Image()
                              preloadedimages[i].src=photos[i]
                                          }

function applyeffet(){
       if (document.all && photoslider.filters){
               photoslider.filters.revealTrans.Transition=Math.floor(Math.random()*23)
               photoslider.filters.revealTrans.stop()
               photoslider.filters.revealTrans.apply()
                                               }
                      }

function playeffet(){
           if (document.all && photoslider.filters)
           photoslider.filters.revealTrans.play()
                     }

function kt(){
           window.status="Image "+(which+1)+" of "+photos.length
                    }


function backward(){
           if (which>0){
           which--
           applyeffet()
           document.images.photoslider.src=photos[which]
           playeffet()
           kt()
                       }
                   }

function forward(){
       if (which<photos.length-1){
                              which++
                              applyeffet()
                              document.images.photoslider.src=photos[which]
                              playeffet()
                              kt()
                                 }
                   }
function transport(){
window.location=photoslink[which]
                    }

</script>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%" colspan="2" height="22"><center>
<script type="text/javascript">
if (linkornot==1)
document.write('<a href="javascript:transport()">')
document.write('<img src="'+photos[0]+'" class="'+class[0]+'" name="photoslider" style="filter:revealTrans(duration=2,transition=23)" border=0  alt ="" />')
if (linkornot==1)
document.write('<\/a>')
</script>
</center></td>
  </tr>
  <tr>
    <td width="50%" height="21"><p align="left"><a href="#" onClick="backward();return false">Previous Slide</a></td>
    <td width="50%" height="21"><p align="right"><a href="#" onClick="forward();return false">Next Slide</a></td>
  </tr>
</table>
</body>
</html>

La modification permet de mettre l'effet css à la première images mais pas autres c'est normal. Car je ne sais pas faire concorder le tableau array() photos et le tableau array() class.

Donc quelqu'un peut m'aider afin que chaque images possèdent sa class
photos[0] --class[0]
photos[1] --class[1] ...

Merci d'avance.