Discussion :

[mutley]

Bonjour,

Dans mon site web, j'ai une carte du monde (enregistrée au format JPG).
Sur cette image, je souhaiterai définir plusieurs points qui font apparaitre une autre petite image (beaucou plus petite que la carte) lorsque l'utilisateur passe la souris dessus et s'enlève lorsqu'il quitte cette nouvelle petite image.

Par exemple, j'ai une carte de France (de taille 1600x1200), et je souhaiterais faire afficher une petite image avec écrit "Lyon" lorsque l'utilisateur passe la souris à l'endroit de la carte où se situe Lyon (image qui sera de taille 30x50), et idem pour "Paris" et "Marseille" par exemple. Et lorsque la souris quitte cette nouvelle petite image de 30x50, celle-ci disparait.

Quelle est la méthode la plus simple ?

Merci d'avance

[Vil'Coyote]

je dirais bien l'utilisation d'une map area

[mutley]

J'ia déjà utilisé mais je ne sais pas comment faire marcher pour ce besoin ?

[Atomya Rise]

Et pourquoi ne pas se tourner du côté CSS ?
Avec une div en absolute et l'autre en relative.
Sachant que la relative, tu la places en "display:none", et la fait apparaître seulement au passage de ta souris à l'aide de JS.

exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#DivPrincipale {
	position: relative;
	width: 75%;
}
#DivCacher {
	position: absolute;
	top: 0;
	left: 76%;
	width: 24%;
	background-image: url(.....);
	overflow: auto;
	border: 2px solid #454545;
}

[mutley]

Désolé je remonte un vieux sujet, je n'ai pas eu le temps de m'occuper de ça depuis 10 jours.

Je ne comprends pas où intégrer ce code ?

Ca veut dire que si j'ai 10 images à faire apparaitre il faut que je fasse des
#DivCacher1 ... #DivCacher10 ?