| dima_mak |
03.10.2009 11:10 |
Динамическая смена слоёв
Нужно сделать три слой в каждом по 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>
здесь можно посмотреть рабочий пример.
все работает только в Мозиле. ИЕ не реагирует |