Comment faire pour que mon image devienne un lien

Version imprimable

Voir 40 message(s) de cette discussion en une page

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

Citation:

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

Donc pour etre encore plus claire,

Citation:

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:

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>  </script>
Merci pour votre précieuse aide

25/06/2007, 16h31
Sancho_54

Ajoute l'attribut href dans ta balise img et comme ca ton image sera un lien
25/06/2007, 16h40
SpaceFrog

oulà href dasn une balise img ...:aie:

deux possibilités:

avec javascript

Code:

<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:

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

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

Code:

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

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
 
<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>

25/06/2007, 16h45
pierrot10

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

et ?

Code:

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

25/06/2007, 16h51
E.Bzz

...

Code:

cequetuveux = pic[j];

;)

A+

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:

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="/>

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
<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>

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:

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

25/06/2007, 17h09
SpaceFrog

on peut voir le code html de la balise img ?

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

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

Code:

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

Qui va lui faire les alternance

Voila le code de mon image
Code:

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>

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
<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:

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

25/06/2007, 17h38
pierrot10
RE, je pense qu'on est pas loin,

FF me renvoi ce message d'erreur
Code:

1 2 missing ; before statement [Break on this error] var ImgLink.id='LienImage';\n
pourtant y a bien un ";"
25/06/2007, 17h44
E.Bzz

"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 ...

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:

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:

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

25/06/2007, 18h12
E.Bzz

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

A+
25/06/2007, 18h14
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
25/06/2007, 18h31
E.Bzz

Citation:

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 ?
25/06/2007, 18h32
pierrot10

oui exactement le même

Voir 40 message(s) de cette discussion en une page