Mapping avec des "area" triangulaires : chevauchement

**markal1** · 02/11/2008, 15h21

Bonjour,

j'ai créé une sorte de graphique camembert (enfin dans le fonctionnement plus que dans l'aspect graphique), où lorsque l'on survole l'un des quartiers, il change de couleur. Mais voila, les images utilisées sont carrées et même si le mapping ne prends en compte que la portion triangulaire de l'image, le reste de l'image (qui est transparent) recouvre les area voisines.
Je vous laisse constater par vous même :

http://markal1.free.fr/tests-forums/camembert/

Si quelqu'un a une solution ... merci d'avance !
Marc

**devyan** · 02/11/2008, 20h08

Je n'ai pas beaucoup l'habitude des MAP/AREA.

Mais se problème me semble plutôt HTML que CSS.

As-tu essayé de placer tourtes les AREA dans une seule MAP ?

**markal1** · 02/11/2008, 20h50

Non, je n'ai pas essayé, parce que chaque quartier de mon objet est une image, et à chaque quartier survolé est associé une nouvelle image de ce quartier, elle aussi mappée en triangle pour qu'une fois que je quitte le quartier, il revienne à son image initiale.

Lorsque j'affiche un quartier survolé, il est forcément mappé individuellement, en triangle.

**GihefBey** · 03/11/2008, 23h11

Bonjour,

Ben oui, pourquoi n'utilises-tu pas une seule image contenant tous les états à afficher et une seule map ?

Et, plutôt que de devoir afficher des images par dessus, pourquoi n'utilises-tu pas un déplacement de cette image (background-position) ?

Un peu comme dans Les formes irrégulières.

**markal1** · 04/11/2008, 16h17

Bonjour et merci de l'intérêt porté.

En fait, je pense que ça ne change pas le problème : dans son exemple, les formes sont relativement bien disposées ce qui fait qu'elles ne se chevauchent pratiquement pas :

http://www.alistapart.com/d/sprites/ala-blobs2.html

Survolez le bas de la forme orange, vous verrez que c'est la bleue qui s'active ...
Cela dit, je vais essayez, puisque de toute façon je suis dans une impasse

Merci pour les infos, je vous tiens au courant ...

**GihefBey** · 04/11/2008, 23h43

N'étant pas familier de ce forum, je ne sais pas si c'est l'usage.
Je te propose quand même quelque chose.

C'est vite fait et le code Javascript que je fabrique peut être amélioré.

Teste comme ça

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Un titre</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <style type="text/css">
    html, body {
      margin: 0;
      padding: 0;
      background-color: #c0c0c0;
      }
    #conteneur {
      position: relative;
      margin: 0 auto;
      width: 1000px;
      }
    #conteneur_d_image {
      margin: 0 auto;
      width: 200px;
      height: 201px;
      background: #ffd url(images/menulong.png) no-repeat 0 0;
      }
    img {
      display : block;
      border : none;
      }
    </style>
 
<!-- Utilisez un code un peu plus propre (-; -->
    <script type="text/javascript">
      function change_coin(gauche)
      {
      limage = document.getElementById('conteneur_d_image');
      limage.style.backgroundPosition = gauche;
      }
    </script>
</head>
<body>
  <div id="conteneur">
 
    <div id="conteneur_d_image">
      <img src="images/menu_transp.png" width="200" height="201" alt="image transparente sur le menu" usemap="#map4poly" />
    </div>
 
    <map name="map4poly" id="map4poly">
    <!-- #$-:Image map4poly file created by GIMP Image map4poly plug-in -->
    <!-- #$-:GIMP Image map4poly plug-in by Maurits Rijk -->
    <!-- #$VERSION:2.3 -->
    <!-- #$-:Please do not edit lines starting with "#$" -->
    <area href="#1" alt="lien1"
        shape="poly" coords="0,0,200,0,100,102,0,0" 
        onmouseover="change_coin('-800px')" onmouseout="change_coin('0px')" />
    <area href="#2"  alt="lien2"
        shape="poly" coords="200,0,200,201,100,102,200,0" 
        onmouseover="change_coin('-200px')" onmouseout="change_coin('0px')" />
    <area href="#3"  alt="lien3"
        shape="poly" coords="200,201,2,201,100,102,200,201" 
        onmouseover="change_coin('-400px')" onmouseout="change_coin('0px')" />
    <area href="#4"  alt="lien4"
        shape="poly" coords="2,201,0,201,0,0,100,102,2,201" 
        onmouseover="change_coin('-600px')" onmouseout="change_coin('0px')" />
    </map>
 
  </div>
</body>
</html>

Tu peux en avoir un aperçu dans cette page.

Il va de soit que les styles et le script devront être placés dans des fichiers externes.

**markal1** · 05/11/2008, 17h40

Merci beaucoup, GihefBey !!!

Je sentais bien qu'il y avait une solution simple, essentiellement basée sur le css, mais ne parvenais pas à aboutir !!!

Tu m'ôtes une épine ... que dis-je, un rosier du pied !!!!

Je vais bien tout décortiquer, tout comprendre, et l'adapter à mon cas.
Je mettrais à jour mon lien et signalerais mon pb comme résolu dès que j'y serais parvenu. En attendant, merci encore !!!

ça mérite au moins une hola ...

**markal1** · 05/11/2008, 19h38

Ca marche, génial !!!!

Merci beaucoup !

http://markal1.free.fr/tests-forums/camembert/

**GihefBey** · 08/11/2008, 13h20

Content que ça marche.

J'ai repensé à ta 1re méthode qui utilisait plusieurs images.
Et ça m'a fait penser aux questions qu'on rencontre sur les cartes avec mise en évidence de leurs régions.
J'ai donc ajouté une autre manière de faire ce que tu cherches avec plusieurs images.

C'est visible dans la mise à jour de la page que je te proposais.

-

**devyan** · 08/11/2008, 16h06

Envoyé par GihefBey

Content que ça marche.

J'ai repensé à ta 1re méthode qui utilisait plusieurs images.
Et ça m'a fait penser aux questions qu'on rencontre sur les cartes avec mise en évidence de leurs régions.
J'ai donc ajouté une autre manière de faire ce que tu cherches avec plusieurs images.

C'est visible dans la mise à jour de la page que je te proposais.

-

Désolé mais la page est vide (il n'y a rien dans "body")

Tu dois de toutes façon pouvoir en fait "mixer" les 2...
Je m'explique :
il est possible d'avoir des images "partielles" pour alléger mais la gestion de la MAP peut être réalisée à partir d'une seule image transparente et placée au dessus

**GihefBey** · 08/11/2008, 16h24

Envoyé par devyan

Désolé mais la page est vide (il n'y a rien dans "body")

Chez moi ce n'est pas vide.
http://validator.w3.org/check?uri=ht...e&group=1&ss=1

Envoyé par devyan

Tu dois de toutes façon pouvoir en fait "mixer" les 2...

En effet.
Avec ces deux propositions, chacun peut les mixer à souhait.

-

**devyan** · 08/11/2008, 17h28

Bizarre effectivement, je suis sous FireFox3

La page est vide à l'écran, Firebug dit également que body est vide mais l'affichage du source montre bien qu'il y a du contenu

(cette fois-ci tu as inséré le lien de validation w3c

)

**GihefBey** · 08/11/2008, 18h09

Les problèmes récurents sur toute plateforme que rencontre Ff3 font que je ne suis toujours pas passé à cette version.
Si j'avais cette possibilité, mon avatar dans ce forum serait probablement quelque chose qui ressemble à une pomme (Mac OSX - version 4) (-;

Le lien vers le W3C offre, en plus de pouvoir constater que le code est validé, la possibilité d'afficher le code source de la page, valide.

-

Mapping avec des "area" triangulaires : chevauchement

CSS

Discussions similaires

Partager

Partager