Форум

Graf737 · #1 (**permalink**) 16.04.2014, 18:38

Всем здрасьте! Помогите чайнику!
Есть таблица. В каждой ячейке расположены полупрозрачные картинки. При наведении курсора на одну из них она (и все картинки с таким же классом) становятся не прозрачными (100% цвета). Убираешь курсор - цвет пропадает. Хочу сделать, что бы при нажатии на любую из подсвеченных картинок - подсветка оставалась на всех картинках. При нажатии на другую группу картинок она тоже приобретала полный цвет. При втором нажатии - возврат в исходное положение. Сейчас подсветка не фиксируется. Реализовано через скрипт:
<style type="text/css" media="screen">
span.hovered {
filter: alpha(Opacity=100); /* Полупрозрачность для IE */
opacity: 1.0; /* Полупрозрачность для других браузеров */
}
span {
filter: alpha(Opacity=40); /* Полупрозрачность для IE */
opacity: 0.40; /* Полупрозрачность для других браузеров */
}
</style>
Подсказали вот это: http://jsbin.com/yumiv/1/edit?output

Это как раз то, что мне хотелось бы реализовать!
Но не могу разобраться, что вставить в свой скрипт!
К сожалению не силен в создании сайтов! Знаю, что надо учится, но совершенно нет времени! Может кто поможет?

Sweet · #2 (**permalink**) 16.04.2014, 19:34

Сообщение от Graf737

Знаю, что надо учится, но совершенно нет времени!

Тебе, конечно, помогут, но вообще, нет времени учиться - плати. Или может я потратил своё время на обучение, чтобы потом тратить своё время на безвозмездную помощь?

Graf737 · #3 (**permalink**) 16.04.2014, 20:20

Назовите свою цену!

devote · #4 (**permalink**) 16.04.2014, 22:13

Сообщение от Graf737

что вставить в свой скрипт!

дык все это:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Opacity</title>
  <style>
table{
  border:0;
  background-color:#DDD;
}
td{
  padding:7px;
}
img{
  cursor:pointer;
  opacity:0.5;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
  </style>
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript">
$(document).ready(function(){
  $('tr').mouseenter(function(){
    if(!$(this).hasClass('opa')){
      $(this).find('img').css('opacity',1);
    }
  }).mouseleave(function(){
    if(!$(this).hasClass('opa')){
      $(this).find('img').css('opacity',0.5);
    }
  });
  $('img').click(function(){
    var clotr=$(this).closest('tr');
    var trcls=clotr.attr('class');
    var imcls=$(this).attr('class');
    if(trcls!='opa'){
      clotr.addClass('opa').find('img').css('opacity',1); //в случае повторного клика
      clotr.siblings().removeClass('opa').find('img').css('opacity',0.5);
    }
    else{
      clotr.removeClass('opa').find('img').css('opacity',0.5);
    }
  });
});
  </script>
</head>
<body>
<table>
  <tr>
    <td>
      <img class="first" src="http://i.imgur.com/nPNGjXd.jpg">
    </td>
    <td>
      <img class="first" src="http://i.allday2.com/62/be/89/1372292167_wheat_field_04.jpg">
    </td>
  </tr>
  <tr>
    <td>
      <img class="first" src="http://i.imgur.com/nE5w65X.jpg">
    </td>
    <td>
      <img class="first" src="http://i.imgur.com/uPvA4wS.jpg">
    </td>
  </tr>
  </table>
</body>
</html>

Graf737 · #5 (**permalink**) 17.04.2014, 04:47

Я конечно чайник в вопросах создания сайтов, но не на столько же! Если бы все было так просто, разве я бы посмел отнимать время у уважаемых людей, потративших кучу времени на обучение!
Мне не нужен готовый код, он мне немного не подходит! Мне нужна одна единственная функция - включающая подсветку!

Форум

Справочник

Discord чат

Курсы javascript