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.