Area, Onmouseover et CSS

**rollergirl** · 22/08/2010, 21h10

Bonjour à tous,

Je suis confronté à un soucis. J'ai une carte de france qui est "mappé". Le nom d'un certain nombre de ville est écrit sur l'image. Mon soucis c'est que je voudrais qu'au survol de la souris, le nom de la ville change de couleur.

je sais qu'avec mon choix actuel (nom des villes sur l'image) sa ne fonctionne pas mais je ne sais pas comment faire pour avoir, par dessus mon image map, le nom d'une cinquantaine de ville...

Quelqu'un aurait une piste ?

Merci ^^

**SpaceFrog** · 22/08/2010, 21h36

il te faut :
[list][*]une image de base que tu mets en background d'un div[*]une image entièrement transparente de même dimension qui supportera l'area au départ[*]et une image par nom de ville avec juste le nom de la ville en couleur et le reste transparent
toutes les images sont de même dimension

au survol d'un area modifies juste le src de l'image transparente avec le src de l'image avec le nom de la ville en couleur correspondante qui viendra exactement en superposition du nom pas colorisé.
éventuellement sur le mouseout tu remets en src l'image transparente

**rollergirl** · 22/08/2010, 21h42

Merci pour ta réponse.

Si j'ai bien compris :

Je met ma carte avec les nom de villes en noir classique en background d'un div
Je rajoute un div par dessus avec la même image que je map par ville
mais je ne suis pas sur d'avoir compris ensuite : sur chaque area, je me le onmouseover et j'appeler une nouvelle image src (celle sur laquelle je suis ?)

Cette solution n'est elle pas "lourde" en terme d'image et de chargement ?
Est "aux normes" ?

Merci

**SpaceFrog** · 23/08/2010, 08h14

Code :

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

Je met ma carte avec les nom de villes en noir classique en background d'un div

Jusque là tout bon

Code :

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

Je rajoute un div par dessus avec la même image que je map par ville

Pas tout a fait ...
Tu rajoute une image transparente de même taille que tu mappe comme si tu mappais le fond.

mais je ne suis pas sur d'avoir compris ensuite : sur chaque area, je me le onmouseover et j'appeler une nouvelle image src (celle sur laquelle je suis ?)

Sur le mousover de chaque area tu appelles une fonction qui modifie le src de l'image.

Niveau lourdeur, de toute façon tu n'as pas le choix, après ce seront des solutions de type flash ou canvas.
Et puis une image avec juste une nom de ville en couleur, et le reste transparent c'est pas bien lourd.
Pense toute fois à faire un preload des images.

**SpaceFrog** · 23/08/2010, 10h57

Un petit 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
15
16
17
18
19
20
21
22
23
24
25
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nouvelle page 2</title>
<script type="text/javascript">
function swapPic(zone,nr){
var pic=document.getElementById('hovered')
pic.src='img/Areas/'+nr+'.png'
zone.onmouseout=function(){pic.src='img/Areas/0.png'}
}
</script>
<style type="text/css">
img {border:0;}
</style>
</head>
<body>
<div id="pic" style="height: auto; width: auto; background-image: url('img/Areas/bg.png'); background-repeat: no-repeat">
<img id="hovered" src="img/Areas/0.png" usemap="#Map" width="100" height="100" />
<map name="Map">
<area href="#" onmouseover="swapPic(this,2)" shape="polygon" coords="20, 64, 13, 51, 14, 34, 24, 19, 38, 12, 56, 13, 69, 21, 79, 41, 75, 54, 71, 57, 55, 54, 39, 57">
<area href="#" onmouseover="swapPic(this,3)" shape="polygon" coords="22, 68, 40, 57, 56, 57, 71, 58, 66, 67, 51, 75, 33, 74">
<area href="#" onmouseover="swapPic(this,4)" shape="polygon" coords="16, 69, 15, 79, 22, 88, 36, 95, 51, 96, 76, 93, 86, 85, 90, 76, 90, 67, 84, 61, 77, 59, 70, 68, 57, 76, 37, 78, 28, 73, 19, 68"></map>
</div>
</body>
</html>

les images jointes sont à mettre dans un repertoire img/Areas

**SpaceFrog** · 23/08/2010, 12h02

Un exemple un peu plus détaillé ...
http://www.developpez.net/forums/d96...-larea-survol/

Area, Onmouseover et CSS

JavaScript

Discussions similaires

Partager

Partager