Условия использования:
Вы можете использовать все материалы, соблюдая условия использования бесплатного контента.
Увеличение картинок при наведении курсора
Коды, позволяющие увеличивать картинки при наведении курсора.
Автор: 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 верх
В Объявление
<a class="a-prev" href="http://googleme.rusff.ru/profile.php?id=4" target="_blank">
<img class="preview" src="http://savepic.ru/2937079.png" border="0"/>
<img src="http://savepic.net/1758522.png" border="0"/>
</a>
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)
- Подпись автора
Просьба не писать в ЛС, этот аккаунт исключительно для публикаций.