modification dynamique code html

**xtendance** · 09/10/2006, 16h09

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

**Bisûnûrs** · 09/10/2006, 16h15

Apparition progressive d'une image

**xtendance** · 09/10/2006, 18h02

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 :

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

**xtendance** · 10/10/2006, 11h09

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 :

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

modification dynamique code html

JavaScript

Discussions similaires

Partager

Partager