Modification dynamique de code html

Version imprimable

09/10/2006, 14h56
xtendance

Modification dynamique de code html

Bonjour,

je voudrai savoir si il existe une fonction qui permet de modifier le contenu d'une page html, sans php.

En faite je désir visualiser une image, et quand je clic sur le bouton next, je désir appliquer un filtre alpha de plus en plus élevé, pour ensuite charger une autre image en lui appliquant le traitement inverse.

J'ai trouvé plusieur script mais, je n'arrive pas a les combiné, ni à les modifier correctement pour obtenir ce que je désir.

http://www.lecodejava.com/javaaalbum.html
http://www.lecodejava.com/javaagrowingimage.html

Car, tous les script sympa qui pourrai me convenir ne fonctionne pas puisque je suis sous linux, avec netscape :aie:

Merci pour toute l'aide que vous pourrez m'apporter

J'ai modifié mon script c'est deja beaucoup mieux, mais quand je passe à la photosuivant ou précédente le fondue n'est pas nette, la première seconde la photo est chargé sans filtre.

Voici ce que j'ai fait :

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
76
77
78
79
80
81
82
83
84
 
 
 
<!-- TROIS ETAPES D'INSTALLER   ALBUM PHOTO: -->
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT LANGUAGE="JavaScript">
 
var actif = setInterval("opac()",200);
var i = 0.99;
function opac() {
   if(i <= 0 ){
      window.clearInterval(actif);
   }
   document.getElementById('mainimage.src').style.MozOpacity=1-i; 
   i = i-0.1;
}
 
function changeImage()
{
 
 opac(mainimage.src);
mainimage.src = list.options[list.selectedIndex].value;
 
actif = setInterval("opac()",200);
i=0.99;
}
function prevImage()
{
	if(list.selectedIndex == 0)
	{
		list.selectedIndex = list.options.length-1;
	}
	else
	{
		list.selectedIndex--;
	}
	changeImage();
 
}
 
function nextImage()
{
	if(list.selectedIndex == list.options.length-1)
	{
		list.selectedIndex = 0;
	}
	else
	{
		list.selectedIndex++;
	}
	changeImage();
 
}
</script>
</HEAD>
 
<BODY onLoad="javascript:changeImage()">
 
<div align="center">
 
<img name="mainimage" border="1"  id="mainimage.src" style="-moz-opacity:0">
 
<br>
 
<input type="button" value="Back" onclick="javascript:prevImage()">
 
	<select id="list" onchange="javascript:changeImage()">
 
		<option value="/home/xavier/Images/wallpaper/angelina_jolie_061.jpg"></option>	
 
 
 
		<option value="/home/xavier/Images/wallpaper/angelina_jolie_065.jpg"></option>
 
		<option value="/home/xavier/Images/wallpaper/angelina_jolie_073.jpg"></option>
 
		<option value="/home/xavier/Images/wallpaper/angelina_jolie_110.jpg"></option>
 
	</select>
 
<input type="button" value="Next" onclick="javascript:nextImage()">
</div>
</body>

Pourriez vous m'aider a règle ce problème!?! :roll:

10/10/2006, 11h33
Matthieu2000

en changeant un peu l'ordre...

Citation:

function changeImage()
{
clearInterval(actif);
i=0.99;
mainimage.src = list.options[list.selectedIndex].value;
actif = setInterval("opac()",200);

}
10/10/2006, 11h55
xtendance

J'ai essayer mais cela ne fonctionne pas! :aie:

Merci, quand même! ;)

Je ne suis pas sur mais je croix que se vient de la balise <select> et <option>.

Car, lors du tous premier chargement quand je n'est encor clic sur rien le fondu ce fait bien c'est par la suite que cela ce corse!

Si quelqu'un a une idée lumineuse je suis preneur!