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