Подсветка одинаковых элементов в таблице
Всем здрасьте! Помогите чайнику!
Есть таблица. В каждой ячейке расположены полупрозрачные картинки. При наведении курсора на одну из них она (и все картинки с таким же классом) становятся не прозрачными (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 Это как раз то, что мне хотелось бы реализовать! Но не могу разобраться, что вставить в свой скрипт! К сожалению не силен в создании сайтов! Знаю, что надо учится, но совершенно нет времени! Может кто поможет? |
Цитата:
|
Назовите свою цену!
|
Цитата:
<!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> |
Я конечно чайник в вопросах создания сайтов, но не на столько же! Если бы все было так просто, разве я бы посмел отнимать время у уважаемых людей, потративших кучу времени на обучение!
Мне не нужен готовый код, он мне немного не подходит! Мне нужна одна единственная функция - включающая подсветку! |
Часовой пояс GMT +3, время: 02:53. |