rendre transparente une partie d'une image

**tergra** · 19/09/2008, 01h53

Bonjour à tous,

cela fait un bon moment que j'écume les forums afin de savoir comment résoudre mon problème, jusque là sans succès. J'imagine que cela ne vous posera pas autant de difficulté qu'à moi (je suis débutant en javascript): en fait j'aimerais qu'au survol d'une partie de mon image, cette partie (et non l'image entière) devienne transparente. J'aimerais donc que chaque zone (chaque "area" dans mon code) puisse être traitée de manière autonome.
Je suis parvenu au code suivant mais il ne fonctionne pas :

Code :

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

1
2
3
4
 
<map name="mymap" id="mymap">
	<area shape="rect" coords="1,1,50,20" a href="javascript:void(0);" onMouseOver="this.style.MozOpacity=0.5; this.filters.alpha.opacity=50" onMouseOut="this.style.MozOpacity=1; this.filters.alpha.opacity=100" " target="_blank"  title="bla bla"></a>
	<area shape="rect" coords="1,1,200,30" a href="javascript:void(0);" onMouseOver="this.style.MozOpacity=0.5; this.filters.alpha.opacity=50"  onMouseOut="this.style.MozOpacity=1; this.filters.alpha.opacity=100" target="_blank"  title="blabla2"></a>

Code :

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

1
2
 
	<img src="http://www.monsite.com/images/nomdelimage.jpeg" style="position:absolute; left:0px; top:200px" width="368" height="450" usemap="#mymap" border="0"/></a>

Merci beaucoup de votre aide qui me sera précieuse.

**SpaceFrog** · 19/09/2008, 09h34

ne pas confondre area et image ...

il va falloir que tu découpe ton image selon les zones...
puis tu "recolles" les morceaux avec autant d'images que tu avais d'areas...
et du coup tu appliques l'opacité sur chaque image.

**tergra** · 19/09/2008, 12h43

Ok, mais justement je risque d'avoir une quantité astronomique de zones, et je préfèrerais ne pas avoir à découper l'image. Y a t-il une solution "par le script" sans avoir à prédécouper l'image?

Merci beaucoup

**SpaceFrog** · 19/09/2008, 13h33

peut être a partir d'un script de loupe modifié ... ?

**tergra** · 19/09/2008, 13h48

Euh c'est à dire? Moi je suis preneur de toutes les bonnes idées

**SpaceFrog** · 19/09/2008, 13h54

http://www.nanoum.net/blog/exemples/zoom/

juste remplacer l'effet loupe ...

**Bovino** · 19/09/2008, 14h23

Ou sinon, tu peux essayer d'afficher/cacher un gif avec une transparence donnée dans une div au niveau de tes area...

**SpaceFrog** · 19/09/2008, 14h25

tu peux expliciter Beef ?

**Bovino** · 19/09/2008, 14h45

Tu crées un gif avec transparence de la taille de l'area puis tu le positionnes à l'endroit voulu et tu joue sur le visibility au mouseover et mouseout.
En écrivant, je me rends compte que du coup la solution de découper directement l'image est plus simple...

**Bovino** · 19/09/2008, 15h25

Bon, quand le cerveau est branché, ça aide...
En fait, au chargement de la page, tu crées des divs de dimension des areas, tu les places sur les areas et aux mouseover et mouseout, tu modifies l'opacité, je pense que c'est réalisable !

**SpaceFrog** · 19/09/2008, 15h27

??
heu faut bien qu'un area = une image ... donc pas besoin d'area

**Bovino** · 19/09/2008, 15h40

Ben non justement, ici l'image, c'est le map, mais lui ne veut faire réagir que l'area... donc si tu places une div avec opacité dessus, ça le fait.

Exemple pour FF (reste à coder le javascript pour que ça marche aussi sous IE

) sans map mais pour le principe :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
	<head>
		<title>Test</title>
	</head> 
	<body>
		<div style="width:400px;height:300px;background-color:green">
		 </div>
		<div style="opacity:0;background-color:white;position:relative;top:-300px;left:0;width:200px;height:200px" onmouseover="this.style.opacity=0.5" onmouseout="this.style.opacity=0"></div>
		</div>
	</body>
</html>

**SpaceFrog** · 19/09/2008, 15h47

oui mais bon div =rectangle ...

**Bovino** · 19/09/2008, 16h24

Oui, c'est une limitation, mais avec quelques modifs, ça marche...
Bon, désolé, le code est pas vraiment optimisé (mais bon, je bosse aussi...) mais voici un test avec une image en 672x400, testé sous FF, IE 6 et 7

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
	<head>
		<title>Test</title>
		<script type="text/javascript">
		var IsIE=!!document.all;
		function init(){
		for(var i=0;i<document.getElementsByTagName('area').length;i++){
		if(IsIE){
			document.getElementById('cache'+i).style.filter='alpha(opacity=0)';
			document.getElementById('cache'+i).filters[0].opacity=0;
		}
		else{document.getElementById('cache'+i).style.opacity='0';}
		}
		}
		function setop(elt,nb){
			if(IsIE){
				elt.style.filter='alpha(opacity='+nb*100+')';
				elt.filters[0].opacity=nb*100;
			}
			else{elt.style.opacity=nb;}
		}
	</script>
	</head> 
	<body onload="init()">
		<map id="ma_map" name="ma_map">
		<area shape="rect" id="area0" coords="0,0,200,200" href="http://www.developpez.net/forums/d616349/webmasters-developpement-web/javascript/rendre-transparente-partie-image/#post3641869" alt="lien" />
		</map>
		<img src="image672x400.jpg" usemap="#ma_map" style="border:none" height="400" width="672" alt="image" />
		<div id="cache0" style="background-color:white;position:relative;top:-400px;left:0;width:200px;height:200px;cursor:pointer" onclick="location.href=document.getElementById('area0').href" onmouseover="setop(this,0.6)" onmouseout="setop(this,0)"></div>
		</div>
	</body>
</html>

rendre transparente une partie d'une image

JavaScript

Discussions similaires

Partager

Partager