28172 sujets

CSS et mise en forme, CSS3

Zones réactives polygonales

Bonjour,
Je suis débutant et je singe ce que je trouve sur votre site pour arriver à mes fins.
Sur le site de "pompage.net" j'ai trouvé (grâce à vous) et réussi à créer des zones réactives rectangulaires. Cela fonctionne très bien. Mais, j'ai un petit soucis:
Deux zones réactives rectangulaires recouvrent totalement une petite zone que je souhaite rendre également réactive.
Pour pallier ce problème, je souhaite créer 3 zones polygonales afin que ces 3 parties sélectionnables ne se recouvrent pas.

1) est il possible de réaliser des zones polygonales ou quelque chose qui résoudrait mon problème en utilisant le CSS ?
ça m'arrangerait bien car j'ai presque terminé, il me manque juste cette petite zone !

2) En cherchant à combiner ce que j'ai déja fait avec du HTML pur, j'ai trouvé area shape mais cela ne fonctionne pas et je ne sais pas si ça peut fonctionner. Voici une partie de mon code.


...</ul>
</div>
<ul id="blobs">
  <li style="left: 177px; right: auto; top: 39px; bottom: auto; height: 179px; width: 111px;" id="blob1"><a href="Zones/EstuaireCROSSA.html"></a></li>
  <li style="left: 128px; right: auto; width: 50px; top: 31px; bottom: auto; height: 75px;" id="blob2"><a href="Zones/ZONE_1.html"></a></li>
  <li style="left: 88px; right: auto; width: 64px; top: 103px; bottom: auto; height: 0px;" id="blob3"><a href="Zones/ZONE_2.html"></a></li>...

...<imag name="imagemappe" src="images/ZonesARouge.png" width="300" height="100" border="0" usemap="#map" />
<map name="map">
<area shape="poly" coords="104,469,110,469,116,437,124,430,135,430,140,435,149,431,157,434,163,428,137,396,129,405,132,411,112,432,106,468" 
alt="Zone A" href="images/Zone_A.png" onmouseover="document.images['imagemappe'].src='images/ZoneARouge.png'; onmouseout="document.images['imagemappe'].src='images/zoneABleu.png';"/>
</map>
</ul>
</div>
</body>


Merci d'avance pour l'aide que vous pourrez m'apporter
Bonjour,

LucNo a écrit :
1) est il possible de réaliser des zones polygonales ou quelque chose qui résoudrait mon problème en utilisant le CSS ?

Non.

LucNo a écrit :
2) En cherchant à combiner ce que j'ai déja fait avec du HTML pur, j'ai trouvé area shape mais cela ne fonctionne pas et je ne sais pas si ça peut fonctionner.

Ça peut fonctionner. Par contre, ton code est assez largement faux:
- tu ne peux pas placer une image ou un élément MAP comme enfants directs de l'élément UL;
- l'élément IMAG n'existe pas en HTML... je suppose que tu voulais utiliser un élément IMG?
- attention aux effets JavaScript (onmouseover, onmouseout)... si c'est mal géré, ça ne fonctionnera tout simplement pas (et pour le gérer correctement, une connaissance minimale de JavaScript est nécessaire... le copier-coller ne te donnera probablement pas un résultat correct).
ReBonjour et merci pour tes réponses
En ce qui concerne la première, c'est clair.
Quant à la seconde, en me disant que cela peut fonctionner tu me mets l'eau à la bouche. J'ai modifié imag par img puis j'ai sorti le code de l'element UL. Mais cela ne fonctionne toujours pas.
Comme je suis plus que limité en matière de programmation, j'attends une réponse plus précise. En fait, je n'ai pas le choix car je ne sais pas quoi faire.

Merci encore
Sujet clos
Aller à