Comment faire pour que mon image devienne un lien

Version imprimable

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

25/06/2007, 18h37
E.Bzz

Citation:

Envoyé par pierrot10

oui exactement le même

Ben vérifie si tu prends bien la version modifiée (pb de cache), sinon, je sèche :oops:

SpaceFrog en saura sûrement plus ...

A+

hem hem desolé ... j'ai la tête ailleurs en ce moment ...
Code:

1 2 3 var ImgLink=document.createElement('a'); ImgLink.id='LienImage' ImgLink.style.textDecoration='none'

J'aimerai savoir sie ntre temps tu pourrais aussi m'aider pour un truc en rapport avec mon probleme

Donc dessous
Code:

1 2 3 4 5 <div id="slogan"> <div class="slogan-title">Research quick access </div> <div class="slogan-picture"><img name="SlideShow" id='SlideShow' src="img/research/24.jpg" alt="home" /></div> <div class="slogan-next" id="textShow"></div> </div>
A la place de next dans la class "slogan-text", j'aimerai faire afficher le titre des image (en fait ca sera le nom du lien)

J'ai donc ajouter ceci
Code:

1 2 3 4 5 6 7 8 9 10 11 12 Pic[0] = '18' Pic[1] = '24' Pic[2] = '30' Pictxt[0] ='Sensors development for water content measuring in soil' Pictxt[1] ='Evaporation from porous media' Pictxt[2] ='Analyzing the triggering of landslides using Self-Organized Criticality (SOC)' // ======================================= // Ne rien éditer au-dessous de cette ligne // =======================================
Comment pourrais ajouter dans mon code, pour que dans le div avec l'ID="TextShow", la valeur de Pictxt[0] soit affiché quand l'image egal à pic[0] est affichée

et ainsi de suite, quand Pictxt[1] s'affiche Pi[2] s'affiche, etc

Salut spacFrog,
Ben'est toujours pas bon , snifg

Voici comment j'ai corrigé ton code

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
<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'
Pic[2] = '30'
 
//Pictxt[0] ='Sensors development for water content measuring in soil'
//Pictxt[1] ='Evaporation from porous media'
//Pictxt[2] ='Analyzing the triggering of landslides using Self-Organized Criticality (SOC)'
 
// =======================================
// 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');
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>

Message d'erreur

Citation:

document.getElementById("LienImage") has no properties
[Break on this error] document.getElementById('LienImage').href="http://www.domaine.ch?id=trt&page="+p...

Code:

1
2
3
4
5
<div id="slogan"> 
   <div class="slogan-title">Research quick access </div>
   <div class="slogan-picture" id='container'><img name="SlideShow" id='SlideShow' src="img/research/24.jpg" alt="home" /></div>
   <div class="slogan-next" id="textShow"></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
59
60
<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');
ImgLink.id='LienImage';
ImgLink.href='#'
ImgLink.style.textDecoration='none';
ImgLink.appendChild(document.getElementById('SlideShow'));
document.getElementById('container').appendChild(ImgLink)
 
 
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>

25/06/2007, 19h14
E.Bzz

Citation:

Envoyé par pierrot10

J'aimerai savoir sie ntre temps tu pourrais aussi m'aider pour un truc en rapport avec mon probleme

Du coup je laisse finir SpaceFrog, sinon, je risque de casser sa dernière MAJ :mrgreen:

A+

merci eBizz.

Space frog,
tu va t'enervé mais ca ne marche toujours pas :oops:

J'ai exactement ce que tu m'as donné, j'ai aussi ajouter l'id=container dans le div qui contien l'image

Voici le message d'erreur

Citation:

uncaught exception: [Exception... "Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMHTMLAnchorElement.appendChild]" nsresult: "0x80004003 (NS_ERROR_INVALID_POINTER)" location: "JS frame :: http://www.doamine.ch/index.php?jds=dd&page :: <TOP_LEVEL> :: line 65" data: no]
[Break on this error] undefined
document.getElementById("LienImage") has no properties
[Break on this error] document.getElementById('LienImage').href="http://www.domaine.ch?id=trt&page="+p...

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
<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'
Pic[2] = '30'
 
//Pictxt[0] ='Sensors development for water content measuring in soil'
//Pictxt[1] ='Evaporation from porous media'
//Pictxt[2] ='Analyzing the triggering of landslides using Self-Organized Criticality (SOC)'
 
// =======================================
// 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');
ImgLink.id='LienImage';
ImgLink.href='#'
ImgLink.style.textDecoration='none';
ImgLink.appendChild(document.getElementById('SlideShow'));
document.getElementById('container').appendChild(ImgLink)
 
 
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:

1
2
3
4
5
  <div id="slogan"> 
   <div class="slogan-title">Research quick access </div>
   <div class="slogan-picture" id="container"><img name="SlideShow" id='SlideShow' src="img/research/24.jpg" alt="home" /></div>
   <div class="slogan-next"><a href="#" onclick="">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
59
60
61
62
<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 init(){
var ImgLink=document.createElement('a');
ImgLink.id='LienImage';
ImgLink.href='#'
ImgLink.style.textDecoration='none';
ImgLink.appendChild(document.getElementById('SlideShow'));
document.getElementById('container').appendChild(ImgLink)
 }
 
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="init();dimDiv();runSlideShow();">

desolé je travaill sans tester le code je n'ai pas le reste du code ni les images ???

25/06/2007, 19h34
SpaceFrog

sinon mets en dur la balise a autour de l'image et file lui un id
25/06/2007, 19h45
pierrot10

ok, space frog,
ca va VACHEMENT mieux.
y a encore un tout petit problem et une derniere question

Le lien fonctionne mais dans mon URL

le preload[j] de:

Code:

document.getElementById('LienImage').href="http://www.domaine.ch?id=trt&page="+preLoad[j];

me retourne:

Code:

http://www.domaine.ch?id=trt&page=[object%20HTMLImageElement]

il devrait me retourner soit 318 ou 24

j'ai essayé ceci mais sans succès

Code:

document.images.SlideShow.border= 0;

ET ma derniere question

Comment puis je supprimer le border de l'image quand y a le lien sur cette dernier

Encore mille merci pour ton suivi, j'aurais jamais pu me debrouiller seul
25/06/2007, 19h52
SpaceFrog

Code:

preLoad[j]

est une image

si tu veux faire le lien vers l'image c'est

Code:

preLoad[j].src
25/06/2007, 20h07
pierrot10

Salut spaceFrog,
c'est bon j'ai résolu les proble (border plus lien)
Pour le lien j'ai fait comme ceci

J'ai ajouter ceci

Code:

preLoad[i].txt = Pic[i]

et

Code:

document.getElementById('LienImage').href="http://www.domaine.ch?id=trt&page="+preLoad[j].txt;

chais pas si c'est propre mais ca marche. Mille merci en tout cas pour ton ton suivi et tes reponse ainsi qu'au autre qui y ont participer
25/06/2007, 20h11
SpaceFrog

oui mais c'est se compliquer la vie ...

Code:

document.getElementById('LienImage').href="http://www.domaine.ch?id=trt&page="+Pic[j];

marcherait tout aussi bien ...

Spacefrog,
j'abuse toutalement je le reconnais :oops: et je me gene, mais j'aimerai savoir si tu pouvais encore m'aiguillé sur ce sujet, pour que je puisse rentrer à la maison ;)

J'aimerai encore ajouter du texte en dessous de la photo. Si tu veux encore me consacrer quelque minute, je te montre ce que j'ai deja fait.

Ca s'affiche pas...

j'ai ajouté ceci:

Code:

1
2
3
4
5
var PicTxt = new Array()
 
PicTxt[0] ='Sensors development for water content measuring in soil'
PicTxt[1] ='Evaporation from porous media'
PicTxt[2] ='Analyzing the triggering of landslides using Self-Organized Criticality (SOC)'

et encore ceci

Code:

preload[i].title = PicTxt[i]

et finalement ceci:

Code:

document.getElementById('sloganTexte').write = preLoad[j].title

et tout derniere

Code:

1
2
3
4
5
  <div id="slogan"> 
   <div class="slogan-title">Research quick access </div>
   <div class="slogan-picture" id="container"><img name="SlideShow" id='SlideShow' src="img/research/24.jpg" alt="home" /></div>
   <div class="slogan-next" id="sloganTexte"></div>
  </div>

le document.getElementById('sloganTexte').write = preLoad[j].title n'affiche pas les valeur de PicTxt[]

Voici tout le code au complet

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
<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'
Pic[2] = '30'

var PicTxt = new Array()

PicTxt[0] ='Sensors development for water content measuring in soil'
PicTxt[1] ='Evaporation from porous media'
PicTxt[2] ='Analyzing the triggering of landslides using Self-Organized Criticality (SOC)'
 
// =======================================
// 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'
preLoad[i].txt = Pic[i]
preload[i].title = PicTxt[i]
}


function init(){
var ImgLink=document.createElement('a');
ImgLink.id='LienImage';
ImgLink.href='#'
ImgLink.style.textDecoration='none';
ImgLink.appendChild(document.getElementById('SlideShow'));
document.getElementById('container').appendChild(ImgLink)
 }
 
function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.style.border=0;
document.images.SlideShow.filters.blendTrans.Apply();
}
document.getElementById('SlideShow').src = preLoad[j].src;
document.getElementById('sloganTexte').write = preLoad[j].title
document.getElementById('LienImage').href='http://www.doamine.ch?dep=research&&actived=d&&id='+preLoad[j].txt;
 
 
if (document.all){
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p-1)) j=0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
//-->
</script>

J'ai fait forcément un petit bug 8O

25/06/2007, 20h19
pierrot10

Ha ben ouim, c'est ce compliquer la vie :P :?
25/06/2007, 20h20
SpaceFrog

Code:

document.getElementById('sloganTexte').innerHTML = preLoad[j].title
25/06/2007, 20h32
pierrot10

EXCELLENT,
Je te remercie pleinement pour le temps que tu as passé et pour ta patience
Te souhaite une excellente soiré

Merci, Danke shone, gracia thank, aligato... :lol:
25/06/2007, 20h45
SpaceFrog

Oui enfin ceci étant il y avait beaucoup plus simple en mettant la balsie a en dur ...
Mais bon ça fonctionne c'est l'essentiel ...
25/06/2007, 20h49
pierrot10

oui, j'en doute pas, mais ceci m'a fait un super bon exercie, n'étant que novice Javascript.
Un truc de plus.. :D
:king:

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