как должно быть
Возникла проблема - когда сайт открывается в IE6 или IE7, то начинается полный бардак с подарками (я уже не говорю про png-прозрачность -это уже побочный вопрос).
что получается в IE6:
1. когда только обновилась страничка div'ы с подарками (backgroundom сделано) смещены вправо относительно того, где должны быть на самом деле. Когда мышку подводишь он "прыгает влево" на "задуманное" для него место и уже подпрыгивает вверх-вниз как и положено. Далее, если мышку отвести от подарка (щас говорю только про закрытые подарки) то он остается на месте (это так и должно быть, просто описала поведение, если нет возможности протестить на разных версиях, я рассказываю про IE6).
2. а вот в IE7 закрытые подарки тоже смещаются при наведении мышки, но только из начальной точки "прыгают" влево.
(уточню: в IE6 подарок прыгает из т.Б в т.А;
в IE7 подарок прыгает из т.А в т.Б.)
Правильная точка - это точка А, в IE8 и других браузерах все нормально, т.е. ничего вправо-влево не должно прыгать, только подпрыгивать вверх-вниз при наведении.
основной код
<table style="background:#fff url('images/fon_right_1.jpg') repeat-x;" border="0" cellpadding=0 cellspacing=0>
<tr>
<td height="131px" style="background:url(images/fon_podarki.jpg) no-repeat; height:131px"><div id="p1">
<div id="b1" class="bb"></div>
<div id="b2" class="bb"></div>
<div id="b3" class="bb"></div>
<div id="b4" class="bb"></div>
<div id="b5" class="bb"></div>
</div></td>
</tr>
<tr>
<td style="padding-left:30px"><div id="t1"></div><!--поле, где будет писаться текст--></td>
</tr>
<tr>
<td height="20px" style="vertical-align:top" valign="top"><div id="rs" class="txt1"></div><!--текст в всплывающем окошке "Получить текст-->
<div id="txtp"></div><!--закладочки с циферками--></td>
</tr>
</table>
сам скрипт
var selBt;
var selb1;
var bx;
var timeID = 0;
var nJump;
var arEl;
var b1, b2, b3, b4, b5;
function setCookie (name, value, expires, path, domain, secure) {
document.cookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
}
function getCookie(name) {
var cookie = " " + document.cookie;
var search = " " + name + "=";
var setStr = null;
var offset = 0;
var end = 0;
if (cookie.length > 0) {
offset = cookie.indexOf(search);
if (offset != -1) {
offset += search.length;
end = cookie.indexOf(";", offset)
if (end == -1) {
end = cookie.length;
}
setStr = unescape(cookie.substring(offset, end));
}
}
return(setStr);
}
function Jump()
{
var h = $(bx).css("top");
if(nJump==0) h="20px";
else if(nJump==1) h="36px";
else if(nJump==2) h="23px";
else if(nJump==3) h="34px";
else if(nJump==4) h="27px";
else if(nJump==5) h="32px";
else h="30px";
$(bx).css("top", h);
if(nJump==6) return;
nJump++;
timeID=window.setTimeout(Jump, 300-nJump*30);
}
function StopJump()
{
window.clearTimeout(timeID);
timeID=0;
$(bx).css("top", "30px");
}
function Log(text)
{
//var t=$("#rs").html();
//t+=text+"<br/>";
//$("#rs").html(t);
}
$(document).ready(function() {
b1=$("#b1").get(0);
b2=$("#b2").get(0);
b3=$("#b3").get(0);
b4=$("#b4").get(0);
b5=$("#b5").get(0);
b1.ct=100;
b2.ct=100;
b3.ct=100;
b4.ct=100;
b5.ct=100;
b1.im = "url('images/otkrit_1.png')";
b2.im = "url('images/otkrit_2.png')";
b3.im = "url('images/otkrit_3.png')";
b4.im = "url('images/otkrit_4.png')";
b5.im = "url('images/otkrit_5.png')";
b1.im2 = "images/devushka_1.jpg";
b2.im2 = "images/devushka_2.jpg";
b3.im2 = "images/devushka_3.jpg";
b4.im2 = "images/devushka_4.jpg";
b5.im2 = "images/devushka_5.jpg";
Init();
Log("start");
//*
$("#p1 div.bb").mouseover(function()
{
Log("mouseover");
$(bx).css("top", "30px");
if(timeID!=0)
window.clearTimeout(timeID);
if(this.ct==200) return;
bx=this;
nJump=0;
Jump();
});
$("#p1 div.bb").mouseout(function()
{
Log("mouseout");
StopJump();
});
$("#p1 div.bb").click(function() { DoClick(this); });
//*/
var coo = getCookie("ulibka");
setCookie("ulibka", 0, "", "", "", "");
if(coo==1) { DoClick(b1); }
if(coo==2) { DoClick(b2); }
if(coo==3) { DoClick(b3); }
if(coo==4) { DoClick(b4); }
if(coo==5) { DoClick(b5); }
});
function DoClick(elm)
{
//*
$(selBt).css("border", "none");
$(selBt).css("top", "30px");
selBt=elm;
StopJump();
$(elm).css("background", elm.im);
//alert(elm.ct);
$("#devushka").attr("src", elm.im2);
elm.ct=200;
$("#txtp").html("");
if(elm.arr)
{
var l;
l=elm.arr.length;
if(l==1)
{
$("#t1").html(elm.arr[0]);
}
else
{
if(l>1)
{
var el;
for(var i=0;i<l;i++)
{
el = $("<div class='lbl' onClick='c(this)' >"+(l-i)+"</div>");
el = el.appendTo("#txtp").get(0);
el.et=elm.arr[i];
}
c(el);
}
}
}
Test();
//*/
}
function c(o)
{
//alert(o.et);
$(selb1).css("background-color", "white");
$(selb1).css("width", "18px");
selb1=o;
$(selb1).css("background-color", "#ffcb09");
$(selb1).css("width", "18px");
$("#t1").html( o.et );
}
function Test()
{
if( (b1.ct==200) && (b2.ct==200) && (b3.ct==200) && (b4.ct==200)&& (b5.ct==200))
{
$("#rs").attr("class", "txt").html("<a style=\"font-family:Tahoma;font-size:14px;font-weight:bold;\" href=\"#\" onClick=\"window.open('skidka.php', 'newWin', 'Toolbar=0, Location=0, Directories=0, Status=0, Menubar=0, Scrollbars=0, Resizable=0, Copyhistory=1, Width=430, Height=263')\">Получить скидку</a>");
}
}
function Init()
{
b1.arr = [//узнай идеи
"<span style=\"font-family:Tahoma;font-size:20px;font-weight:bold\">Новый горизонт идей</span><p style=\"font-family:Tahoma;font-size:13px;\"><i><b>текст вырезан в целях экономии символов</b></i></p>"
];
b2.arr = [ //ощути надежность
"<span style=\"font-family:Tahoma;font-size:20px;font-weight:bold\">Новый горизонт надежности</span><p style=\"font-family:Tahoma;font-size:13px;\"><i><b>текст вырезан в целях экономии символов</b></i></p>"
];
b3.arr = [ //почувствуй комфорт
"<span style=\"font-family:Tahoma;font-size:20px;font-weight:bold\">Новый горизонт комфорта</span><p style=\"font-family:Tahoma;font-size:13px;\"><i><b>текст вырезан в целях экономии символов</b></i></p>"
];
b4.arr = [ //удивись щедрости
"<p style=\"font-family:Tahoma;font-size:13px;\">И, наконец, большинство действующих акций могут быть совмещены в Вашем заказе.<br><br><i><b>текст вырезан в целях экономии символов </b></i></p>",
"<span style=\"font-family:Tahoma;font-size:20px;font-weight:bold\">Новый горизонт щедрости</span><p style=\"font-family:Tahoma;font-size:13px;\"><i><b>текст вырезан в целях экономии символов"
];
b5.arr = [ //улыбки
"<span style=\"font-family:Tahoma;font-size:20px;font-weight:bold\">Новый горизонт улыбок</span><p style=\"font-family:Tahoma;font-size:13px;\"><i><b>Что такое профессиональное обслуживание?</b></i>текст вырезан в целях экономии символов</b></i></p>"
];
}
страничка:
http://new-gorizont.oknarosta.ru/ulibnis.php