|
| Дата: Среда, 21.10.2009, 07:29 | Сообщение # 1 |
|
Группа: Администраторы
Сообщений: 1530
| <html>
<head>
<style>
img {cursor: pointer;border:0px}
#div1, #div2, #div3, #div4 {float:left;overflow:hidden;width:60px;height:150px;}
#div3 {float:left;overflow:hidden;width:300px;height:150px;}
</style>
</head>
<script>
function func(param) {
div1.style.width=60;
div2.style.width=60;
div3.style.width=60;
div4.style.width=60;
param.style.width=300;
}
</script>
<body>
<div style="position:absolute;top:50px;left:200px;width:500px">
<hr>
<div id=div1 onmouseover="func(div1)" onmouseout='func2(div1)'><img src=1.jpg width=160 class=image id=pic0 align=left>
<li>gggkgkgh
<li>gggkgkgh
<li>gggkgkgh
<li>gggkgkgh
</div>
<div id=div2 onmouseover="func(div2)" onmouseout='func2(div2)'><img src=2.jpg width=160 class=image id=pic1 align=left>
<li>gggkgkgh
<li>gggkgkgh
<li>gggkgkgh
<li>gggkgkgh
</div>
<div id=div3 onmouseover="func(div3)" onmouseout='func2(div3)'><img src=3.jpg width=160 class=image id=pic2 align=left>
<li>gggkgkgh
<li>gggkgkgh
<li>gggkgkgh
<li>gggkgkgh
</div>
<div id=div4 onmouseover="func(div4)" onmouseout='func2(div4)'><img src=4.jpg width=160 class=image id=pic3 align=left>
<li>gggkgkgh
<li>gggkgkgh
<li>gggkgkgh
<li>gggkgkgh
</div>
<div style="clear:both;height:1px"></div>
<hr>
</div>
</body>
</html>
|
| |
| |
|
| Дата: Суббота, 21.07.2012, 14:55 | Сообщение # 2 |
|
Группа: Администраторы
Сообщений: 1530
| Переписано для варианта с использованием jQuery по наведению и клику
<html>
<head>
<style>
img {cursor: pointer;border:0px;margin:5px 50px 100px 5px;float:left;width:60px;height:60px;}
#div1, #div2, #div3, #div4 {float:left;overflow:hidden;width:60px;height:150px;}
#div3 {float:left;overflow:hidden;width:300px;height:150px;}
.test {overflow:hidden;}
#div1 {background:#0ff;}
#div2 {background:#f00;}
#div3 {background:#00f;color:#fff}
#div4 {background:#ff0;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div style="position:absolute;top:50px;left:200px;width:500px;height:150px;overflow:hidden;">
<hr>
<div id='div1'>
<img src='1.jpg'class='image' oonmouseover="func('#div1')">
<div class="text">
<ul>
<li>gggkgkgh
<li>gggkgkgh
<li>gggkgkgh
<li>gggkgkgh
</ul></div>
</div>
<div id='div2'>
<img src='2.jpg' class='image' oonmouseover="func('#div2')">
<li>gggkgkgh
<li>gggkgkgh
<li>gggkgkgh
<li>gggkgkgh
</div>
<div id='div3'>
<img src='3.jpg' class='image' oonmouseover="func('#div3')">
<li>gggkgkgh
<li>gggkgkgh
<li>gggkgkgh
<li>gggkgkgh
</div>
<div id=div4>
<img src=4.jpg class='image' oonmouseover="func('#div4')">
<li>gggkgkgh
<li>gggkgkgh
<li>gggkgkgh
<li>gggkgkgh
</div>
<div style="clear:both;height:1px"></div>
<hr>
<script>
$("#div1,#div2,#div3,#div4").bind("mouseover", our_function);
function our_function(){
$("#div1,#div2,#div3,#div4").unbind("mouseover");
$("#div1,#div2,#div3,#div4").animate({width:"60px"},500);
$(this).animate({width:"300px"},500,function() {
$("#div1,#div2,#div3,#div4").bind("mouseover", our_function);
});
}
/*$("#div1,#div2,#div3,#div4").bind("click", our_function);
function our_function(){
$("#div1,#div2,#div3,#div4").animate({width:"60px"},500);
$(this).animate({width:"300px"},500);
};*/
</script>
</body>
</html>
|
| |
| |
Играйте бесплатно в 
