Représentation Complexe JavaScript

Version imprimable

28/05/2015, 20h02
abc.xyz

Représentation Complexe JavaScript

Bonjour,

excusez moi si je me suis trompé de forum mais en fait je ne sais pas bien quelle technologie exacte correspond à ce que je veux implémenter.:roll:

Voilà j'ai mis sur un site une image (jpeg) représentant un grand carré découpé en 4 petits carrés.

On ne peut pas faire d'animation directement sur cette image puisque cette image est un fichier jpeg incorporé dans le code html, donc en effet au passage de la souris rien ne se passera sur le jpeg.

Alors comment faire pour que au passage de la souris sur les 4 petits carrés, chaque petit carré devienne vert par exemple?:)

Merci de votre aide qui m'est précieuse.
28/05/2015, 20h07
javatwister

Eh bien par exemple, tu remplaces ton jpeg par un autre au passage de la souris (avec des ptits carrés verts)(mais pas la souris)
28/05/2015, 20h20
abc.xyz

je ne comprends pas la réponse ci dessus et en fait je me suis mal expliqué aussi car il ne s'agit pas de carré, voilà lorsqu'on a un jpeg avec une grande forme complexe découpée en petites formes complexes comment rendre les petites formes vertes au passage de la souris(c'est pas possible puisqu'il n' y a aucun moyen d'agir sur un jpeg statique)?
29/05/2015, 10h59
abc.xyz

Il s'agit bien d'une forme complexe découpée en petites formes complexes et non pas de carré.
Bien sur il y a la balise map en html mais elle permet uniquement de selectionner des polygones carrés rectangles cercles sur la jpeg, pas des formes complexes aux contours droits et aussi arrondis par exemple.
Donc avec quelle solution illuminer des formes complexes sur la jpeg au passage de la souris?
29/05/2015, 14h48
NoSmoking

Bonjour,
dans l'attribut coords, en shape="poly", tu peux mettre des choses très complexes si tu t'y retrouve à la saisie des valeurs.

Il existe une alternative qui consiste à superposer des formes simples pour obtenir une forme plus complexe, un cercle sur l'angle d'un rectangle et qui ont la même action au final.

De plus il y a le SVG si tu n'es pas trop regardant sur la compatibilité des "browsers", et d'ailleurs il existe d'excellentes bibliothèques.
29/05/2015, 14h56
Bovino

Citation:

si tu t'y retrouve à la saisie des valeurs

Il me semble que Photoshop ou Gimp permettent de générer les coordonnées à ta place.
29/05/2015, 16h00
abc.xyz

Rebonjour,

avec map poly on ne peut cependant que faire des polygones sur la jpeg, c'est à dire des formes avec tous les côtés droits. Peu importe qu'ils soient convexes ou concaves d'ailleurs.

NoSmoking tu me parles d'alternatives, je ne sais pas de quelle solution tu parles : des alternatives à partir de quelle solution?

Tu me parles aussi de SVG et de bibliothèques, je ne connais aucune solution SVG pour ce problème, quant aux bibliothèques je n'ai trouvé que des bibliothèques pour faire des choses interessantes sur des cartes uniquement, et là il ne s'agit pas de cartes exactement:weird:

merci
29/05/2015, 16h15
Bovino

Citation:

je ne connais aucune solution SVG pour ce problème

Il existe des démos qui correspondent pourtant exactement à ce que tu cherches à faire : http://www.synbioz.com/blog/carte_france_svg.
29/05/2015, 16h32
abc.xyz

Je n'ai pas étudié le SVG mais je pense qui si j'utilise cette solution on ne peut pas rester sur le jpeg que j'ai à la base,non?

NoSmoking mes questions sur les alternatives dont tu parles ainsi que les bibliothèques dont tu parles restent entières.

Merci de votre patience.
29/05/2015, 17h28
melka one

jour

pour des carres on peut positionner 4 div de couleur vert par dessus l'image en visibility 0 et un simple hover pour mettre les div en visibility 1 apres pour des formes complexe il y a la balise map ou comme sa a été dit le svg
30/05/2015, 16h17
NoSmoking

Citation:

NoSmoking tu me parles d'alternatives, je ne sais pas de quelle solution tu parles : des alternatives à partir de quelle solution?

il suffit peut être de bien lire la réponse

Citation:

Il existe une alternative qui consiste à superposer des formes simples pour obtenir une forme plus complexe, un cercle sur l'angle d'un rectangle et qui ont la même action au final.

Citation:

Je n'ai pas étudié le SVG mais je pense qui si j'utilise cette solution on ne peut pas rester sur le jpeg que j'ai à la base,non?

il suffit de faire un essai en superposant un SVG sur une image, la notion de background-image pouvant être utilisé ;)
30/05/2015, 16h38
abc.xyz

1-NoSmoking, après réflexion les alternatives dont tu parles ne sont pas la solution au problème pourtant courant de formes complexes sur jpeg à animer car tes superposition de formes c'est impossible voire bcp trop compliqué à implémenter.

2-Les polygones avec map c'est pas la solution au problème non plus car les formes dont je parle ont des contours parfois tout sauf droits.

3-Donc je pense vraiment que l' une des rares solutions au problème courant que je pose c'est SVG, simplement c'est toujours le même problème sur les forums il est dur de se faire comprendre parfois.

C'est pourquoi ton explication de superposition SVG et de background-image j'ai rien compris du tout.

Ce que j'aimerai comprendre sans explication poussée cependant mais d'une façon simple c'est comment utiliser SVG à partir de ma jpeg d'origine car comment faire du SVG sur des formes qui initialement sont dessinnées sur une jpeg?
30/05/2015, 19h06
melka one

pour ce faire il faut d’abord utiliser un éditeur de svg tel inkskape afin de creer les formes et généré un fichier svg que tu ouvrira avec un editeur de texte tu copie les donné que tu insere dans un div qui contiendra ton image en tant que background comme NoSmoking l'a dit. A ce moment le svg se retrouvera superposé a l'image il ne restera plus qu'a utiliser la methode avec le css expliqué dans le lien que bovino a mis.

inkskape permet de cree des formes complexe moyennant un temp d'aprentissage
30/05/2015, 22h44
NoSmoking

Citation:

1-NoSmoking, après réflexion les alternatives dont tu parles ne sont pas la solution au problème pourtant courant de formes complexes sur jpeg à animer car tes superposition de formes c'est impossible voire bcp trop compliqué à implémenter.

surprenant donc que tu ne trouve rien sur la toile !

Citation:

2-Les polygones avec map c'est pas la solution au problème non plus car les formes dont je parle ont des contours parfois tout sauf droits.

il faut bien te rendre compte que quoiqu'il arrive tu sera obligé de passer par la définition de tes points.

Citation:

3-Donc je pense vraiment que l' une des rares solutions au problème courant que je pose c'est SVG, simplement c'est toujours le même problème sur les forums il est dur de se faire comprendre parfois.

lorsque l'on expose clairement son but/problème il est souvent plus facile d'être immédiatement compris.

Citation:

C'est pourquoi ton explication de superposition SVG et de background-image j'ai rien compris du tout.

en faisant preuve d'un peu d'imagination cela reste clair :mouarf:

Citation:

Ce que j'aimerai comprendre sans explication poussée cependant mais d'une façon simple c'est comment utiliser SVG à partir de ma jpeg d'origine...

c'est simple, enfin il me semble, tu intègres ton SVG dans une balise <object> à laquelle tu mets en background ton image jpeg, jusque là tout est clair j'espère.

Pour l'affichage au survol il te faut au préalable mettre tes <path> en opacity:0 et au survol passer celle ci en opacity:1, cela ce gère directement en CSS comme expliqué dans le lien fourni par Bovino, mais il faut prendre le temps de le lire.

Comme on est des princes sur developpez un petit exemple, à décortiquer, background-image sur Object SVG qui présente une solution pour y arriver ;)

Voilà j'espère être resté simple et plus clair que l'exposition de ton problème qui pour mémoire

Citation:

Envoyé par #1

Alors comment faire pour que au passage de la souris sur les 4 petits carrés, chaque petit carré devienne vert par exemple?

Citation:

Envoyé par #3

je me suis mal expliqué aussi car il ne s'agit pas de carré, voilà lorsqu'on a un jpeg avec une grande forme complexe découpée en petites formes complexes
31/05/2015, 12h20
abc.xyz

Bonjour,

d'après ce que tu me dis il faut intégrer le SVG dans une balise <object>, cependant moi je n'ai pas de fichier SVG, tout ce que je possède c'est une image jpeg avec mes formes complexes dessus, donc je le fabrique comment ce fichier SVG?:oops:

merci

melka one a proposé une solution qui consiste à utiliser des div au lieu d'un jpg. Voici un exemple :

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
 
<div> <h3>Passez votre souris sur le carré rouge</h3></div>
 
<div class="carre" onmouseover="over(this)" onmouseout="out(this)">&nbsp;</div>
<div class="carre" onmouseover="over(this)" onmouseout="out(this)">&nbsp;</div>
<div class="carre" onmouseover="over(this)" onmouseout="out(this)">&nbsp;</div>
<div class="carre" onmouseover="over(this)" onmouseout="out(this)">&nbsp;</div>
<br style="clear:both" />
<div class="carre" onmouseover="over(this)" onmouseout="out(this)">&nbsp;</div>
<div class="carre" onmouseover="over(this)" onmouseout="out(this)">&nbsp;</div>
<div class="carre" onmouseover="over(this)" onmouseout="out(this)">&nbsp;</div>
<div class="carre" onmouseover="over(this)" onmouseout="out(this)">&nbsp;</div>
<br style="clear:both" />
<div class="carre" onmouseover="over(this)" onmouseout="out(this)">&nbsp;</div>
<div class="carre" onmouseover="over(this)" onmouseout="out(this)">&nbsp;</div>
<div class="carre" onmouseover="over(this)" onmouseout="out(this)">&nbsp;</div>
<div class="carre" onmouseover="over(this)" onmouseout="out(this)">&nbsp;</div>
<br style="clear:both" />
<div class="carre" onmouseover="over(this)" onmouseout="out(this)">&nbsp;</div>
<div class="carre" onmouseover="over(this)" onmouseout="out(this)">&nbsp;</div>
<div class="carre" onmouseover="over(this)" onmouseout="out(this)">&nbsp;</div>
<div class="carre" onmouseover="over(this)" onmouseout="out(this)">&nbsp;</div>
<br style="clear:both" />
 
<div> ceci est un test </div>

Code CSS appliqué aux div :

Code:

1
2
3
4
5
6
7
 
.carre{
	float:left; 
	width:100px; 
	height:100px; 
	background-color:red
}

Code javascript pour modifier les couleurs lors du survol des zones avec la souris.

Code:

1
2
3
4
5
6
7
8
9
 
function over(e)
{
	e.style.backgroundColor="green";
}
function out(e)
{
	e.style.backgroundColor="red";
}

@javatwister : cela fait un moment que je ne t'ai pas vu sur le forum :hola:

31/05/2015, 17h05
abc.xyz

Il me semblait pourtant avoir fait les efforts nécessaires pour expliquer clairement que mon problème n'avait rien à voir avec des carrés. Merci pour l'aide cependant.:weird:

Il s'agit d'un jpeg contenant des formes tres complexes constituées de lignes droites et de lignes quelconques avec des arrondis etc..bref des formes qui ne peuvent être envisagés par les polygones de la balise map, ces polygones ne pouvant convenir que pour des formes aux lignes droites.

Donc je reprends à l'attention principalement, si je ne lui échauffes pas trop les oreilles, de NoSmoking:
d'après ce que tu me dis il faut intégrer le SVG dans une balise <object>, cependant moi je n'ai pas de fichier SVG, tout ce que je possède c'est une image jpeg avec mes formes complexes dessus, donc je le fabrique comment ce fichier SVG?:oops::oops:

Je signale que mon message n'est pas un reproche envers les personnes qui cherchent à m'aider, je voulais juste recentrer le post sur le fait que nous avions progressé vers une solution convenable depuis quelques messages déjà..:?

merci de votre aide à tous.
31/05/2015, 18h44
melka one

lis tu vraiment les commentaires ? :weird:
01/06/2015, 09h17
abc.xyz

Bonjour,

NoSmoking tu as écrit, je te cite:
"..c'est simple, enfin il me semble, tu intègres ton SVG dans une balise <object> à laquelle tu mets en background ton image jpeg, jusque là tout est clair j'espère.."

Tu me dis d'intégrer un SVG dans une <object>, effectivement après avoir lu des tutoriels sur SVG il faut bien inclure un fichier SVG de cette façon..mais ce que je ne réussis pas à comprendre:oops:, c'est quel fichier SVG, comment je le fabrique CE FICHIER?:oops:

Ne me dites pas que je dois recoder en SVG les formes complexes de ma jpeg?:calim2:

Merci
01/06/2015, 09h48
SylvainPV

Citation:

Envoyé par abc.xyz

Ne me dites pas que je dois recoder en SVG les formes complexes de ma jpeg?:calim2:

Ben si. Il faut bien à un moment donné ou un autre coder en dur les coordonnées des formes à identifier, que ce soit par polygone, arcs ou courbes de Bézier. Pour t'aider, tu peux utiliser un logiciel d'édition SVG comme Inkscape, importer ton JPEG et redessiner par-dessus les formes avec les bons contours et le style désiré au survol. Ensuite, tu peux éditer avec un éditeur de textes le fichier SVG pour y ajouter les règles qui affichent/masquent ces formes au survol (voir http://www.petercollingridge.co.uk/d...r-effects-svgs)

Si tu cherches un outil magique qui viendrait sélectionner automatiquement les formes par détection de couleur / contour, il y a peut-être des expérimentations qui existent avec canvas, mais j'ai peur que ça ne fasse que compliquer encore plus les choses.
01/06/2015, 09h53
abc.xyz

1-Ben si il faut coder le fichier svg en langage svg, pourquoi NoSmoking m'a t'il dit de mettre ma jpeg en background-image de <object>?:ptdr:

2-si je choisis la solution de la balise map et de ses poly uniquement (et donc pas de svg), est t'il possible au survol de certaines zones de la jpeg d'afficher par dessus les zones de la jpeg survolées des informations concernant la zone en question?Cela vous semble t'il envisageable en javascript?:D
01/06/2015, 10h45
SylvainPV

1- coder le fichier SVG en langage SVG ? Qu'est-ce que ça veut dire ? SVG est un format, pourquoi voudrais-tu qu'un fichier SVG soit codé en autre chose que du SVG ? Quoiqu'il en soit tu peux intégrer ce fichier SVG dans ta page HTML avec la balise <object> donc je ne vois pas où est le problème.

2- bien sûr, c'est à ça que sert la balise area à la base. C'est ce que font presque tous les exemples dessus :
http://formation.upyupy.fr/html-xhtml/images-map/
http://cyberzoide.developpez.com/html/map.php3
01/06/2015, 10h58
abc.xyz

Donc maintenant je me pose la question du code jQuery à utiliser sur les zones <area> survolées, en effet au survol d'une zone <area>je dois afficher des informations, donc je mets un id sur la zone <area> en question j'applique à cette zone via un jQuery Object ($(..)) la fonction jQuery hover() par contre là j'ai une absence je code quoi par exemple dans hover() pour afficher des informations concernant la zone survolée?:D

Ah j'ai trouvé une réponse à ma question, il est plus simple de mettre une div ailleurs sur la page concernant les informations à afficher et à utiliser text() de jQuery dans hover() pour écrire les informations concernant la zone en question dans la div, youpi!j'ai trouvé une solution!:zoubi:
02/06/2015, 14h14
abc.xyz

Bonjour,

figurez vous que j'ai encore une question, une de plus.:mouarf:

Regardez à l'adresse suivante:
http://www.creationfonciere.com/index.php?p=8/1/1218-3

et, si vous le pouvez, dites moi:
vous voyez bien sur le plan de terrain, au survol de la souris sur les points verts dans les lots hé bien des informations apparaissent,donc voici ma question:
Est ce que la localisation de ces points verts survolés par la souris est faites dans ce cas précis en utilisant des coordonnées de ces points verts via la technologie de la balise <map>, ou bien est ce une autre solution qui est employée ici, si oui laquelle?

merci
02/06/2015, 14h18
Bovino

Regarde le code source de la page et tu le sauras... :whistle:
02/06/2015, 14h23
abc.xyz

merci Bovino, au moins toi..tu es malin.
03/06/2015, 10h40
abc.xyz

bonjour,

sur l'adresse que j'ai fourni plus haut, regardez bien lorsqu'on survole avec la souris les ronds verts sur le plan des infos apparaissent dans un rectangle, comme Bovino m'a suggéré j'ai regardé le code, cependant je n'arrive pas à trouver le code correspondant à l'affichage de ces infos au survol:?

Avez vous une idée de la façon dont c'est implémenté?
03/06/2015, 10h45
Bovino

:fleche: Une image map avec des infobulles CSS3 et jQuery.
03/06/2015, 14h12
abc.xyz

j'en profite pour vous demander:
je travaille sur un ordi portable mac 13 pouces.
Je fais le partage de connexion avec mon iPhone.
Est ce que quelqu'un saurait me donner une explication qui se tienne concernant le fait que l'accès aux pages web est très lent:oops:, ça mouline comme on dit..:aie:
03/06/2015, 15h06
SylvainPV

Oui bien sûr, j'ai étudié attentivement les informations que tu as fourni et je crois pouvoir en déduire que le problème vient du matériel Apple. Il faut tout remplacer.

Sinon j'en profite pour passer une annonce, je vends un vélo d'appartement servi 1 an en très bon état me contacter au 36.65.65.65
03/06/2015, 15h36
abc.xyz

désolé, c'est en plein air que je fais mon sport..8-)
03/06/2015, 19h08
NoSmoking

un vélo d'appartement dans le gazon c'est tendance et peut être devrais tu sortir plus souvent faire du sport !
:dehors: