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: