modifier une source javascript

Version imprimable

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

21/01/2009, 10h45
le_chomeur

es tu sur que var imageACharger = document.getElementById("idImage");
existe au moment de l'appel ??

cette ligne ne se trouverais pas dans la balise head par hasard ?

j'aurais fait comme ceci :

Code:

1
2
3
4
5
6
7
 
	<body onload="initPage()">
 
	<div style="width:500px;height:500px;line-height:500px;text-align:center;border:2px solid #ccc">
		<img src="imgpardefaut.jpg" id="imgToChange" />
	</div>	
	<div id="montext"></div>

puis le code javascript :

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
 
var imageACharger = null;
var tentatives = 0;
 
function initPage()
{
	imageACharger = document.getElementById("imgToChange");
	if (imageACharger!=null)
		attenteChargeImage();
} 
 
 
 
function attenteChargeImage()
{    
  if (imageACharger.complete) // si l'image est chargée...
  {
	// si l'image à charger on affecte à l'événement onmouseover la fonction change()
	imageACharger.onmouseover = function(){change('img1grand.jpg','le super texte que je veux')};
  }
  else // sinon on réexécute la fonction...
  { 
    tentatives++;
    // on fait 10 tentatives (10 secondes)
    if (tentatives<=10)
    {
      setTimeout("attenteChargeImage()","1000"); // nouvelle tentative
    }
    else
    {
      // action à faire en cas d'échec 
    }
  }
}
 
function change(urlImg,letexte)
{
	document.getElementById('imgToChange').src = urlImg;
	fade(0,100,document.getElementById('imgToChange'));
	document.getElementById('montext').innerHTML = letexte;
}
 
function fade(start, end, objectToFade)
{
	var IsIE=!!document.all;
	if (start == end) 
	{
		return false;
	}
 
	objectToFade.style.display = "block";
	IsIE ? objectToFade.filters[0].opacity = start : objectToFade.style.opacity = start / 100;
	start >= end ? start -= 5 : start += 5;
 
	var temp = this;
	clearTimeout(objectToFade.timer);
	if (start != end) 
	{
		objectToFade.timer = setTimeout(function()
		{
			temp.fade(start, end, objectToFade);
		}, 35);
	}
	else 
	{
		clearTimeout(objectToFade.timer);
	}
}

Lors du onload de la page la fonction initPage() est exécutée et appelle la fonction attenteChargeImage() qui se charge d'attendre le chargement de l'image avant de lui affecter la fonction change() sur l'événement onmouseover.
J'ai augmenté le nombre de tentatives : je suis passé de 5 à 10.

Je ne sais pas si c'est ce que tu souhaites :?
Il y a sans doute plus simple.

sinon un exemple imagé sur le load :

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
 
<!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 nom</title>
<style>
a:hover{
	background-image:tonurl;
}
a:selected{
	background-image:tonurl;
}
a:{
	text-decoration:none;
}
</style>
<script type="text/javascript">
 
function loadIt(theImage) {
    document.images[0].src = theImage
	verif(document.images[0]);
}
 
function verif(img) {
	if(img.complete)
		alert("chargé");
	else
		setTimeout(function() {verif(img);}, 500);
}
</script>
</head>
 
<body>
<IMG SRC="" width="120" height="90" onLoad="">
<FORM>
<INPUT TYPE="button" VALUE="grosse image" onClick="loadIt('http://www.paris-360.com/admin/upload/tuilerie_neige hd.jpg')">
</FORM>
 
</body>
</html>

exemple ultra simple montrant le fonctionnement du complete, on peut ajouter une gestion des erreurs etc ... si besoins je post un exemple plus complet :)

Mouais... de toute manière :
Code:

1 2 3 4 5 6 7 8 9 function attenteChargeImage() { if (imageACharger.complete) // si l'image est chargée... { var img = 'imgToChange'; img.onload = function(){ alert('Image chargé'); } img.src = 'monImage.jpg';
risque pas de marcher... tu appliques l'événement onload sur un objet qui n'est pas une image mais une chaine de caractères...

21/01/2009, 17h01
idamarco

Merci pour vos réponses.

Pour l'instant, je n'arrive pas à le faire fonctionner.
Il doit y avoir un chbinz quelque part.
Je réessaie plus tard.
21/01/2009, 21h22
idamarco
Re coucou,

En fait, il y a quelque chose qui m'échappe.
Je mettais le code suivant dans la page php et le voici dans le javascript.
:D
Code:

1 2 ('img1grand.jpg','le super texte que je veux')
Du coup, je suis largué.
Primo, j'ai intégré le code dans des balises tableaux, secundo, j'ai un include pour l'entete.
Modifier le BODY c'est donc modifier l'include, j'espère que cela marche aussi dans ce cas.
En bref, retravailler le tout c'est bcp de taf dans mon contexte et avec mes maigres connaissances
A moins que quelque chose m'échappe, cela implique tout rebidouiller.
N'y a t il pas moyen avec la base sur laquelle nous travaillions d'intègrer le prelaod?
21/01/2009, 22h24
Auteur
Citation:
Envoyé par idamarco

Re coucou,

En fait, il y a quelque chose qui m'échappe.
Je mettais le code suivant dans la page php et le voici dans le javascript.
:D

Code:

1 2 ('img1grand.jpg','le super texte que je veux')
du code javascript placé dans ton code PHP, il ne reste que ce bout de code 8O ? Si c'est le cas il y a en effet un problème :aie:
21/01/2009, 22h51
idamarco

:D

Ce que je veux dire, c'est que ce bout de code était dans le php.
Au tant de fois qu'il y avait d'images et cela entre des balises <TR> et <TD> à profusion.
De le retourver dans le javascript implique que je dois tout modifier.
Je me trompe?
22/01/2009, 10h44
Auteur

tu peux nous montrer tout le code généré car là j'ai un peu de mal à suivre :aie:

Hello!

Voilà, j'espère ne rien avoir oublié.

include_entete.php contient:

Code:

<script type="text/javascript" src="js/pub_index.js"></script>

code de la page utilisant le java:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<a href="prestige_conseils.php" title="Conseils">	
	<img src="./images/divers/conseil.png" id="imgToChange" /></a>
		<div id="montext"></div>
		</td>
 
      <td style="height: 500px; width: 100%; vertical-align: top;">
 
 
 
	        <table style="text-align: left; eight: 500px; width: 500px;"
			border="0" cellpadding="2" cellspacing="2">
			<tbody>
			<tr>
 
            <td style="vertical-align: top; text-align: center; height: 96px;"><BR>
			<a href="prestige_requetelisteurl.php?categorie1=rent&ville="><img src="./images/mini/rent.png" onmouseover="change('./images/javaminibig/rent.jpg','')" onmouseout="change('./images/divers/conseil.png','')" /></a>
			<small><?php echo TXT_RENT; ?></small></td>
 
            <td style="vertical-align: top; text-align: center; height: 96px;"><BR>
			<a href="prestige_requetelisteurl.php?categorie1=buy&ville="><img src="./images/mini/buy.png" onmouseover="change('./images/javaminibig/buy.jpg','')" onmouseout="change('./images/divers/conseil.png','')" /></a>
			<small><?php echo TXT_BUY; ?></small></td>

Le java pub_index.js:

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
 
img.src = 'monImage.jpg';		
		function fade(start, end, objectToFade){
				var IsIE=!!document.all;
				if (start == end) {
					return false
				}
				objectToFade.style.display = "block";
				IsIE ? objectToFade.filters[0].opacity = start : objectToFade.style.opacity = start / 100;
				start >= end ? start -= 5 : start += 5;
 
				var temp = this;
				clearTimeout(objectToFade.timer);
				if (start != end) {
					objectToFade.timer = setTimeout(function(){
						temp.fade(start, end, objectToFade);
					}, 35);
				}
				else {
					clearTimeout(objectToFade.timer);
				}
			}
			function change(urlImg,letexte){
				document.getElementById('imgToChange').src = urlImg;
fade(0,100,document.getElementById('imgToChange'));
document.getElementById('montext').innerHTML = letexte;
 
			}

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