Modification dynamique de code html

**xtendance** · 09/10/2006, 14h56

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

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

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

**Matthieu2000** · 10/10/2006, 11h33

en changeant un peu l'ordre...

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

}

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

J'ai essayer mais cela ne fonctionne pas!

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!

Modification dynamique de code html

JavaScript

Discussions similaires

Partager

Partager