utilisation de l'objet getElementTagName

Version imprimable

10/06/2006, 16h19
shintoisme

utilisation de l'objet getElementTagName

salut tout le monde et bon foot
voila j'ai creer une page web avec des images et je voudrais leur mettre une opacity quand ont survoles mes images. Pour eviter de mettre a chaque balise

Code:

<img onmouseover="javascript:style.filter='Alpha(Opacity=60)';" onmouseout="javascript:style.filter='Alpha(Opacity=100)';"/>

sous firefox avec le css et "img:hover" ca marche mais pas sous Iexplorer
j'ai vue qu 'un objet en javascript pouvais le faire mais je comprend pas
cette objet
si jai bien compris il recupere le nom des balises pour moi cest les <img>
et apres je vois pas comment faire
si quelqu'un peu m'aider a comprendre comment elle fonctionne ca serais cool:mouarf:
je debute en javascript
MERCI:):
10/06/2006, 17h18
FremyCompany

...onmouseout="this.style...
10/06/2006, 21h16
Eric Berger

Avec internet explorer, il faut utiliser la propriété filter

Code:

filter: alpha(opacity=60)
10/06/2006, 22h47
shintoisme

oui je sais mais je veux que tout mes balises <img /> sois avec cette opacity
sans a chaque fois me taper tout le texte
et pour une lecture du code html plus simple
en javascript j'ai trouver cette objet getElementByTagName(); qui permet a une balise precis d'avoir un style
exemple pour toutes les balises <img /> de la page avoir ce style
mais j'arrive pas a savoir comment l'utiliser
merci de m'aider
10/06/2006, 23h02
Eric Berger

ok, j'ai compris... sorry j'étais à côté.
C'est pas des plus propres, mais en encapsulant dans une balise <a> tu peux te servir de l'état hover sur IE.
10/06/2006, 23h12
shintoisme

ouai biensur jai penser aussi
mais j'aimerais comprendre cette objet comment l'utiliser
je trouve pas de truc ou sinon je comprend pas comment elle fonctionne meme avec des exemples
10/06/2006, 23h15
Eric Berger

Ok, ben désolé, là je ne peux pas t'aider, tu peux éventuellement me donner un lien vers la doc et les exemples de cet objet, j'irai jeter un coup d'oeil...
10/06/2006, 23h26
shintoisme

http://nyams.planbweb.com/tutorial/dom/06/
voila un lien
et un autre
http://www.ibilab.net/webdev/article...ytagname-3.htm
merci de m'aider Eric;)

C'est getElementByTagName qui te pose un problème?
Si c'est le cas, tu pourrais l'utiliser comme ça:

Premère fonction déclanchée sur événement onload de ton body
Code:

1 2 3 4 5 6 7 function initOpacity(){ pics = document.getElementsByTagName("img"); for(i = 0;i < pics.length; i++){ pics[i].onmouseover = "overImg(this)"; pics[i].onmouseout = "outImg(this)"; } }
fonction déclanchée lorsque le pointeur passe sur une image:
Code:

1 2 3 4 funtion overImg(obj){ obj.style.filter = "alpha(opacity=60)"; obj.style.opacity = 0.6; }
Et enfin lorsque le curseur sort d'une image:
Code:

1 2 3 4 funtion outImg(obj){ obj.style.filter = "alpha(opacity=100)"; obj.style.opacity = 1; }
J'ai pas testé, y'a peut-être un p'tit bug, mais le principe devrait fonctionner. Dis-moi si c'est ce que tu voulais, et si ça fonctionne.

11/06/2006, 16h45
shintoisme

merci d'avoir vu ca hier soir c'est cool:lol:
mais ca ne marche pas :cry:
sur les deux function tu as oublier un "c" mais bon pas grave
tester avec onload="initOpacity"(); dans body marche pas aucun effet sur les images:(
et si cest pas trop demander tu peux m'expliquer en detail les fonction que tu as faite pour comprendre ce que j'ecris
merci
11/06/2006, 18h35
Eric Berger

déjà t'as une petite erreur de guillemets:

Code:

onload="initOpacity"();

qui devrait être:

Code:

onload="initOpacity();"

Si c'est écrit comme ça dans ton code, ça expliquerait pourquoi ça ne fonctionne pas.

Sinon pour les fonctions, initOpacity() va parcourir toutes les images de la page pour assigner à leurs événements onmouseover et onmouseout, les fonctions correspondantes. Les fonctions overImg et outImg modifient l'opacité de l'objet qui a appelé la fonction.

En fait, ça fait la même chose que le code que tu donnais au départ:

Code:

<img onmouseover="javascript:style.filter='Alpha(Opacity=60)';" onmouseout="javascript:style.filter='Alpha(Opacity=100)';"/>

Mais en utilisant le DOM (Document Object Modell) pour en modifier les propriétés.
Pour bien comprendre le tout, il faut savoir que le navigateur lit le code html et en fait un arbre d'objets. Dès lors, il est inutile de modifier le code html, pour agir sur la page, il faut modifier cet arbre qui est le DOM.

voila en faite cetait une erreur de ma part pour les ""
Mais ca ne marche toujours pas:cry:
voila mon code html

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
 
<!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>????</title>
<script type="text/javascript" language="javascript">
 
function initOpacity(){
  pics = document.getElementsByTagName("img");
  for(i = 0;i < pics.length; i++){
    pics[i].onmouseover = "overImg(this)";
    pics[i].onmouseout = "outImg(this)";
  }
}
 
function overImg(obj){
  obj.style.filter = "alpha(opacity=60)";
  obj.style.opacity = 0.6;
}
 
function outImg(obj){
  obj.style.filter = "alpha(opacity=100)";
  obj.style.opacity = 1;
}
</script>
</head>
 
<body onLoad="initOpacity();">
 
<img src="harry-und-piru.jpg" alt="Harry und Piru" title="Harry und Piru" width="300" height="225" />
<img src="blue-eye.jpg" alt="Blue eye"  title="Blue eye" width="300" height="225" />
<img src="pepino.jpg" alt="Pepino"  title="Pepino" width="300" height="225" />
 
</body>
</html>

Bon ben voilà, ça fonctionne...
essaie de comprendre comment tout ça fonctionne (cf mon précédent message).

Et n'oublie pas de mettre le status résolu ;)

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
<!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>????</title>
<script type="text/javaScript" language="javaScript">
 
function initOpacity(){
  pics = document.getElementsByTagName("img");
  for(i = 0;i < pics.length; i++){
    pics[i].onmouseover = overImg;
    pics[i].onmouseout = outImg;
  }
}
 
function overImg(){
  this.style.filter = "alpha(opacity=60)";
  this.style.opacity = 0.6;
}
 
function outImg(){
  this.style.filter = "alpha(opacity=100)";
  this.style.opacity = 1;
}
</script>
</head>
 
<body onLoad="initOpacity();">
 
<img src="harry-und-piru.jpg" alt="Harry und Piru" title="Harry und Piru" width="300" height="225" />
<img src="blue-eye.jpg" alt="Blue eye"  title="Blue eye" width="300" height="225" />
<img src="pepino.jpg" alt="Pepino"  title="Pepino" width="300" height="225" />
 
</body>
</html>

11/06/2006, 21h53
shintoisme

merci tu es le meilleure
ca marche impecable
je pourrais faire ca avec d'autre balise
:yaisse2: :lahola: :resolu: :hola: