Как использовать usemap в фоновом URL

Question

я скучал по тебе вы не могли бы мне помочь? у меня такой стиль

.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;
}

Я хочу добавить usemap на изображение, возможно ли это?

Answer 1

Вы не можете поместить изображение в фоновом режиме.Если вам нужна эта функциональность, вам понадобится наложить объекты на одно и то же:

• Первый слой: только ваше изображение (не привязано к карте изображений)
• Второй слой: содержимоеконтейнер, который вы хотите отобразить над «фоном»
• Третий слой: еще одна копия изображения, привязанная к карте изображения, но прозрачная.

Вот пример: http://jsfiddle.net/jamietre/fgeee/1/

Ниже приведена общая конструкция для достижения этого эффекта.Он работает, имея карту изображений на верхнем слое (поэтому он будет активен), но привязан к прозрачному изображению.Фактическое изображение, которое вы видите, находится позади всего и не является прозрачным.

Вы также можете сделать это с двумя слоями, пропустив первое изображение и назначив его в качестве фона для layer2 div.Это будет работать только в том случае, если вы собираетесь отображать изображение с его собственным разрешением, поэтому может быть хорошо, но этот ответ имеет более общее назначение.

<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>

Примечания:

• Обертка обязана заставить абсолютное позиционирование работать
• * фильтр: .. css предназначен для поддержки IE <8, который не понимает непрозрачность. </li>

Answer 2

Я просто пришел сюда, потому что я пытался сделать то же самое, и я нашел один, чтобы использовать «карту» без изображения.

Как говорили другие люди, невозможно использовать карты без изображения, но вместо этого мы можем использовать DIV.

Что вы делаете, вы помещаете div поверхОсновное изображение и создать ссылку для этого DIV, ниже следует мой код:

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 моего примера.

Ссылка: Карты изображений CSS

Answer 3

Использование карты изображений для объекта с фоновым изображением невозможно. Атрибут usemap требует изображения (тег img).

Ссылка: http://www.w3schools.com/tags/att_img_usemap.asp