Увеличение картинок при наведении курсора
Коды, позволяющие увеличивать картинки при наведении курсора.

Автор: Deff
Платформа: любая
Демо:
[html]<style>
.a-prev:hover .preview{
display: block!important;
margin-left: -30px;
position: absolute!important;
margin-top: -35px!important;
z-index: 1;
}
.a-prev .preview{display:none}
</style>

<a  class="a-prev" href="#" target="_blank">
<img class="preview" src="https://forumupload.ru/uploads/0007/e3/f7/2/761327.png" border="0"/>
<img width=50 src="https://forumupload.ru/uploads/0007/e3/f7/2/761327.png" border="0"/>
</a>[/html]

Многие любят ставить в таблицу аватарчики админов. Но, если они очень большие, на помощь Вам летит скрипт увеличения при наведении. Thx, Дефф ^ ^
v.1
В Последнее время востребованный код увеличивающий Картинки администраторов, вставляемых в Объявление
В HTML верх

В Объявление( где нужно

Числовые значения красным - есть половина от разности ширины Большой картинки и малой( и соответственно половина разности от высоты большой картинки и малой

(*Первой в тегах <a идёт большая картинка

Конкретный пример:

В HTML верх

В Объявление

Ps:
(*Вообще значения

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

Ps2:
Часть кода для HTML верх - общая для всех картинок- ссылок

Вторую часть кода размножаем для нужных картинок - сколько влезет ( код расчитан на идентичные по размеру картинки

т.е все большие картинки одинаковые по величине между собой и все мелкие - аналогично

v.2
Демо:
[html]<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="https://forumupload.ru/uploads/0007/e3/f7/2/761327.png" width="60"/><div class="Myimg" style="display:none;"><img src="https://forumupload.ru/uploads/0007/e3/f7/2/761327.png" style="width:100%;"/></div></td>
<td><img class="tryam" src="https://forumupload.ru/uploads/0007/e3/f7/2/402676.png" width="60"/><div class="Myimg" style="display:none;"><img src="https://forumupload.ru/uploads/0007/e3/f7/2/402676.png" style="width:100%;"/></div></td>
<td><img class="tryam" src="https://forumupload.ru/uploads/0007/e3/f7/2/910877.png" width="60"/><div class="Myimg" style="display:none;"><img src="https://forumupload.ru/uploads/0007/e3/f7/2/910877.png" style="width:100%;"/></div></td>
</tr></table></div>
<!--Увеличилка картинок по наведению-->
<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></center>[/html]

Отредактировано Герда (20.05.13 03:49)