élément transparent tant qu'il n'est pas focus

**autocrator** · 04/07/2012, 10h29

bonjour tout le monde !

j'ai mis sur mon site une super image en fond. Mais j'ai un élément d'identification en plein milieu (et il faut que je le laisse là).

j'aurais aimé, mais je trouve pas la réponse à ma question, que cette élément soit transparent, à un degré plus ou moins fort, tant qu'il ne soit pas focus, pour que les utilisateurs puissent profiter de l'image.

merci d'avance !!!

**Torgar** · 04/07/2012, 10h36

Salut,

il faut que tu associes CSS et Javascript. Le CSS pour la transparence avec la propriété "opacity" et "filter alpha" pour IE. Et le Javascript pour gérer le focus.

Quelques pistes :

http://css.developpez.com/faq/?page=...ND_transparent

http://javascript.developpez.com/faq...her#FocusObjet

**bmartin** · 04/07/2012, 10h37

Salut il faut que tu joue sur une propriété css qui est : opacity/filter alpha

Code css :

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

1
2
3
 
opacity:0,5;
filter:alpha(opacity=50); /* pour IE8 et -*/

http://www.w3schools.com/css/css_image_transparency.asp

Après tu peux changer les propriétés sur le Focus

http://www.w3schools.com/cssref/sel_focus.asp

Bonne journée

**autocrator** · 04/07/2012, 10h38

merci pour ces réponses aussi rapide !!!

Par contre je n'arrive pas à activer ou désactiver l'opacité de la div ...

**autocrator** · 04/07/2012, 11h27

parce que je ne voit pas comment utiliser cette ligne ...

Code :

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

document.getElementById('id_objet').focus();

s'il faut mettre un égale ensuite ou si il faut modifié l'opacité dans les parenthèse du focus.

**Bovino** · 04/07/2012, 11h36

Si ton élément à mettre en transparence à l'id "identif" par exemple, il suffit de faire

Code :

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

1
2
3
4
5
6
#identif{
    opacity: 0.4;
}
#identif:focus{
    opacity: 1;
}

**autocrator** · 04/07/2012, 13h52

du coup il n'y a aucun script en javascript ?

**autocrator** · 04/07/2012, 13h56

ce code la ne fonctionne pas, lorsque je focus le div il n'y a aucune différence ...

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
<html><head></head><body>
 
<style type="text/css">
body{
	background-color: black;
 
}
#identif{
    opacity: 0.4;
}
#identif:focus{
    opacity: 1;
}
#transbox
  {
  width:400px;
  height:180px;
  margin:30px 50px;
  background-color:blue;
  border:1px solid black;
   opacity:0.6;
  filter:alpha(opacity=10); /* For IE8 and earlier */
	}
#transbox:focus{
  width:400px;
  height:180px;
  margin:30px 50px;
  background-color:blue;
  border:1px solid black;
  opacity:1;
}
</style>
<body>
<div id="transbox">
 
 
</div>
</body>

**Bovino** · 04/07/2012, 14h08

Bien que ce soit théoriquement possible, le focus sur une div, c'est pas évident

Passes par :hover

**autocrator** · 04/07/2012, 14h17

ça ne fonctionne pas non plus.
je dois surement mal codé ....

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
#transbox
  {
  width:400px;
  height:180px;
  margin:30px 50px;
  background-color:blue;
  border:1px solid black;
   opacity:0.6;
  filter:alpha(opacity=10); /* For IE8 and earlier */
	}
#transbox:hover{
  width:400px;
  height:180px;
  margin:30px 50px;
  background-color:blue;
  border:1px solid black;
  opacity:1;
  filter:alpha(opacity=100);
}

**Bovino** · 04/07/2012, 14h29

Bah...

Code html :

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>Focus</title>
	<style>
                #identif{
                        margin: 25px;
                        width: 400px;
                        height: 300px;
                        background-color: silver;
                        opacity: 0.4;
                }
                #identif:hover{
                        opacity: 1;
                }
        </style>
</head>
<body>
	<div id="identif" onclick="this.focus()">
		<input />
	</div>
</body>
</html>

fonctionne correctement...

**autocrator** · 04/07/2012, 14h38

dans ces cas là çà doit être mon browser qui ne va pas.
IE6...

**Bovino** · 04/07/2012, 14h44

Ah ben oui, c'est sûr...
Même Microsoft demande de ne plus utiliser IE6...

**bmartin** · 04/07/2012, 14h44

Pour ie 6 il faut que tu utilise :

Code css :

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

filter:alpha(opacity=50);

car il connait l'attribut opacity qu'a partir de la version 9

Ah oui sinon pour utiliser opacity avec ie6 il faut apparemment que l'élément ai une position absolute ou une taile fixe ...

**Bovino** · 04/07/2012, 14h45

Non, c'est plus compliqué : IE6 ne reconnait :hover que sur les liens...

**autocrator** · 04/07/2012, 14h46

même comme ça, le focus n'est pas prit en compte

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>Focus</title>
	<style>
	body{
	background-color:black;
	}
		#identif{
			margin: 25px;
			width: 400px;
			height: 300px;
			background-color: silver;
			opacity: 0.4;
			filter:alpha(opacity=10);
		}
		#identif:hover{
			opacity: 1;
			filter:alpha(opacity=100);
		}
	</style>
</head>
<body>
	<div id="identif" onclick="this.focus()">
		<input />
	</div>
</body>
</html>

**Macmillenium** · 04/07/2012, 14h47

Envoyé par Bovino

le focus sur une div, c'est pas évident

C'est possible grâce à ARIA en ajoutant tabindex="0"

Code "html :

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

<div id="identif" tabindex="0" onclick="this.focus()">

**Bovino** · 04/07/2012, 14h51

Arf... bien vu, j'avais testé sans tabindex et bien sûr, ça n'avait pas fonctionné !

**autocrator** · 04/07/2012, 15h03

Ahah les grands esprits se rencontrent

malheureusement sa ne fonctionne toujours pas de mon coté, et j'arrive pas à savoir pourquoi ...

je remet mon code :

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>Focus</title>
	<style>
	body{
	background-color:black;
	}
		#identif{
			margin: 25px;
			width: 400px;
			height: 300px;
			background-color: silver;
			opacity: 0.4;
			filter:alpha(opacity=10);
		}
		#identif:focus{
			opacity: 1;
			filter:alpha(opacity=100);
		}
	</style>
</head>
<body>
	<div id="identif" tabindex="0" onclick="this.focus()">
		<input />
	</div>
</body>
</html>

**Macmillenium** · 04/07/2012, 15h09

Ça fonctionne chez moi (j'ai testé sous FF et IE8), tu es sur quel navigateur?

élément transparent tant qu'il n'est pas focus

CSS

Discussions similaires

Partager

Partager