probleme area="poly" et placement de div [RESOLU]

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par webmasterdemonsite, 8 Octobre 2009.

  1. webmasterdemonsite
    webmasterdemonsite WRInaute impliqué
    Inscrit:
    1 Septembre 2007
    Messages:
    988
    J'aime reçus:
    0
    bonjour

    j'ai un probleme insoluble:

    sur une map (en rouge) je veux placer:

    [​IMG]

    - des div (en bleu et en jaune) qui affichent des fichiers images (gif avec transparence)
    et
    - des zones cliquables area sur les div en bleu et en jaune

    je parviens à afficher soit les div, soit les zones cliquables

    mais quand je tente d'afficher les deux, les div se superposent aux zones cliquables et la zone devient NON-cliquable...

    sachant que la balise <area> ne semble pas supporter background-iamge en css...

    un coup de pouce serait le bien venu, car j'ai passé la matinée sur ce probleme ...grr....

    bonne journée à tous
     
  2. aladdin
    aladdin WRInaute passionné
    Inscrit:
    29 Avril 2005
    Messages:
    1 235
    J'aime reçus:
    0
    Re: probleme area="poly" et placement de div

    essai d'utiliser le css z-index pour mettre ton area en avant plan.
    en mettant des div en z-index:0 et ton area en z-inde:1 par exemple ;)
     
  3. jeroen
    jeroen WRInaute passionné
    Inscrit:
    30 Août 2002
    Messages:
    2 131
    J'aime reçus:
    0
    Re: probleme area="poly" et placement de div

    Pourquoi ne pas mettre les liens directement sur les fichier image ?
     
  4. webmasterdemonsite
    webmasterdemonsite WRInaute impliqué
    Inscrit:
    1 Septembre 2007
    Messages:
    988
    J'aime reçus:
    0
    Re: probleme area="poly" et placement de div

    salut

    je ne connaisais pas z-index...donc j'ai essayé ceci:

    Code:
    <!-- la DIV de ma map -->
    
    <div style="position: absolute;
                left: 0px;
                top: 0px;
                width: 100px;
                height: 100px;
                ">
         <img src="map.bmp" width="100" height="100" border="0" usemap="#map" />
         <map name="map">
         <area style="z-index: 111111111;"  shape="rect" coords="30,22,67,54" href="#" />
         </map>
    </div>
    
    <!-- la DIV de l'objet -->
    
    <div style="z-index: 1;
                position: absolute;
                left: 30px;
                top: 22px;
                background-image: url(objet.bmp);
                width: 38px;
                height: 33px;
                ">
    </div>
    
    mais l'area ne semble pas au premiere plan et la zone n'est pas cliquable :(

    car l'image n'est pas carré...seule le polygone doit etre cliquable et le polygone doit etre une image...
     
  5. webmasterdemonsite
    webmasterdemonsite WRInaute impliqué
    Inscrit:
    1 Septembre 2007
    Messages:
    988
    J'aime reçus:
    0
    oups

    merci encore aladdin !

    en fait ca marche avec le z-index (dans mon dernier post, j'avais oublier de gérer la transparence des images...)

    encore merci, dire que j'ai passer 7heures sur ce probleme alors qu'un z-index etait la solution...
     
  6. aladdin
    aladdin WRInaute passionné
    Inscrit:
    29 Avril 2005
    Messages:
    1 235
    J'aime reçus:
    0
Chargement...
Similar Threads - probleme area=poly placement Forum Date
Probleme de visibilité de ma page Facebook Facebook Aujourd'hui à 03:56
problème avec le développeur Droit du web (juridique, fiscalité...) 22 Juin 2022
Problème désindexation des pages de Google Débuter en référencement 21 Juin 2022
Problème d'indexation de pages sur Google Problèmes de référencement spécifiques à vos sites 31 Mai 2022
problème de redirection non souhaitée Administration d'un site Web 28 Avril 2022
Problème d'indexation Produits Prestashop Crawl et indexation Google, sitemaps 28 Avril 2022
Problème d'affichage des campagnes Google Ads dans un tableau de bord Data Studio AdWords 26 Avril 2022
Problème de vitesse d'affichage des pages sur Analytics Google Analytics 26 Avril 2022
Problème : Google Crawl et Index des pages en No Index et bloqué par le robot.txt Crawl et indexation Google, sitemaps 26 Avril 2022
Problème avec GA4 : nb de visiteurs temps réel et par jour Google Analytics 19 Avril 2022
Problème indexation pages précises en React.js Débuter en référencement 19 Avril 2022
Problème de référencement Demandes d'avis et de conseils sur vos sites 8 Avril 2022
Problème adsence : Annonces ne s'affichent plus AdSense 10 Mars 2022
problèmes procédures stockées Administration d'un site Web 9 Mars 2022
Problème récupération fichier vps Développement d'un site Web ou d'une appli mobile 5 Mars 2022
Problème config postfix. Administration d'un site Web 5 Mars 2022
Search Console Problème d'indexation Crawl et indexation Google, sitemaps 24 Février 2022
Problème d'url canonique Problèmes de référencement spécifiques à vos sites 22 Février 2022
Problème indexation car élément "url" manquant sur logo Crawl et indexation Google, sitemaps 11 Février 2022
Problème avec un menu en ajax via jquery Problèmes de référencement spécifiques à vos sites 6 Février 2022