Всем привет.
Помогите,пожалуйста решить такую проблему:
У меня есть следующий блок(код ниже).т.е.в блоке с id="div009"( с относительной позицией) содержится блок class="grunt"(с абсолютной позицией к блоку с id="div009" ).У блока с id="div009" на background повешено изображение и при наведении мыши на div с class="grunt"(область для класса грунт задается координатами, код ниже) он становится видимым(код скрипта ниже) и соответственно накладывается на изображение которое стоит на background у блока с id="div009" .У меня на ноутбуке все накладывается идеально и в нужном месте(так как я подобрал left для своего монитора).Проблема в том,что как иолько меняется ширина окна браузера(даже незначительно) то и соответственно на других компах(с другими разрешениями мониторов) div с class="grunt" уже не накладывается на изображение блока с id="div009" в нужной мне области(так как изображение у блока с id="div009" смещается, а отступ у div с class="grunt" остается left=333px )
Я понимаю ,что мне надо при событии $(window).resize отслеживать изменение ширины окна и динамически менять отступ left.Но как я ни пытался ничего не выходит(отступ left рассчитывается неправильно).
Просьба, не пинайте ,а подскажите пожалуйста как это правильно сделать?
Код:
|
<map name="pic_montag">
<area shape="circle" coords="180,90,90" class="grunt">
</map> |
Код:
|
<div class="divSTD" style="width:100%; margin-top:5px">
<div id="div009" style="position: relative;">
<div class="grunt" style="display: none; font-family: verbana;
position: absolute;filter:alpha(opacity=70);opacity: 0.8; top: 10.5%;
left:333px;width: 164px;height: 164px; border-radius: 82px;
background: rgb(255, 255, 255);">'
<div style="margin-top: 24px;line-height:17px; color:black;
font-size:12px;cursor:pointer">
Без учета<br>особенностей грунта,<br>
даже самый хороший септик прослужит Вам не долго
</div>'
</div>
</div>
</div> |
$('.grunt').mouseleave(function() {
$('.grunt').hide();
});
$('.grunt').mouseenter(function() {
$('.grunt').show();
});