Гуру ява подскажите нубу хожу вокруг да около есть код взятый с интернета с красивым слайдером но как заставить этот слайдер менять opacity изображения не понимаю тк. знаю css и html но ява для меня пока сложно но очень нужна такая штука вот пример
зачем.
ЦЕЛЬ
ползунком регулировать opacity стекла тонировки от 0 - 100 тоесть есть картинка под ней гдето ползунок.Картинка есть, ползунок красивый есть, понятия как их связать нет))))
Спасибо зарание всем кто чем то поможет!)))
выматало оно меня))
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<style type="text/css">
#container{
background:url(bg.jpg)!important;
padding:100px 50px 0px 50px;
}
/*Фон слайдера*/
.slider {
width:230px;
height:11px;
background:url(slider-bg.png);
position:relative;
margin:0;
padding:0 10px;
}
/*Стиль кнопки слайдера*/
.ui-slider-handle {
width:24px;
height:24px;
position:absolute;
top:-7px;
margin-left:-12px;
z-index:200;
background:url(slider-button.png);
}
/*Элемент div результата, в котором выводится значение слайдера*/
#slider-result {
font-size:50px;
height:200px;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
width:250px;
text-align:center;
text-shadow:0 1px 1px #000;
font-weight:700;
padding:20px 0;
}
/*Полоска заполнителя слайдера*/
.ui-widget-header {
background:url(fill.png) no-repeat left;
height:8px;
left:1px;
top:1px;
position:absolute;
}
a {
outline:none;
-moz-outline-style:none;
}
</style>
</head>
<body>
<div id="container">
<div class="slider"></div>
<div id="slider-result">50</div>
<input type="hidden" id="hidden"/>
<script>
$( ".slider" ).slider({
animate: true,
range: "min",
value: 50,
min: 10,
max: 100,
step: 10,
//Получаем значение и выводим его на странице
slide: function( event, ui ) {
$( "#slider-result" ).html( ui.value );
},
//обновляем скрытое поле формы, так что можно передать данные с помощью формы
change: function(event, ui) {
$('#hidden').attr('value', ui.value);
}
});
</script>
</div>
</body>
</html>
