непрозрачность imagemapster

Я работаю над проектом, в котором пользователь сможет наводить курсор на разные квартиры и видеть цену и т. Д. Во всплывающих подсказках рядом с каждой областью.

Я использую для этого jquery + imagemapster, где каждая квартира - это область на карте, и пока это отлично работает. Проблема в том, что клиент хочет, чтобы всплывающие подсказки были прозрачными, и когда я устанавливаю «непрозрачность» в стиле div, ничего не происходит, я пробовал все основные браузеры. Остальной CSS работает отлично, а непрозрачность работает с обычным div, но не внутри всплывающей подсказки. Как установить непрозрачность всплывающей подсказки?

Мой javascript выглядит так:

var image = $('#apartments1');
            image.mapster({
            toolTipClose: ["area-mouseout"],
            toolTipContainer: '<div style="border: 1px solid #ee6622; background: #FFFFFF; 
font-family:Arial; position:absolute; width:160px; padding:4px; margin: 4px;
 -moz-box-shadow: 0px 0px 7px #cc5511; ' + ' -webkit-box-shadow: 0px 0px 7px #cc5511; 
box-shadow: 0px 0px 7px #cc5511; -moz-border-radius: 6px 6px 6px 6px; 
-webkit-border-radius: 6px; ' +'border-radius: 6px 6px 6px 6px; opacity: 0.1;"></div>',
            clickNavigate: true,

javascript css opacity imagemapster
person SamD    schedule 19.12.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я создаю для вас небольшую демонстрацию (jsFiddle). Я просто скопировал вам html и css контейнера. В этом случае непрозрачность работает, но вы также можете увидеть проблему установки непрозрачности всплывающей подсказки на 10%: все это будет 10%, также и текст. Чтобы изменить это, используйте png в качестве фона или используйте два независимых друг от друга div, чтобы получить эффект.

Кстати: я бы вставил div с идентификатором, а затем стилизовал бы div в файле css. И opacity: 0.1; находится на каждом низком уровне, возможно, вы этого не видели.

person Daniel Kurz    schedule 19.12.2012