Area, Onmouseover et CSS

Version imprimable

22/08/2010, 21h10
rollergirl

Area, Onmouseover et CSS

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 ^^
22/08/2010, 21h36
SpaceFrog

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
22/08/2010, 21h42
rollergirl

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
23/08/2010, 08h14
SpaceFrog

Code:

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

Jusque là tout bon

Code:

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.

Citation:

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.

5 pièce(s) jointe(s)

Un petit exemple :

Code:

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

23/08/2010, 12h02
SpaceFrog

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