Добавить изменение opacity
всем привет. помогите плиз! есть 3 картинки, по клику показывает div, относящийся к ней, и прячет другие.
<table width="100%"> <tr> <td align="right"><a href="#div1" class="link"><img src="1.png" width="100" height="101" /></a></td> <td align="center" width="20%"><a href="#div2" class="link"><img src="2.png" width="100" height="101" /></a></td> <td align="left"><a href="#div3" class="link"><img src="3.png" width="100" height="101" /></a></td> </tr> </table> <div class="bar" id="div1"> </div> <div class="bar" id="div2"> </div> <div class="bar" id="div3"> </div> вот javascript
$('.link').on('click', function(e) {
e.preventDefault();
$('.bar').each(function() {
$(this).css('display', 'none');
});
var block = $(this).attr('href');
$(block).css('display', 'block');
});
и css
#div2, #div3{display:none;
}
как добавить изменение opacity к картинкам? активный (1), скрытые - 0.5 |
|
посмотрел тему, не понял как с помощью этого можно изменить прозрачность у картинок.
может не понятно написал в первом посте. но смысл следующий: сейчас есть 3 катинки. изначально показывает div1 (div2 и div3 - display:none), если кликнуть на вторую картинку, то показывает div2 (div1 и div3 - display:none), по третьей - виден div3 (div1 и div13 - display:none). нужно дополнить изменение прозрачности у картинок. изначально 1.png opacity:1 (у 2.png и 3.png - opacity:0.5), кликнули по второй (показал div2), изменили opacity у картинки на 1 (у других сделали opacity:0.5) и т.д. |
msncom,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.bar{
display: none;
height: 200px;
border: rgb(255, 0, 255) solid 2px;
background-color: rgb(34, 139, 34);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function(){
var $link = $('.link'), $img = $('img', $link), $bar = $('.bar');
$link.each(function(i, a){
$(a).on('click', function(e) {
e.preventDefault();
$img.not($('img', a).fadeTo(0, 1)).fadeTo(0, 0.5);
$bar.not($bar.eq(i).show()).hide()
})
}).eq(0).click();
})
</script>
</head>
<body>
<table width="100%">
<tr>
<td align="right"><a href="#div1" class="link"><img src="http://i020.radikal.ru/1312/4e/59eef621bf6a.jpg" width="100" height="101" /></a></td>
<td align="center" width="20%"><a href="#div2" class="link"><img src="http://i020.radikal.ru/1312/4e/59eef621bf6a.jpg" width="100" height="101" /></a></td>
<td align="left"><a href="#div3" class="link"><img src="http://i020.radikal.ru/1312/4e/59eef621bf6a.jpg" width="100" height="101" /></a></td>
</tr>
</table>
<div class="bar" id="div1">1
</div>
<div class="bar" id="div2">2
</div>
<div class="bar" id="div3">3
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 17:46. |