Discussion :

[abc.xyz]

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.

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.

[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)

[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)?

[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?

[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.

[Bovino]

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.

[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

merci

[Bovino]

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.

[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.

[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

[NoSmoking]

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

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.

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�

[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?

[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

[NoSmoking]

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 !

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.

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.

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

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

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

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

[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?

merci

[Auteur]

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

Code html :

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
 
<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 css :

S�lectionner tout - Visualiser dans une fen�tre � part

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 javascript :

S�lectionner tout - Visualiser dans une fen�tre � part

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

[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.

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?

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.

[melka one]

lis tu vraiment les commentaires ?

[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, c'est quel fichier SVG, comment je le fabrique CE FICHIER?

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

Merci

[SylvainPV]

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

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.