DH: Life for art.

Объявление

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

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

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


Вы здесь » DH: Life for art. » Скрипты, коды » Увеличение по "наведению" Картинок Администраторов Модераторов


Увеличение по "наведению" Картинок Администраторов Модераторов

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

1

В Последнее время востребованный код увеличивающий Картинки администраторов, вставляемых в Объявление
В 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="Полноразмерная картинка" border="0"/>
<img src="мини картинка" border="0"/>
</a>

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

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


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

В 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="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:
(*Вообще значения

margin-left: -30px;
margin-top: -35px!important;

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


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

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

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

Отредактировано Deff (2011-08-07 14:14:23)

+1

2

Дефф, есть вопрос. Гляди, http://unikoum.rolka.su/
Между собой картинки одинаковы и мне для первой вроде бы удалось настроить значения, а со второй лажа.

0

3

carlson Тут лажа для начала в скроллинге

зажми сонтрл и крути колесо мыши - увидишь что фор движецо влево - а картинка стоит

нету

#pun {
margin:0 auto;
}

в стиле

Поиск по первому Окну стиля -жмём контрл+F
(А второе - на данный момент картинок на Главной - не вижу - ткни на скриншоте

0

4

Deff,

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

нету в стиле

Есть он, просто в таком вот варианте:

/* A5.1 */
#pun {
  margin: 0px auto auto auto;
  width : 100%;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 20px;
  padding-right: 15px;
  border-style: none;
  background-color: #opacity;
  width: 750px;
  border-width: 0px;
float: left;}

Код убирала на время установки таблицы, сейчас поставила. Гляди, когда они стоят в столбик, то отражаются как надо, а когда в строку - полноразмерное изображение смещается. Значения -35 и -30 я изменила на -10; -15, но ситуация не изменилась.

0

5

http://www.kolobok.us/smiles/standart/blush2.gif ну Бум думать...

0

6

Вот Еще Вариант:

Превью > http://hostjs-mybb2011.narod.ru/uvelichilka.htm
Вставляем туда, где нужны картинки

<style>
table.prev {
border-collapse:collapse;
border:solid 1px transparent;
}
table.prev td{
padding:0 24px;
}
.Myimg {
width:150px;
position:absolute;
display:none;
z-index:100;
margin-top:-125px;
margin-left:-53px;
}
</style>

<table class=prev><tr>

<td><img class="tryam" src="http://mybb.ru/f/collection/0208.gif" width="50"/><div class="Myimg" style="display:none;"><img  src="http://mybb.ru/f/collection/0208.gif" style="width:100%;"/></div></td>

<td><img class="tryam" src="http://mybb.ru/f/collection/0208.gif" width="50"/><div class="Myimg" style="display:none;"><img  src="http://mybb.ru/f/collection/0208.gif" style="width:100%;"/></div></td>

<td><img class="tryam" src="http://mybb.ru/f/collection/0208.gif" width="50"/><div class="Myimg" style="display:none;"><img  src="http://mybb.ru/f/collection/0208.gif" style="width:100%;"/></div></td>

</tr></table>
<!--Увеличилка картинок по наведению-->
<script type="text/javascript">
  $(document).ready(function(){
  $('img.tryam').mouseover(function(){
      $(this).parent().children('.Myimg').show('slow');
    }).mouseout(function(){
    });

  $('.Myimg img').mouseover(function(){
    }).mouseout(function(){
      $(this).parent('.Myimg').hide('slow');
    });
  });
</script>


Пояснения:
Вставляем картинки табличкой;

Размножаемый элемент таблички -ячейка - выделен синим жирным
Ссылки на картинки - красным

Первая картинка - малая - вторая - большая
(*в данном, конкретном случае, получилось, что обе  картинки идентичны..размер большей и меньшей задается настройками

<td><img class="tryam" src="http://mybb.ru/f/collection/0208.gif" width="50"/><div class="Myimg" style="display:none;"><img  src="http://mybb.ru/f/collection/0208.gif" style="width:100%;"/></div></td>

50 -Размер малой картинки - задаём непосредственно в размножаемом блоке
Пояснения по коду стиля

.Myimg {
width:150px;
position:absolute;
display:none;
z-index:100;

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

table.prev td{
padding:0 24px;
}


После установки таблицы, необходимо:
  Центрировать положение больших всплывающих картинок относительно исходных - малых:

z-index:100;
margin-top:-125px;
margin-left:-53px;
}

-125 - cдвиг влево( приблизительно ширина большой картинки минус ширина малой
-53 - cдвиг вверх - примерно равен третьей части высоты большой...

Оба параметра - регулируем

Отредактировано Deff (2011-09-02 18:58:14)

0


Вы здесь » DH: Life for art. » Скрипты, коды » Увеличение по "наведению" Картинок Администраторов Модераторов


Рейтинг форумов | Создать форум бесплатно © 2007–2020 «QuadroSystems» LLC