Mise à jour automatique des coordonnées de mapping

**yannoo95170** · 12/10/2012, 22h12

Bonjour,

Je voudrais pouvoir utiliser des maps qui s'adaptent automatiquement aux tailles des images sur lesquelles elles s'appliquent.

Pour l'instant, j'arrive à remplir la fenêtre avec une image sélectionnée et à adapter les coordonnées de mapping pour qu'elles s'adaptent au changement de la taille de l'image sur laquelle elles s'appliquent mais ce n'est pas vraiment encore çà

- sur FireFox, ça plante carrément quand je clique sur une zone de la map

- sur Chrome, ça fonctionne plutôt bien mais la function de retaillage du contenu de la fenêtre est appellée 2x à chaque modification de la taille de la fenêtre

- pas testé sous IE (je développe ça sous Linux)

A quel endroit pourraient se situer le (ou les) problême(s) à votre avis ?

PS : je pense rendre ça bien plus générique mais je voudrais que ça marche avec des valeurs "codés en dur" avant de rendre ça plus générique ...

PS2: il n'y aurait pas moyen d'utiliser des % comme pour la taille des images ?
(cf. avec des trucs style coords="25%,25%,75%,75%" par exemple)
[ça simplifierait très grandement la création de maps hyper génériques ...]

@+
Yannoo

**yannoo95170** · 13/10/2012, 04h32

J'ai maintenant quelque chose de fonctionnel sous Chrome et Firefox

(je pense que ça devrait tourner sans pb sous IE ou autres butineurs)

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
<HTML>
<HEAD> 
<SCRIPT>
 
	// Thanks to http://snipplr.com/view/36398/ for the basis of this function
 	function area_resize(areaId, baseWidth, baseHeight, baseCoords, newWidth, newHeight)
	{
		var newCoords = "";
		var baseCoordsArray = baseCoords.split(",");
 
		for (var i = 0; i < baseCoordsArray.length; i+=2)
		{
			newCoords += (newWidth * parseFloat(baseCoordsArray[i])) / baseWidth;
			newCoords += ",";
			newCoords += (newHeight * parseFloat(baseCoordsArray[i+1])) / baseHeight;
			newCoords += ",";
		}
 
		document.getElementById(areaId).coords = newCoords;
	}
 
	// recompute top-left, top-right, bottom-left and bottom-right maps for the specified picture
	// mapping association :  (0,0)-(1,1) <-> (0,0)-(width,height) 
	function resizemaps(img)
	{
 
		var w = document.getElementById(img).width;
		var h = document.getElementById(img).height;
 
		area_resize('tl', 1.0, 1.0, "0,0,0.5,0.5", w, h);
		area_resize('tr', 1.0, 1.0, "0.5,0,1,0.5", w, h);
		area_resize('bl', 1.0, 1.0, "0,0.5,0.5,1", w, h);
		area_resize('br', 1.0, 1.0, "0.5,0.5,1,1", w, h);		
	}	
 
</SCRIPT>
</HEAD>
 
<BODY onLoad="resizemaps('myimg')" onResize="resizemaps('myimg')" >
 
<DIV id="mydiv" >
 
	<map name="mymap">
		<area id="tl" shape="rect" coords="0,0,30,30" href="topleft.html" alt="TopLeft" target="tl" >
		<area id="tr" shape="rect" coords="30,0,60,30" href="topright.html" alt="TopRight" target="tr" >
		<area id="bl" shape="rect" coords="0,30,30,60" href="bottomleft.html" alt="BottomLeft" target="bl" >
		<area id="br" shape="rect" coords="30,30,60,60" href="bottomright.html"  alt="BottomRight" target="br" >
	</map>
 
	<img src="rainbow.gif" usemap="#mymap" width="100%" height="100%" id="myimg" > 
 
</DIV>
 
</BODY>
</HTML>

@+
Yannoo

**NoSmoking** · 13/10/2012, 08h15

Bonjour,
attendu que tu as des zones rectangulaires tu pouvait également passer par des DIV recouvrant ton image et placées/dimensionnées en %.
Peut être pas très générique quand même.

Nota: Penses à mettre un doctype à tes documents.

**yannoo95170** · 13/10/2012, 15h42

Je pense rapidement y ajouter le support de maps circulaires (shape=circle) et "biscornues" (shape=polyline)

Et veux de plus y ajouter à terme la possibilité d'avoir des maps modificables en temps réel afin de pouvoir y faire des selections de type "au lasso" par exemple

=> donc effectivement, "passer par des DIV recouvrant ton image et placées/dimensionnées en %" ne me paraît une voie très générique pour ces cas de figures

Merci pour l'indication du doctype, je vais très vite le rajouter

PS : dommage que les attritbuts COORDS des balises AREA n'acceptent pas les % car ce serait vraiment la voie la plus simple/générique à utiliser ...

[un peu comme on peut le faire en OpenGL avec des coordonnées de mapping allant de (0,0) à (1,1) , la fonction area_resize() faisant pour l'instant plus ou moins office de "vertex shader HTML" )

@+
Yannoo

**NoSmoking** · 13/10/2012, 16h54

Regardes peut être du coté de cette discussion et de la solution qu'a trouvé fazpedro.

**yannoo95170** · 13/10/2012, 17h22

Je viens d'y rajouter les cercles comme type de maps.

Celà n'a nécessité que le rajout d'un paramêtre pershape et la gestion de la troisième coordonnée de mapping (cf. le rayon) dans la fonction area_resize()

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
 
// Thanks to http://snipplr.com/view/36398/ for the model of this function
	// pershape : =2 for polylines and rects,  =3 for circles
 	function area_resize(areaId, baseWidth, baseHeight, baseCoords, newWidth, newHeight, pershape)
	{
		var newCoords = "";
		var baseCoordsArray = baseCoords.split(",");
 
		for (var i = 0; i < baseCoordsArray.length; i += pershape)
		{
			newCoords += (newWidth * parseFloat(baseCoordsArray[i])) / baseWidth;
			newCoords += ",";
			newCoords += (newHeight * parseFloat(baseCoordsArray[i+1])) / baseHeight;
			newCoords += ",";
			if ( pershape == 3 )
			{
				var factor = (newWidth + newWidth) / 2; 
				newCoords += ( factor * parseFloat(baseCoordsArray[i+2])) / (baseWidth * baseHeight);
				newCoords += ",";
			}
		}
 
		document.getElementById(areaId).coords = newCoords;
	}

Et du rajout d'un "mapping disquaire" dans le recalcul des coordonnées de maps :

Code :

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

1
2
3
4
5
6
7
8
9
 
	// recompute top-left, top-right, bottom-left, bottom-right and centers maps for the specified picture
	// mapping association for maps :  (0,0)-(1,1) -> (0,0)-(width,height) 
	function resizemaps(picture)
	{
               ...
		area_resize('c2', 1.0, 1.0, "0.5,0.5,0.5", w, h, 3);		
		area_resize('c1', 1.0, 1.0, "0.5,0.5,0.3", w, h, 3);
	}

Ainsi que dans le code HTML qui génère ces 2 maps "circulaires"

Code :

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

1
2
3
4
 
        ....
	<area id="c2" shape="circle" coords="30,30,30" href="center2.html"  alt="Center" target="c2" >
		<area id="c1" shape="circle" coords="30,30,20" href="center1.html"  alt="Center" target="c1" >

Mais j'ai un pb avec les maps imbriquées

(cf. je voudrais pouvoir selectionner la map intérieure c1 mais vu qu'elle est à l'intérieure de la map exterieure c2, ce n'est pas encore possible

)
=> quelqu'un aurait une idée pour résoudre le pb ?

@+
Yannoo

**yannoo95170** · 13/10/2012, 17h57

La solution de Fazpedro fonctionne-elle avec des aires différentes du type shape=rects (par exemple shape=circle et shape=polyline) ?

Elle ne semble de plus pas pouvoir gérer directement les coordonnées de mapping comme le fait l'équivalent du "vertex shading HTML" effectué via la fonction area_resize()

=> il n' est donc pas possible de prévoir d'y gérer des transformations de mapping plus complexes comme les rotations/shearings/projections/reflexions et autres joyeusetés de ce style

Par contre, son support d'images réactives me semble un super bonne idée
=> je vais de ce pas essayer si ça marche aussi avec ma méthode

@+
Yannoo

Mise à jour automatique des coordonnées de mapping

HTML

Vue hybride

Discussions similaires

Partager

Partager