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

**yannoo95170** · 13/10/2012, 21h31

Je viens de résoudre le problème des maps imbriquées.

Il suffit d'utiliser un ordre FIFO dans l'ordre de création des aires (cf. les aires qui se superposent sur d'autres en premier lieu) [en gros, il faut mettre les aires "les plus prioritaires" en premier].

A noter que je pense supprimer les arguments baseWidth et baseHeight de la fonction resize_area() car ils n'ont pas l'air de servir à grand chose ...
(Ca pourrait être utile mais, vu que les coordonnées de mapping en entrée sont ici données entre 0.0 et 1.0, soit à l'équivalence de "coordonnées en pourcentage de la taille de l'image", je ne pense pas que ces 2 arguments puissent être vraiment si utiles que ça à terme.)
[Et ça fera surtout des appels de fonctions plus rapides/concis.]

=> Je vais maintenant commencer à regarder du côté du support de l'animation pour les maps et les images mappées (il est fort possible que je modifie/améliore ma méthode d' "adaptation automatique des coordonnées de mapping" en fonction de ce qu'il ressortira du thread http://www.developpez.net/forums/d12...ee-resolution/).

PS : quelle est la méthode à utiliser pour exécuter des fonctions JavaScript directement via le champs href d'une aire de map (cf. <area href=" javascript:alert()"> par exemple) sans que ça cherche systématiquement à ouvrir une nouvelle fenêtre ???

@+
Yannoo

**yannoo95170** · 13/10/2012, 22h11

J'ai trouvé comment bypasser le pb d'ouverture inopinée d'une fenêtre quand il y a une commande javascript dans le champs href d'une node <AREA href=...>

=> je remplace le href par onmouseover et/ou onmouseout

Comme dans cet exemple :

Code :

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

1
2
 
<area id="cred"    shape="circle" onmouseover="javascript:alert('Circle Red')"    target="cred" >

=> je peux maintenant tranquillement m'attaquer au côté "animation dynamique de l'image" vu que le côté réactif y semble déjà fonctionnel

(m'enfin bon, ça réagit bien quand la souris passe sur les petits cercles mais ce n'est pas encore vraiment "hyper réactif" pour l'instant ...)

@+
Yannoo

Mise à jour automatique des coordonnées de mapping

HTML

Discussions similaires

Partager

Partager