Comment l'utilisation de usemap en div fond url

vous m'avez manqué
pouvez-vous m'aider? j'ai un tel style

.lorry{
    background: url(../img/lorry.png);background-repeat:no-repeat;
    _background: none;
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/lorry.png');
    height: 143px;
    width: 385px;
    float: left;
    margin: 39px 0 0 0;
}

Je veux ajouter usemap sur l'image, est-il possible?

OriginalL'auteur kusanagi | 2011-09-29

  1. 7

    Vous ne pouvez pas mettre une image map dans un arrière-plan. Si vous avez besoin de cette fonctionnalité, vous devrez les objets de la couche de réaliser la même chose:

    • Première couche: il suffit de votre image (qui n'est pas lié à une image map)
    • Deuxième couche: le contenu du conteneur que vous souhaitez voir apparaître sur la
      "arrière-plan"
    • Troisième couche: une autre copie de l'image liée à la
      l'image de la carte, mais transparent.

    Voici un exemple: http://jsfiddle.net/jamietre/fgeee/1/

    Ci-dessous est la construction générale pour obtenir cet effet. Il fonctionne en ayant une image map sur le calque le plus haut (de sorte qu'il sera actif), mais lié à une image transparente. L'image que vous voyez est derrière tout, et n'est pas transparent.

    Vous pouvez aussi le faire avec deux couches en sautant la première image, et de l'affecter comme un arrière-plan à la layer2 div. Cela ne fonctionnera que si vous allez à l'affichage de l'image dans sa résolution native, donc peut-être bien, mais cette réponse n'est plus d'usage général.

    <div id="wrapper">
    <img id="layer1" src="some/image.jpg">
    <div id="layer2" style="position: absolute; top: 0; left: 0;">
         Your content here
    </div>
    <img id="layer3" 
      style="position: absolute; top: 0; left: 0; opacity:0; *filter: Alpha(opacity=0);" 
      usemap="#your-map" src="some/image.jpg">
</div>

    Notes:

    • Le wrapper est nécessaire pour faire du positionnement absolu travail
    • l' *filtre: .. css est de supporter IE <8, qui ne comprend pas l'opacité.

    OriginalL'auteur Jamie Treworgy

  2. 5

    Je viens ici parce que j'ai essayé de faire la même chose, et j'en ai trouvé une un de l'utilisation de la "carte" sans image.

    Que les autres gens dit, n'est pas possible d'utiliser des cartes sans image, mais nous pouvons utiliser des DIV à la place.

    Ce que vous faites, vous placez un div sur l'image principale et de créer un lien pour que la DIV, ci-dessous suit mon code:

    HTML

    <div id="progress"> 
   <a id="link1" title="Symbol Link" href="#">Symbol Link</a>
   <a id="link2" title="Stack Link" href="#">Stack Link</a>
   <a id="link3" title="Overflow Link" href="#">Overflow Link</a>
</div>

    CSS

    #progress {
    width: 257px;
    height: 84px;
    background:url(http://upload.wikimedia.org/wikipedia/en/9/95/Stack_Overflow_website_logo.png);
    position:relative;
}
a#link1, a#link2, a#link3 {
    display: block;
    overflow: hidden;
    position: absolute;   
    background: transparent;
    text-indent: -9999px; 
}
#link1 {
    left: 10px;
    width: 45px;
    height: 84px;

}
#link2 {
    left: 55px;
    top: 45px;
    width: 70px;
    height: 39px;    
}
#link3 {
    top: 45px;
    left: 124px;
    width: 130px;
    height: 39px;    
}

    jsFiddle de mon exemple.

    Référence: Image CSS cartes

    C'est un chemin à parcourir, mais seulement si vous avez besoin des zones rectangulaires. Ce n'est pas possible lorsque l'on travaille avec des cercles et des polygones.

    OriginalL'auteur Eduardo Moratto

  3. 0

    À l'aide d'une image map sur un objet avec une image de fond d'écran n'est pas possible. L'attribut usemap nécessite une image (balise img).

    Référence: http://www.w3schools.com/tags/att_img_usemap.asp

    ce à quoi la solution?

    OriginalL'auteur Xavjer