Показать сообщение отдельно
  #2 (permalink)  
Старый 28.06.2012, 10:46
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

<body style="padding-top:45px;">


<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<style>
table.prev {
width:0;
border-collapse:collapse;
border:solid 1px transparent;
}
table.prev td{
padding:0 4px;
}
.tryam{
border:solid 3px #fff!important;
}
.Myimg {
text-align:center;
border:solid 4px #fff!important;
border-bottom-width:6px!important;
background-color: #D6C59B;
width:100px;
position:absolute;
display:none;
z-index:100;
margin-top:-100px;
margin-left:-30px;


    box-shadow: 0px 2px 8px #7C7259;
    -webkit-box-shadow:0px 2px 8px #7C7259;
    -khtml-box-shadow:0px 2px 8px #7C7259;
    -moz-box-shadow:0px 2px 8px #7C7259;
    }
}
#ObrmlTable{
 padding:34px;
}
</style>
<center><div id=ObrmlTable>
<table class=prev><tr>
<td><img class="tryam" src="http://uploads.ru/i/Y/W/j/YWjoh.png" width="60"/><div class="Myimg" style="display:none;"><img  src="http://uploads.ru/i/Y/W/j/YWjoh.png" style="width:100%;"/></div></td>
<td><img class="tryam" src="http://uploads.ru/i/Y/W/j/YWjoh.png" width="60"/><div class="Myimg" style="display:none;"><img  src="http://uploads.ru/i/Y/W/j/YWjoh.png" style="width:100%;"/></div></td>
<td><img class="tryam" src="http://uploads.ru/i/Y/W/j/YWjoh.png" width="60"/><div class="Myimg" style="display:none;"><img  src="http://uploads.ru/i/Y/W/j/YWjoh.png" style="width:100%;"/></div></td>
</tr></table></div></center>
<!--Увеличилка картинок по наведению-->
<script type="text/javascript">
  $(document).ready(function(){
$('table.prev .Myimg').each(function (i){
  $(this).attr("alt",i)
});
  $('img.tryam').mouseover(function(){
  var a=$(this).parent().children('.Myimg').attr("alt")
    $('table.prev .Show').each(function (){
       if($(this).attr("alt")!=a)$(this).removeClass('Show').hide('slow');
    });
      $(this).parent().children('.Myimg').addClass('Show').show('slow');
    }).mouseout(function(){
    });
  $('.Myimg img').mouseover(function(){
    }).mouseout(function(){
      $(this).parent('.Myimg').removeClass('Show').hide('slow');
    });
  });
</script>


Ps:
(*Значения
.Myimg {
margin-left: -30px;
margin-top: -100px;

В общем случае зависят и от центрирования и размеров картинки( приведённые выше цифры были для картинки центрированной по левому краю - так что при первых неудачах в центрировании большой картинки - не огорчаемся - а подбираем цифру

Последний раз редактировалось Deff, 28.06.2012 в 11:07.
Ответить с цитированием