utilisation de l'objet getElementTagName

**shintoisme** · 10/06/2006, 16h19

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<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

je debute en javascript
MERCI

:

**FremyCompany** · 10/06/2006, 17h18

...onmouseout="this.style...

**Eric Berger** · 10/06/2006, 21h16

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

filter: alpha(opacity=60)

**shintoisme** · 10/06/2006, 22h47

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

**Eric Berger** · 10/06/2006, 23h02

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.

**shintoisme** · 10/06/2006, 23h12

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

**Eric Berger** · 10/06/2006, 23h15

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

**shintoisme** · 10/06/2006, 23h26

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

**Eric Berger** · 10/06/2006, 23h52

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**shintoisme** · 11/06/2006, 16h45

merci d'avoir vu ca hier soir c'est cool

mais ca ne marche pas

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

**Eric Berger** · 11/06/2006, 18h35

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onload="initOpacity"();

qui devrait être:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**shintoisme** · 11/06/2006, 19h53

voila en faite cetait une erreur de ma part pour les ""
Mais ca ne marche toujours pas

voila mon code html

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

**Eric Berger** · 11/06/2006, 21h29

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 :

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

**shintoisme** · 11/06/2006, 21h53

merci tu es le meilleure
ca marche impecable
je pourrais faire ca avec d'autre balise

utilisation de l'objet getElementTagName

JavaScript

Discussions similaires

Partager

Partager