rendre transparente une partie d'une image

Version imprimable

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:

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:

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

19/09/2008, 09h34
SpaceFrog

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.
19/09/2008, 12h43
tergra

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 :)
19/09/2008, 13h33
SpaceFrog

peut être a partir d'un script de loupe modifié ... ?
19/09/2008, 13h48
tergra

Euh c'est à dire? Moi je suis preneur de toutes les bonnes idées :)
19/09/2008, 13h54
SpaceFrog

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

juste remplacer l'effet loupe ...
19/09/2008, 14h23
Bovino

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

tu peux expliciter Beef ?
19/09/2008, 14h45
Bovino

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...
19/09/2008, 15h25
Bovino

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 !
19/09/2008, 15h27
SpaceFrog

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

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 :aie: ) sans map mais pour le principe :
Code:

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>

19/09/2008, 15h47
SpaceFrog

oui mais bon div =rectangle ...

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:

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>