ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Проект от команды FD

☑ Поиск роли, партнёра, игрока.
☑ Легко. Удобно. Современно.
☑ Мы в процессе разработки.

Читать спойлеры

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее
Начался второй тур лотереи для форумов "Новогодний кот". Подаём заявки на участие до 8.12. Не пропустите!
Ищешь чем бы украсить свой форум или сайт к Новому году? 🎄 Мы поможем нарядиться! 🎄

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



Увеличение картинок при наведении курсора

Сообщений 1 страница 10 из 18

1

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

Автор: 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)

+2

2

faiko
вот спасибо *О* я то думал где взять этот скрипт))))

Отредактировано chrome (02.09.11 20:54)

Подпись автора

https://forumupload.ru/uploads/001b/1a/5a/29/194715.gif https://i.imgur.com/J116fWT.png

0

3

chrome
Потесть второй вариант, отпишись

0

4

faiko
работает прекрасно **
изменил данные (размер) тоже работает :3
никаких "загвоздок" нет

Подпись автора

https://forumupload.ru/uploads/001b/1a/5a/29/194715.gif https://i.imgur.com/J116fWT.png

+1

5

chrome
Прекрасно, спасибо http://i.smiles2k.net/aiwan_smiles/smile3.gif

0

6

первое - это не скрипт. это html+css
и оба кода будут работать не только на Mybb

кстати, есть у нас еще вот такая статья: Мини-галерея с авто-уменьшением изображений (HTML+CSS3)
подробно описан процесс создания авто-увеличения картинок + рассказано как красиво их оформить.

Подпись автора

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись! :)

0

7

faiko написал(а):

Дефф, отписывайся об обновлениях в скрипте

Чуток Исправленный Вариант 2

http://uploads.ru/i/L/W/k/LWkcE.png

Код:
<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>
<!--Увеличилка картинок по наведению-->
<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>

Отредактировано Deff (22.02.12 19:07)

Подпись автора

Скрипт мгновенных уведомлений new
(для замены от rusff), Платно! писать в Лс на РЕНО

+2

8

Deff, Ок.

0

9

Скажите, а можно чтобы аватары как -то были одного размера? Что поменять в коде? Я взял второй вариант, работает, всё устраивает.
http://uploads.ru/t/i/c/Q/icQjE.png
Спасибо

0

10

ruslan_as написал(а):

Скажите, а можно чтобы аватары как -то были одного размера? Что поменять в коде? Я взял второй вариант, работает, всё устраивает.

Xm А дайте ссылку на сайт с установленным кодом (В принципе по высоте изначальные должны быть одинаковы - если код правильный

Подпись автора

Скрипт мгновенных уведомлений new
(для замены от rusff), Платно! писать в Лс на РЕНО

0