FORUM MP | Javascript : OnMouseOver dans une map

COMMUNAUTE MP

Identifiez vous ...

DOMAINE MP

Bavardages

Langages Généraux

Langages Web

Langages DotNet

Autres langages

Dev. Jeux Video

Sécurité

Sys. Exploitation

Graphismes

Logiciels

Réseaux

Bases de données

Méthodologies

Emplois High-tech

Aide juridique

Articles juridiques

FORUM

CHAT MP IRC

Votre pseudo ...

Serv: irc.irc-land.org

Chan: #MoteurProg

PARTICIPER

Plus de 3500 emplois.

Visiteur MP

OnMouseOver dans une map
	Forum : JAVASCRIPT Sous Catégorie : Aucune Type du sujet : Sujet Normale FAQ : FAQ JAVASCRIPT
		SUIVI PAR MAIL INACTIF
		SUJET NON RESOLU
		SUJET ACTIF
		N'APPARTIENT PAS A LA FAQ

PAGES : [1] [2]

FORUM JAVASCRIPT
	Page précedente	Page suivante

superska
Nouveau membre

Inscrit : 04/09/2007
Messages : 10

#142236 Posté le 04/09/07 à 09:08

Bonjour,
Je vous explique mon souci :
J'ai découpé des images en plusieurs zones cliquables et l'objectif est de survoler ces parties cliquables (zones entourées en couleur) et pendant le survol d'afficher les légendes correspondantes.
Finalement, passer de la piece jointe 1 à la piece jointe 2.
J'y arrive donc, comme ceci, au clic :

Ce que je souhaite c'est que ça se fasse au survol, donc je fais ça en regardant à droite et à gauche comment cela se passait

Pour l'instant ça ne fonctionne pas...
Suis-je dans la bonne direction?
Je vous remercie.

HAUT DE PAGE

Publicité

Inscrit : X
Messages : X

#Aucun

HAUT DE PAGE

bul
Membre du club

Inscrit : 26/01/2004
Messages : 951

#142239 Posté le 04/09/07 à 10:30

bonjour,

ça dépend de ce que tu veux réellement faire.

si c'est "remplacer" le dessin actuel :

. dit :

<img src="..." width="960" id="toto"
id="toto"...
onMouseOver="document.getElementById('toto').src='nouveau dessin';"
...

si c'est afficher autre chose en plus : un div, un span... caché
( style="display:none;position:absolute;" )
qu'on montre et positionne là où il faut ( adresse de la souris )

Cordialement. @+
__________________________
~ mon site ~ m'écrire ~
Laissez une adresse Mail où vous écrire, en évitant les spams
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯

HAUT DE PAGE

superska
Nouveau membre

Inscrit : 04/09/2007
Messages : 10

#142240 Posté le 04/09/07 à 10:37

Merci pour ta réponse :

L'objectif est le suivant :

Quand je vais survoler la zone entourée de pointillés jaunes (image jointe 1) cela doit m'afficher en remplacement l'image 2 jointe.
C'est un rollover standard mais qui ne se déclenchera que quand je vais survoler une zone précise de l'image 1.

Je viens d'y arriver comme ça :

onmouseover="self.location.href=image1.src"

Cependant un autre problème survient :

Mon image 2 remplace mon image 1 mais ensuite le onmouseout ne peut fonctionner car sur cette deuxieme image il n'y a pas de zone réactive, la totalité de l'image étant remplacée...

Il faudrait que, quand je suis sur l'image 2 dans la zone entourée de jaune, quand j'en ressors je retombe sur l'image1
Comment puis-je faire?

HAUT DE PAGE

bul
Membre du club

Inscrit : 26/01/2004
Messages : 951

#142243 Posté le 04/09/07 à 11:12

>>Je viens d'y arriver comme ça :
>>onmouseover="self.location.href=image1.src"
curieux, coup de bol ou quoi ?
sel.location.href , ce devrait être la page actuelle ??
j'éviterais quand même.

>>Mon image 2 remplace mon image 1 mais ensuite le onmouseout ne peut
>>fonctionner car sur cette deuxieme image il n'y a pas de zone réactive,
>>la totalité de l'image étant remplacée...
ben oui.
mais coords existe toujours, comme les fonction...
et ça réagit normalement.

si coords ne convient plus,
les changer ( this.coords="nouvelles coordonnées"; )

Cordialement. @+

EDIT : j'y suis, c'est ton self.location.href
qui charge une nouvelle page contenant
uniquement la nouvelle image !

__________________________
~ mon site ~ m'écrire ~
Laissez une adresse Mail où vous écrire, en évitant les spams
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯

HAUT DE PAGE

superska
Nouveau membre

Inscrit : 04/09/2007
Messages : 10

#142244 Posté le 04/09/07 à 11:21

EDIT : j'y suis, c'est ton self.location.href qui charge une nouvelle page contenant uniquement la nouvelle image !

HAUT DE PAGE

superska
Nouveau membre

Inscrit : 04/09/2007
Messages : 10

#142245 Posté le 04/09/07 à 11:24

Oups, j'ai cliqué trop vite.

Donc oui ca me charge une page avec la nouvelle image, si bien qu'on a l'illusion que le pointillé devient un trait et que des légendes apparaissent.
Ca marche plutot bien.
Mais il faut que je mette d'autres zones cliquables sur la nouvelle image chargée, notamment la zone verte en pointillés...et ainsi de suite.
Je suis un peu perdu la.

Je ne suis pas sur d'être parti dans la bonne direction du coup...

Qu'en penses tu?

HAUT DE PAGE

bul
Membre du club

Inscrit : 26/01/2004
Messages : 951

#142246 Posté le 04/09/07 à 11:39

ben alors...
si tu charges une nouvelle page, avec uniquement
l'image, tu ne peux rien faire.

charges une page avec l'image et ce qu'il faut avec
( coords, javascript ... )

ou comme je te disais :
changes le src et les coords.

moi ;-) dit :

...onMouseOver="
document.getElementById('toto').src='ch.gif';
this.coords='nouvelles coordonnées';
" ...

il me semble que la 2ème solution
est plus simple, plus rapide... (?)

@+
__________________________
~ mon site ~ m'écrire ~
Laissez une adresse Mail où vous écrire, en évitant les spams
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯

HAUT DE PAGE

superska
Nouveau membre

Inscrit : 04/09/2007
Messages : 10

#142252 Posté le 04/09/07 à 13:24

En effet, je me suis rendu compte que j'étais bloqué donc j'ai fait ca :

que je met en début de page.

et ensuite ça

body> <img src="Annexe cuisse1.jpg" width="960" height="720" border="0" usemap="#Map" /> <map name="map" id="Map"> <area shape="poly" coords="415,214,471,188,516,187,537,202,550,218,562,242,552,272,500,271,462,271,439,275,406,234" href="#" onmouseover="self.location.href=image2.src" /> <area shape="poly" coords="575,245,587,225,609,213,631,205,635,210,635,217,604,239,589,249,578,256,571,251" href="#" onmouseover="self.location.href.image3.src"/> </map> </body>

Ca marche bien.

Mais deux choses me chiffonnent :

1. quand j'écris ça :

image3 = new Image; image3.src = "Untitled-3.htm";

ça marche mais ma nouvelle page 'Untitled-3.htm" n'est pas une "new Image".
Que dois-je mettre pour etre plus "normé"

2. J'ai une petit temps de chargement après chaque survol.
Puis-je "précharger" les images?

HAUT DE PAGE

bul
Membre du club

Inscrit : 26/01/2004
Messages : 951

#142253 Posté le 04/09/07 à 14:45

à priori, le préchargement est "en général"
totalement inutile. voire nuisible.

au lieu d'attendre lors du passage de la
souris on va attendre au chargement de la page :
ce qui est pénible
et si il faut préloder 1000 images...
alors que je ne vais n'en utiliser qu'une seule...
( j'exagère bien sûr, mais le cache est là
pour gérer ça automatiquement )

pas un bon plan.
il y a des contextes où le préchargement se justifie, rarement.

à mon avis, fais d'abord des choses simples
tu verras si le reste est nécessaire.
optes pour le rechargement d'une page ou
le changement du .src. oublies les fioritures.
simplifie et teste.

>>mettre pour etre plus "normé"
je n'ai pas compris.

@+

en général, c'est totalement absurde de généraliser.
__________________________
~ mon site ~ m'écrire ~
Laissez une adresse Mail où vous écrire, en évitant les spams
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯

HAUT DE PAGE

superska
Nouveau membre

Inscrit : 04/09/2007
Messages : 10

#142260 Posté le 04/09/07 à 15:47

Merci encore pour ton aide précieuse.
Pour ma première question :

quand j'écris ça

image3 = new Image;
image3.src = "Untitled-3.htm";

je déclare image3 comme une image alors qu'en fait il s'agit d'une nouvelle page html non?
Ca marche mais je pensais que ce n'était pas correct, que ca devait être quelquechose comme new Page ou Form ou autre chose...
J'espère avoir été plus clair.

HAUT DE PAGE


	Page précédente	Page suivante
FORUM JAVASCRIPT

PAGES : [1] [2]

.: Site Web développé par Julien Pichot et l'équipe MPWG avec www.evolvia-web.com :.