На этот раз точно JavaScript =)

[Makha]

Есть написаный мною по примеру слайдер (наверное так называется)
Javasсript

    sid = '';
    function show(id){
        if(sid != ''){
            document.getElementById(sid).style.display = "none";
        }
        document.getElementById(id).style.display = "block";
        sid = id;
    }
    
    
    function hideall(){
        if(sid != ''){
            document.getElementById(sid).style.display = "none";
            sid = '';
        }
    }

CSS

.slide {
	height: 350px;
	width: 730px;
}
.slide_img {
	display: none;
	height: 350px;
	width: 420px;
	float: left;
	position: relative;
	top: 0px;
	left: 0px;
}
.slide_block_link {
	float: right;
	height: 350px;
	width: 245px;
}
.slide_link_red {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFF;
	background-color: #efefef;
	display: block;
	height: 41px;
	width: 230px;
	padding: 7px;
	margin-bottom: 5px;
	background-image: url(../images/red_hover.jpg);
	position: relative;
	top: 0px;
	right: 0px;
}
.slide_link {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000;
	background-color: #efefef;
	display: block;
	height: 41px;
	width: 230px;
	padding: 7px;
	margin-bottom: 4px;
}
.slide_link:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #7b7a7a;
	background-color: #efefef;
	display: block;
	height: 41px;
	width: 230px;
	padding: 7px;
	margin-bottom: 4px;
}
.slide_link:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFF;
	background-color: #efefef;
	display: block;
	height: 40px;
	width: 230px;
	padding: 7px;
	margin-bottom: 5px;
	background-image: url(../images/red_hover.jpg);
}

.slide_img_red {
	display: block;
	height: 350px;
	width: 420px;
	float: left;
	position: relative;
	top: 0px;
	left: 0px;
}
#content {
	position:relative;
	width:480px;
	height: 67px;
	color:#fff;
	overflow:hidden;
	margin-top:-70px;
}

#transparent {
opacity:0.6;
filter:alpha(opacity=60);
-moz-opacity:0.6;
background-color:#000;
width:480px;
height: 67px;
position:absolute;
}

#text{ 
position:relative; 
padding: 10px;
}

html

<div class="slide">
        <div class="slide_img_red" id="bl1">
          <img src="images/big_photo.jpg" alt="" width="480" height="350" />
         <div id="content">
<div id="transparent"> </div>
<div id="text">
YOUR TEXT HERE 1
</div>
</div></div>
 
 
 <div class="slide_img" id="bl2">
          <img src="images/film.jpg" alt="" width="480" height="350" />
         <div id="content">
<div id="transparent"> </div>
<div id="text">
YOUR TEXT HERE 2
</div>
</div></div>


<div class="slide_img" id="bl3">
          <img src="images/med_photo.jpg" alt="" width="480" height="350" />
         <div id="content">
<div id="transparent"> </div>
<div id="text">
YOUR TEXT HERE 3
</div>
</div></div>

<div class="slide_img" id="bl4">
          <img src="images/banner.jpg" alt="" width="480" height="350" />
         <div id="content">
<div id="transparent"> </div>
<div id="text">
YOUR TEXT HERE 4
</div>
</div></div>

<div class="slide_img" id="bl5">
          <img src="images/map.gif" alt="" width="480" height="350" />
         <div id="content">
<div id="transparent"> </div>
<div id="text">
YOUR TEXT HERE 5
</div>
</div></div>

<div class="slide_img" id="bl6">
          <img src="images/photo.jpg" alt="" width="480" height="350" />
         <div id="content">
<div id="transparent"> </div>
<div id="text">
YOUR TEXT HERE 6
</div>
</div></div>
<div class="slide_block_link">
<a href="#" class="slide_link_red" onmouseover="show('bl1');">Том и Джерри — семейная пара предпенсионного возраста. Вечера и выходные они коротают ...</a>
<a href="#" class="slide_link" onmouseover="show('bl2');">Том и Джерри — семейная пара предпенсионного возраста. Вечера и выходные они коротают ...</a>
<a href="#" class="slide_link" onmouseover="show('bl3');">Том и Джерри — семейная пара предпенсионного возраста. Вечера и выходные они коротают ...</a>
<a href="#" class="slide_link" onmouseover="show('bl4');">Том и Джерри — семейная пара предпенсионного возраста. Вечера и выходные они коротают ...</a>
<a href="#" class="slide_link" onmouseover="show('bl5');">Том и Джерри — семейная пара предпенсионного возраста. Вечера и выходные они коротают ...</a>
<a href="#" class="slide_link" onmouseover="show('bl6');">Том и Джерри — семейная пара предпенсионного возраста. Вечера и выходные они коротают ...</a>
</div> 
        
        </div>

Он работает, но есть большое НО При первом наведении на ссылку блок прыгает вниз Но при повторном и последующих наведениях на ссылки он стоит как нужно и никуда не собирается...

скрины

Думаю накосячила где-то в стилях... Но выловить не могу Помогите пожалуйста разобраться в чем я не права?

Спасибо за помощь!

@темы: JavaScript

Comments

[alhames]

Используйте отладчик - FireBug для FF.
Значит где-то ошибка.. Скорее всего в customStyle (и зачем он вам вообще нужен?)

[alhames]

А вы плагин autoresize.jquery.min.js подключили?

[Makha]

А вы плагин autoresize.jquery.min.js подключили?

подключен.

Значит где-то ошибка.. Скорее всего в customStyle (и зачем он вам вообще нужен?)

Он там был) Я изменить ничего существенно в используемых скриптах еще не умею... Хоть и пытаюсь обязательно)

Сейчас уже адаптирую скрипты под ИЕ6... Некоторые выдают всякие бяки

Слайдер мой к примеру поехал

и как я его не пытаюсь маргинами поправить - не получается... Хех, наверное просто устала...

С утра опишу - засыпаю за клавой...

[Kakou ECTb]

Вы встали на тяжёлый путь верстальщика. Под все браузера поправить это целая наука

[alhames]

Угу.. У меня к примеру на ie6 уже нервов не хватает - ie7 с его глюками вполне достаточно..

[Makha]

alhames Ие7,8, Мозила, Опера, хром... Все ок Остался только ИЕ6

Kakou ECTb Верстка-то в ИЕ6 в порядке, а вот скрипты Буду пробовать делать как показывал выше alhames... Заодно и практика

[Makha]

Мда, от скрипта не зависит, все же верстка... ищу баг Т_Т