Показать сообщение отдельно
  #1 (permalink)  
Старый 03.10.2009, 11:10
Новичок на форуме
Отправить личное сообщение для dima_mak Посмотреть профиль Найти все сообщения от dima_mak
 
Регистрация: 03.10.2009
Сообщений: 3

Динамическая смена слоёв
Нужно сделать три слой в каждом по 4 картинки и при клике на любую картинку данный слой исчезал и на его месте появлялся второй и тд.
написал так:
Код:
<script language="javascript">
<!--
var state = 'none';

function showhide(layer_ref) {

if (state == 'none') {
state = 'block';
}
else {
state = 'none';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}

</script> 

<div id="1"> 
<div style="float:right;padding-left:50px;">
     <img src="http://www.rollshop.co.il/img/ps_women.jpg" onClick="hide2('1');"></div>
<div>
   <a href="#" onclick="showhide('2');showhide('1');return false;">
      <img src="http://www.rollshop.co.il/img/ps_men.jpg">
   </a>
</div>
<div style="float:right;padding-top:50px;padding-left:50px;">
    <a href="" onclick="showhide('2');showhide('1');return false;">
      <img src="http://www.rollshop.co.il/img/ps_girls.jpg">
   </a>
</div>
<div style="padding-top:50px;">
     <a href="" onclick="showhide('2');showhide('1');return false;">
        <img src="http://www.rollshop.co.il/img/ps_boys.jpg">
     </a>
</div>
</div>
<div id="2" style="display:none"> 
<div style="float:right;padding-left:50px;">
     <a href="" onclick="ashowhide('3');showhide('2');return false;">
        <img src="http://www.rollshop.co.il/img/ps_beginner.jpg">
     </a>
</div>
<div>
     <a href="" onclick="showhide('3');showhide('2');return false;">
       <img src="http://www.rollshop.co.il/img/ps_intermediate.jpg">
     </a>
</div>
<div style="float:right;padding-top:50px;">
     <a href="" onclick="showhide('3');showhide('2');return false;">
        <img src="http://www.rollshop.co.il/img/ps_pro.jpg">
     </a>
</div>
</div>
<div id="3" name="3" style="display:none"> 
<div style="float:right;padding-left:50px;">
     <a href="choose.php?sel=1">
         <img src="http://www.rollshop.co.il/img/ps_fitness.jpg">
     </a>
</div>
<div>
     <a href="choose.php?sel=2">
          <img src="http://www.rollshop.co.il/img/ps_street.jpg">
     </a>
</div>
<div style="float:right;padding-top:50px;padding-left:50px;">
    <a href="choose.php?sel=3">
          <img src="http://www.rollshop.co.il/img/ps_agressive.jpg">
    </a>
</div>
<div style="padding-top:50px;">
      <a href="choose.php?sel=4">
           <img src="http://www.rollshop.co.il/img/ps_speed.jpg">
      </a>
</div>
</div>
здесь можно посмотреть рабочий пример.

все работает только в Мозиле. ИЕ не реагирует
Ответить с цитированием