tat
Новичок
- Регистрация
- 16.03.2014
- Сообщения
- 1
есть такой сценарий (пример) для галереи, где я хотела сделать так , чтобы миниатюрки не двигались при наведении курсора........и ещё во всех браузерах показывает нормально, но в IE пишет что запрещено выполнение скриптов и т.д...но при нажатии на кнопку разрешить всё нормально работает........в чем проблема, помогите решить ,пожалуйста......
Код:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Новая страница 4</title>
<style type="text/css">
body {
font-family:verdana;
font-size:12px;
padding: 0;
margin: 0;
background: #000000 url('../../../../../../img/bgp.jpg');
width: 100%;
display: table
}
* {margin: 0; padding: 0;}
img {border: none;}
.container {
height: 360px;
width: 910px;
margin: -180px 0 0 -450px;
top: 50%; left: 50%;
position: absolute;
}
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 0;
float: left;
position: relative;
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px;
border: 0;
padding: 0;
background: ;
position: absolute;
left: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
ul.thumb li img.hover {
background:url('jquery/gallery_jquery/thumb_bg.png') no-repeat center;
border: medium none
}
#main_view {
float: left;
padding: 9px 0;
;
}
</style>
<script type="text/javascript" src="jquery/gallery_jquery/js/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Larger thumbnail preview
$("ul.thumb li").hover(function() {
$(this).css({'z-index' : '10'});
$(this).find('img').addClass(true).stop("hover")
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '0',
height: '0',
padding: '0'
}, 200);
} , function() {
$(this).css({'z-index' : '0'});
$(this).find('img').removeClass("hover").stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '100px',
height: '100px',
padding: '0'
}, 400);
});
//Swap Image on Click
$("ul.thumb li a").click(function() {
var mainImage = $(this).attr("href"); //Find Image Name
$("#main_view img").attr({ src: mainImage });
return false;
});
});
</script>
</head>
<body style="background-color: #FFFFFF; background-image: url('')">
<br>
<br>
<div class="container" style="background-color: #FFFFFF">
<ul class="thumb">
<li>
<a href="jquery/gallery_jquery/images/main_image1.jpg">
<img alt="" style="position: absolute; left: 0; top: 0" src="jquery/gallery_jquery/images/thumb1.jpg" width="100" height="100" /></a></li>
<li>
<a href="jquery/gallery_jquery/images/main_image2.jpg">
<img alt="" style="; position:absolute; left:0; top:0" width="100" height="100" src="jquery/gallery_jquery/images/thumb2.jpg" /></a></li>
<li>
<a href="jquery/gallery_jquery/images/main_image3.jpg">
<img alt="" style="position: absolute; left: 0; top: 0" src="jquery/gallery_jquery/images/thumb3.jpg" width="100" height="100" /></a></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id="main_view">
<img alt="" src="jquery/gallery_jquery/images/main_image1.jpg" width="518" height="400" /></a><br />
</div>
</body>
</html>
