modification dynamique code html

Version imprimable

09/10/2006, 16h09
xtendance

modification dynamique 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

Merci pour toute l'aide que vous pourrez m'apporter
09/10/2006, 16h15
Bisûnûrs

Apparition progressive d'une image

Merci, pour ce coup de pouce.

J'ai encor un petit souci que je ne m'explique pas il y a que la premère image qui apparai en fondue pour les autre apparament le script ne s'aplique pas.

Voici ce que j'ai :

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
 
 
 
<!-- 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()
{
 
 
mainimage.src = list.options[list.selectedIndex].value;
 opac(mainimage.src);
}
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" id="mainimage.src" style="-moz-opacity:0">/home/xavier/Images/wallpaper/angelina_jolie_062.jpg</option>	
 
 
 
		<option value="/home/xavier/Images/wallpaper/angelina_jolie_065.jpg" id="mainimage.src" style="-moz-opacity:0">/home/xavier/Images/wallpaper/angelina_jolie_062.jpg</option>
 
		<option value="/home/xavier/Images/wallpaper/angelina_jolie_073.jpg" id="mainimage.src" style="-moz-opacity:0">/home/xavier/Images/wallpaper/angelina_jolie_073.jpg</option>
 
		<option value="/home/xavier/Images/wallpaper/angelina_jolie_110.jpg" id="mainimage.src" style="-moz-opacity:0">/home/xavier/Images/wallpaper/angelina_jolie_084.jpg</option>
 
	</select>
 
<input type="button" value="Next" onclick="javascript:nextImage()">
</div>
</body>

Merci d'avance pour vos lumière! :D

ReBonjour,

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: