Comment faire pour que mon image devienne un lien

**pierrot10** · 25/06/2007, 16h09

Bonjou,
J'ai ce code qui me permets de faire une alternance d'image.
J'aimerais savoir comment je pourrais le transformer pour que chaque image soient un lien qui chaqu'un pointe sur une autre page

Je suis trop pro en Javascript et votre aid em serait d'une tres grande utilité

Voic le code, a savoir que la fonction est appeler depuis le <body onLoad="doncrion()">

L'image doit donc devenir un lien.
le liens sera

http://www.monsite.ch?id=tom&page=18

Donc pour etre encore plus claire,

pour l'image 18.jpg (voici ci-dessous), le lien sera http://www.monsite.ch?id=tom&page=18

pour l'image 24.jpg (voici ci-dessous), le lien sera http://www.monsite.ch?id=tom&page=24

pour l'image 30.jpg (voici ci-dessous), le lien sera http://www.monsite.ch?id=tom&page=30

pour l'image 23.jpg (voici ci-dessous), le lien sera http://www.monsite.ch?id=tom&page=23

Il faut donc impérativement que la variable page aie toujours la valeur de pic[] (voir ci-dessous)

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
 
<script>
<!--
 
// Changer les variables suivantes
// =======================================
 
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 3000
 
// Duration of crossfade (seconds)
var crossFadeDuration = 3
 
// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below
 
Pic[0] = 'img/research/18.jpg'
Pic[1] = 'img/research/24.jpg'
 
// =======================================
// Ne rien éditer au-dessous de cette ligne
// =======================================
 
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)
}
//-->
</script>

Merci pour votre précieuse aide

**Sancho_54** · 25/06/2007, 16h31

Ajoute l'attribut href dans ta balise img et comme ca ton image sera un lien

**SpaceFrog** · 25/06/2007, 16h40

oulà href dasn une balise img ...

deux possibilités:

avec javascript

Code :

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

<img style='cursor:pointer;' onclick="self.location.href='autrepage.htm'" src='...' />

desavantage n'est pas reconnu par le moteurs de recherche et ne génère pas de referrer ...
Si javascript est désactivé, pas de lien ...

sans javascript

Code :

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

<a href="autrepage.htm" style="text-decoration:none;"><img  src='...' /></a>

**pierrot10** · 25/06/2007, 16h41

comm eca?
bon te cache pa, j'ai essayé, mais rien (suis novice en javascript)

Code :

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

document.images.SlideShow.href = "http://www.domaine .ch?id=re&page=preLoad[j]"

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
 
<script>
<!--
 
// Changer les variables suivantes
// =======================================
 
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 3000
 
// Duration of crossfade (seconds)
var crossFadeDuration = 3
 
// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below
 
Pic[0] = 'img/research/18.jpg'
Pic[1] = 'img/research/24.jpg'
 
// =======================================
// Ne rien éditer au-dessous de cette ligne
// =======================================
 
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
document.images.SlideShow.href = "http://www.domaine .ch?id=re&page=preLoad[j]"
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}
//-->
</script>

**pierrot10** · 25/06/2007, 16h45

merci space Frog. Mais le truc c'est que chaque image a un lien différent.
La variable "page" doit avoir la valeur de pic[j] qui est deéfini dans la fonction

**SpaceFrog** · 25/06/2007, 16h48

et ?

Code :

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

1
2
3
4
5
 
var ImgLink=document.createElement('a');
ImgLink.href=cequetuveux;
ImgLink.Style.textDecoration='none'
ImgLink.appendChild(TonImage)

**E.Bzz** · 25/06/2007, 16h51

...

Code :

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

cequetuveux = pic[j];

A+

**pierrot10** · 25/06/2007, 16h57

Hello tous merci pour vos reponse,
J'ai adapter donc comme ceci, mais bon evidemment ca couince.

Poure etre franc, chais pas trop ou mettre ce code que vous m'avez donné, j'hésitais a le mettre au tout debut de la fonction , mais finalement je l'ai plus bas (voir code ci-dessous)

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
<script>
<!--
 
// Changer les variables suivantes
// =======================================
 
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 3000
 
// Duration of crossfade (seconds)
var crossFadeDuration = 3
 
// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below
 
Pic[0] = '18'
Pic[1] = '24'
 
// =======================================
// Ne rien éditer au-dessous de cette ligne
// =======================================
 
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 = "img/research/"+Pic[i]+".jpg"
}
 
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
 
var ImgLink=document.createElement('a');
ImgLink.href="http://www.domaine.ch?id=trt&pahe="+preLoad[j]
ImgLink.Style.textDecoration='none'
ImgLink.appendChild(SlideShow)
 
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}
//-->
</script>

A savoir SlideShow= <img name="SlideShow" src="/>

**SpaceFrog** · 25/06/2007, 17h02

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
<script>
<!--
 
// Changer les variables suivantes
// =======================================
 
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 3000
 
// Duration of crossfade (seconds)
var crossFadeDuration = 3
 
// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below
 
Pic[0] = 'img/research/18.jpg'
Pic[1] = 'img/research/24.jpg'
 
// =======================================
// Ne rien éditer au-dessous de cette ligne
// =======================================
 
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
var ImgLink=document.createElement('a');
ImgLink.href="http://www.domaine.ch?id=trt&pahe="+preLoad[j]
ImgLink.Style.textDecoration='none'
ImgLink.appendChild(document.images.SlideShow)
 
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}
//-->
</script>

**pierrot10** · 25/06/2007, 17h07

Merci space frog,

Je m'excuse mais entre temps j'ai du modifier le code et j'ai corrige en suivant ton dernier post

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
<script>
<!--
 
// Changer les variables suivantes
// =======================================
 
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 3000
 
// Duration of crossfade (seconds)
var crossFadeDuration = 3
 
// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below
 
Pic[0] = '18'
Pic[1] = '24'
 
// =======================================
// Ne rien éditer au-dessous de cette ligne
// =======================================
 
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 = "img/research/"+Pic[i]+".jpg"
}
 
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
 
var ImgLink=document.createElement('a');
ImgLink.href="http://www.domaine.ch?id=trt&page="+preLoad[j]
ImgLink.Style.textDecoration='none'
ImgLink.appendChild(document.images.SlideShow)
 
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}
//-->
</script>

Ca marche toujours pas. Mais ex ce que mes modification ne sont pas érronées?

J'ai modifi les valeur de pic[] et preLoad[i].src

**SpaceFrog** · 25/06/2007, 17h09

on peut voir le code html de la balise img ?

à mon avis mieux vaudrait passer par un id ...

**pierrot10** · 25/06/2007, 17h12

Voila, pour le moment il y a un onClick, mais il supprimer puisqu'il y a

Code :

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

t = setTimeout('runSlideShow()', slideShowSpeed)

Qui va lui faire les alternance

Voila le code de mon image

Code :

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

1
2
3
4
5
  <div id="slogan"> 
   <div class="slogan-title">Research quick access </div>
   <div class="slogan-picture"><img name="SlideShow" src="img/research/24.jpg" alt="home" /></div>
   <div class="slogan-next"><a href="#" onclick="javascript:runSlideShow();">next</a></div>
  </div>

**SpaceFrog** · 25/06/2007, 17h20

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
<script>
<!--
 
// Changer les variables suivantes
// =======================================
 
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 3000
 
// Duration of crossfade (seconds)
var crossFadeDuration = 3
 
// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below
 
Pic[0] = '18'
Pic[1] = '24'
 
// =======================================
// Ne rien éditer au-dessous de cette ligne
// =======================================
 
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 = "img/research/"+Pic[i]+".jpg"
}
var ImgLink=document.createElement('a');
var ImgLink.id='LienImage'
ImgLink.Style.textDecoration='none'
ImgLink.appendChild(document.getElementById('SlideShow')
 
 
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.getElementById('SlideShow').src = preLoad[j].src
Document.getElementById('LienImage').href="http://www.domaine.ch?id=trt&page="+preLoad[j]
 
 
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}
//-->
</script>

avec

Code :

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

<div class="slogan-picture"><img name="SlideShow" id='SlideShow' src="img/research/24.jpg" alt="home" /></div>

**pierrot10** · 25/06/2007, 17h38

RE, je pense qu'on est pas loin,

FF me renvoi ce message d'erreur

Code :

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

1
2
missing ; before statement
[Break on this error] var ImgLink.id='LienImage';\n

pourtant y a bien un ";"

**E.Bzz** · 25/06/2007, 17h44

"before", ça veut dire "avant" ==> c'est dans le for {} précédent qu'il manque les ";" en fin d'instruction

A+

EDIT : d'ailleurs y en a pas beaucoup des ";" dans ton code.
Toute instruction JS doit se terminer par ";" => à corriger dans tout le code ...

**pierrot10** · 25/06/2007, 17h55

je m'excuse de continuer a vous casser les pied, mais j'ai mis de ";" partout il faut et j'ai toujours ce proble. Je vois ou il manque.
Voici le code corrigé

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
<script>
<!--
 
// Changer les variables suivantes
// =======================================
 
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 3000;
 
// Duration of crossfade (seconds)
var crossFadeDuration = 3;
 
// Specify the image files
var Pic = new Array(); // don't touch this
// to add more images, just continue
// the pattern, adding to the array below
 
Pic[0] = '18';
Pic[1] = '24';
 
// =======================================
// Ne rien éditer au-dessous de cette ligne
// =======================================
 
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 = 'img/research/'+Pic[i]+'.jpg';
}
var ImgLink=document.createElement('a');
var ImgLink.id='LienImage';
ImgLink.style.textDecoration='none';
ImgLink.appendChild(document.getElementById('SlideShow'));
 
 
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.getElementById('SlideShow').src = preLoad[j].src;
document.getElementById('LienImage').href="http://www.domaine.ch?id=trt&page="+preLoad[j];
 
 
if (document.all){
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p-1)) j=0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
//-->
</script>

Code :

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

<body onload="dimDiv();runSlideShow();">

**E.Bzz** · 25/06/2007, 18h12

Le pb ne peut-il pas venir de ta fonction dimDiv() non décrite ici ?

A+

**pierrot10** · 25/06/2007, 18h14

Non, je ne crois pas, car il m'a jamias causer de probleme, et je ne l'ai pas touchée depuis perpet
PS, j'ai enlever la fonction dimDiv, et le prob est toujours la

**E.Bzz** · 25/06/2007, 18h31

Envoyé par pierrot10

Non, je ne crois pas, car il m'a jamias causer de probleme, et je ne l'ai pas touchée depuis perpet
PS, j'ai enlever la fonction dimDiv, et le prob est toujours la

OK !
Mais le message d'erreur est-il exactement le même ?

**pierrot10** · 25/06/2007, 18h32

oui exactement le même

Comment faire pour que mon image devienne un lien

JavaScript

Discussions similaires

Partager

Partager