modifier une source javascript

**le_chomeur** · 21/01/2009, 11h45

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 ?

**Auteur** · 21/01/2009, 12h02

j'aurais fait comme ceci :

Code html :

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

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

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

**le_chomeur** · 21/01/2009, 12h18

sinon un exemple imagé sur le load :

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

**Bovino** · 21/01/2009, 13h08

Mouais... de toute manière :

Code :

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

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

**idamarco** · 21/01/2009, 18h01

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.

**idamarco** · 21/01/2009, 22h22

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.

Code :

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

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?

**Auteur** · 21/01/2009, 23h24

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.

Code :

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

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

? Si c'est le cas il y a en effet un problème

**idamarco** · 21/01/2009, 23h51

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?

**Auteur** · 22/01/2009, 11h44

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

**idamarco** · 22/01/2009, 12h24

Hello!

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

include_entete.php contient:

Code :

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

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

code de la page utilisant le java:

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

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

modifier une source javascript

JavaScript

Discussions similaires

Partager

Partager