Forum : Map area en CSS, est-ce possible ?

Bonjour,

Comme vous pouvez le constater sur mon site, j'ai un drôle de menu circulaire, ce dernier fonctionne bien mais voilà, ça ourrait être bien mieux, vous remarquerez que lorsque l'on passe le curseur de la souris sur un des boutons, y'a des ratés parfois, en particulier quand on clique sur le bouton bonus.

Donc, je cherche à savoir s'il est possible d'ajouter dans mon CSS une balise de type Map area.

Tout d'abord, mon site se trouve là :
Mon site

Ensuite voilà à quoi ressemble mon CSS :

#menu{
    float:left;
    top:0px;
    left:0px;
    position: relative;
    background-repeat: no-repeat;
    z-index: 11;
}
#boutique{
    float:left;
    top:-207px;
    left:315px;
    position: relative;
    background-repeat: no-repeat;
    z-index: 11;
}
#bonus{
    float:left;
    top:-95px;
    left:316px;
    position: relative;
    background-repeat: no-repeat;
    z-index: 11;
}

.
.
.

Et voilà le contenu du TPL dans lequel j'ai mis mes boutons :

<div id="menu">
    <div id="boutique">
    <a href="{PATH}{LIEN_ITEM3}" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('boutique','','{PATH}templates/{THEME_GRAPHIQUE}/images/boutons/boutique-over.png',1)" class="boutique"><img src="{PATH}templates/{THEME_GRAPHIQUE}/images/boutons/boutique{IMAGE_STYLE3}.png" name="boutique" alt="Boutique" title="Boutique" width="125" height="197" border="0"/></a></div>

    <div id="bonus">
    <a href="{PATH}{LIEN_ITEM5}" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('bonus','','{PATH}templates/{THEME_GRAPHIQUE}/images/boutons/bonus-over.png',1)" class="bonus"><img src="{PATH}templates/{THEME_GRAPHIQUE}/images/boutons/bonus{IMAGE_STYLE5}.png" name="bonus" alt="Bonus" title="Bonus" width="233" height="86" border="0"/></a></div>

    <div id="podcasts">
    <a href="{PATH}{LIEN_ITEM22}" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('podcasts','','{PATH}templates/{THEME_GRAPHIQUE}/images/boutons/podcasts-over.png',1)" class="podcasts"><img src="{PATH}templates/{THEME_GRAPHIQUE}/images/boutons/podcasts{IMAGE_STYLE22}.png" name="podcasts" alt="Les podcasts" title="Les podcasts" width="58" height="177" border="0"/></a></div>

    <div id="programmes">
    <a href="{PATH}{LIEN_ITEM6}" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('programmes','','{PATH}templates/{THEME_GRAPHIQUE}/images/boutons/programmes-over.png',1)" class="programmes"><img src="{PATH}templates/{THEME_GRAPHIQUE}/images/boutons/programmes{IMAGE_STYLE6}.png" name="programmes" alt="Programmes" title="Programmes" width="208" height="89" border="0"/></a></div>

    <div id="radio">
    <a href="{PATH}{LIEN_ITEM30}" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('radio','','{PATH}templates/{THEME_GRAPHIQUE}/images/boutons/radio-over.png',1)" class="radio"><img src="{PATH}templates/{THEME_GRAPHIQUE}/images/boutons/radio{IMAGE_STYLE30}.png" name="radio" alt="La radio" title="La radio" width="150" height="155" border="0"/></a></div>

    <div id="logo"></div>
</div>

Donc voilà, vous avez tous les éléments, si vous avez une astuce, ça serait vachement bien.

Merci d'avance pour votre aide.

Grafikart

Non ce n'est pas possible

Thierry Chabenat

Auteur

Je suis sûr que c'est possible, par exemple, faire mon menu en Flash et le convertir en HTML5 pour des soucis de compatibilité, par contre, est-ce qu'il existe un bon convertisseur flash/html5 ? Jusque là, j'en ai jamais trouvé de vraiment bien.
Et puis j'ai eu une idée, c'était de faire mes Map area en html et de ne pas toucher à mon CSS puisque ce dernier ne gère que les positions géographiques. Je vais essayer, on verra bien. Je te tiens au jus.

Thierry Chabenat

Auteur

J'ai trouvé une solution à peu près potable, j'ai augmenté la valeur du Z-Index de mes boutons, du coup, ils sont à un niveau supérieur par rapport au logo central et il n'y a plus aucun problème quand on passe le curseur dessus mais par contre, le problème reste le même avec le sous-menu relatif au bouton bonus mais bon, je ferai sans doute un menu en flash un jour prochain, pour l'instant, ça ira bien comme ça, tout le monde est content.

Map area en CSS, est-ce possible ?

3 réponses