DH: Life for art.

Объявление

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

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

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

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

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

Страница: 1

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

1

  • Автор: Deff
  • Участник
  • Зарегистрирован: 2011-08-06
  • Приглашений: 0
  • Сообщений: 11
  • Уважение: +2
  • Позитив: +0
  • Провел на форуме:
    3 часа 23 минуты
  • Последний визит:
    2011-09-15 12:13:43

В Последнее время востребованный код увеличивающий Картинки администраторов, вставляемых в Объявление
В 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 идёт большая картинка

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

http://static.video.yandex.ru/lite/hostjs-mybb2011/m5kypzv18h.3212/

В 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.me/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

  • Автор: carlson
  • царь.
  • carlson
  • Откуда: Украина, Кривой Рог
  • Зарегистрирован: 2010-10-31
  • Приглашений: 4
  • Сообщений: 1826
  • Уважение: +84
  • Позитив: +79
  • Пол: Женский
  • Возраст: 29 [1994-11-23]
  • Провел на форуме:
    13 дней 13 часов
  • Последний визит:
    2012-07-17 17:46:30

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

0

3

  • Автор: Deff
  • Участник
  • Зарегистрирован: 2011-08-06
  • Приглашений: 0
  • Сообщений: 11
  • Уважение: +2
  • Позитив: +0
  • Провел на форуме:
    3 часа 23 минуты
  • Последний визит:
    2011-09-15 12:13:43

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

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

нету

#pun {
margin:0 auto;
}

в стиле

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

0

4

  • Автор: carlson
  • царь.
  • carlson
  • Откуда: Украина, Кривой Рог
  • Зарегистрирован: 2010-10-31
  • Приглашений: 4
  • Сообщений: 1826
  • Уважение: +84
  • Позитив: +79
  • Пол: Женский
  • Возраст: 29 [1994-11-23]
  • Провел на форуме:
    13 дней 13 часов
  • Последний визит:
    2012-07-17 17:46:30

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

  • Автор: Deff
  • Участник
  • Зарегистрирован: 2011-08-06
  • Приглашений: 0
  • Сообщений: 11
  • Уважение: +2
  • Позитив: +0
  • Провел на форуме:
    3 часа 23 минуты
  • Последний визит:
    2011-09-15 12:13:43

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

0

6

  • Автор: Deff
  • Участник
  • Зарегистрирован: 2011-08-06
  • Приглашений: 0
  • Сообщений: 11
  • Уважение: +2
  • Позитив: +0
  • Провел на форуме:
    3 часа 23 минуты
  • Последний визит:
    2011-09-15 12:13:43

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

Превью > 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

Страница: 1

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

Рейтинг форумов | Создать форум бесплатно