Картинка с всплывающим окном

Поделиться1Сб, 14 Июл 2012 19:42:27

Автор: ХаоС
Заслуженный
Зарегистрирован: Пн, 7 Июл 2008
Сообщений: 267
Уважение: +26
Позитив: +69
Последний визит:
Ср, 17 Май 2023 01:25:35

Добрый день!
На некоторых форумах встречала сбоку (справа, внизу экрана) небольшое изображение (на манер стрелок вверх и в низ страницы), но при нажатии на эту картинку, там всплывает разворачивающееся окошко. Как это называется и можно ли скрипт?
Как раз будет куда помощь игрокам поместить) Заранее благодарю.
(Пример не могу показать, уже не встречаю такого на форумах)
ЗЫ: В поиске смотрела, но без названия сложно найти...

Отредактировано ХаоС (Сб, 14 Июл 2012 19:43:22)

0

Поделиться2Сб, 14 Июл 2012 23:01:47

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51451
Уважение: +15415
Позитив: +12018
Последний визит:
Сегодня 09:49:55

патрик написал(а):

4. Как сделать колонку с информацией в шапке форума, каким кодом стоит воспользоваться?Например, вот.Буду очень благодарен за ответы.)

В HTML верх ставите div- блок и позиционируете в нужное место

кодом

<div style="height:112px; width:200px;border:red 1px solid; top:210px;margin-left:380px;position:absolute;z-index:100;">
Тут код вашей картинки или объявления ...
</div>

112 - Высота Блока;
200 - ширина Блока;
210 - Отступ от верхнего края экрана (*Регулируем
380 - Отступ вправо от текущего положения (*Регулируем - значение может быть как положительным, - так и отрицательным

*Все цифры красным регулируем под себя
Cинее - убираем, после успешного позиционирования

Код картинки обычно такой :

<img src="Ссылка на Картинку" alt=""/>

Внутрь вставляете

<style> /* Стиль всплывающего меню */
.splLink {width: 100px; height: 40px; border: 0px solid #FFD700; text-align: center; font-family: Gothic century; font-size: 15px; padding: 5px;}
.splCont {height: auto; width: 260px; background: #D2B48C; padding: 5px; z-index: 1000; margin-top: 5px; border: 2px solid #D2B48C; font-size: 12px; font-family: Lucida Sans Unicode; text-align: center;}

/* Тень, Прозрачка и Скругление углов во Всплывающем меню */
.splCont {background-color: transparent !important; background-image: url("http://savepic.ru/2408258.png");
border-radius:15px;
-webkit-border-radius:15px;
-khtml-border-radius:15px;
-moz-border-radius:15px;
-o-border-radius:15px;

box-shadow:0px 5px 14px #8B6C52;
-webkit-box-shadow:0px 5px 14px #8B6C52;
-khtml-box-shadow:0px 5px 14px #8B6C52;
-moz-box-shadow:0px 5px 14px #8B6C52;
/*text-shadow: #FFFFFF 1px 1px 4px !important;
color: #color: #000000 !important;*/
}
.splCont:first-letter {
font-family: "Times New Roman", Times, serif; /* Гарнитура шрифта первой буквы */
font-size: 200% !important; /* Размер шрифта первого символа */
color: red; /* Красный цвет текста */
} /* Конец Стиля всплывающего меню */
</style>
<DIV><div class=splLink><img src="http://i039.radikal.ru/0806/ec/a5ffc6d7cfd9.gif"/></div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>

Ваш Контент 1

</DIV></DIV>

Красным ссылка на картинку
В HTML низ (если у Вас нет такого кода, если есть ставить не нужно

Код:

<!--Спойлер - контейнер-->
<script type="text/javascript"> 
  $(document).ready(function(){
    $('.splLink').click(function(){
      $(this).parent().children('div.splCont').toggle('normal');
      return false;
    });
  });
</script>

+1