Discussion :

[bob633]

Bonjour, je souhaite afficher une carte vierge, et en fonction de parametre qu'il y a dans une base de données, afficher des points aux corrdonnées x et y.

J'ai donc créer

Code :

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

1
2
3
4
5
6
7
 
// image de la carte vierge
<img src="images/img1.jpg" usemap="#map" />
       <map name="map">
               // Pour chaque area, j'aimerais une image qui contient les 11px de circonference pour que la zone cliquable soit visible sur la carte
               <area shape="circle" coords="50,50,11" href="#">
       </map>

Pour le moment je ne souhaite pas m'occuper de la BD mais coder en dur pour tester.

J'aimerais que pour chaque coordonnées, s'affiche un point noir (si possible une image d'un point noir que j'aurais choisi). Donc je ne souhaite pas utiliser de onmouseover ou autres fonction javascript.

Comment je peux définir un petit arrière plan pour chaque balise area ? J'ai essayé de mettre un id dans la balise area et ensuite dans la page css de mettre une image mais sans succès ..

Merci d'avance

[SaynRauliee]

J'ai eu le problème au boulot, et je n'ai trouvé aucun moyen de mettre un background a une area, même par "bidouillages".

Une piste envisageable :

tu utilises des images ou divs en absolute, que tu superpose a la carte de fond. c'est moche, mais ça marche :p. Le problème est le nombre d'images (problématique pour le référencement (comprenez beaucoup de connexion ouvertes pour rapatrier les fichiers -> ralentissement chargement page -> google mécontent. ).

Pour régler le problème du nombre d'images, tu peux utiliser la conversion d'image en base64 (tu le fais une fois pour toute, et tu enregistre "tel quelle"). (ca va te convertir l'image en suite de caractères alphanumériques, enregistrables dans le fichier .php si tu pars la dessus, je pourrais te filer les infos si besoin).

tu as alors un problème de taille : 33% d'augmentation max de la taille initiale des images (pour passer de .gif|jpg|etc à base64). Si tu met un poil de javascript, et que tes images sont adaptées (beaucoup de zones de couleurs identiques, nombre d'images réduites, zone transparentes), tu peux cependant arriver a un résultat aussi leger qu'avec le préload de toutes les images.

Au boulot, l'idée était de faire une carte de france (le truc "habituel") avec un changement du fond du departement lors du survol, et ce avec le moins de chargement d'images possibles (que ce soit en preload ou en ajax). Si tu penses que ca peut t'aider, n'hésites pas .

Bonne soirée!
Sayn.

[bob633]

merci pour ta réponse. c'est ce que j'ai commencé à faire hier. Le problème est que comme l'image se superpose, l'hyperlien ne fonctionne plus une fois qu'on passe la souris sur l'image

Après le nombre d'images ce n'est pas un problème, car j'ai un seul point à mettre donc en fonction de paramètres (x et y) dans une base de données, je fais ma boucle et je réutilise toujours la même image

Pour dépanner, je m'arrange à mettre un mini point noir au centre de façon qu'on puisse cliquez autour de celle-ci :/

Enfin ça dépannera oui =)

Merci en tout cas !

[SaynRauliee]

Utilise le z-index pour faire en sorte que ton image lien soit au dessus de l'image de fond .
Bon aprem.
Sayn.