Тестовое сообщение

В 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 верх - общая для всех картинок- ссылок
Вторую часть кода размножаем для нужных картинок - сколько влезет ( код расчитан на идентичные по размеру картинки
т.е все большие картинки одинаковые по величине между собой и все мелкие - аналогично

v.2
Deff написал(а):
Вот Еще Вариант:
Превью > 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двиг вверх - примерно равен третьей части высоты большой...
Оба параметра - регулируем

0

Поделиться82011-09-03 19:04:28

Автор: 'yestare
Администратор
Зарегистрирован: 2011-06-17
Приглашений: 0
Сообщений: 25
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
18 часов 11 минут
Последний визит:
2012-06-18 19:08:15

Скрипт устанавливаем в начало HTML низ (*Если используем скрипт информирующий о новых сообщениях, ставим его раньше данного скрипта
<script>
navlinks=new Array(
"navextra1", // Дополнительный пункт меню 1
"Ссылка на картинку","Ссылка на картинку при наведении",
"navextra2", // Дополнительный пункт меню 2
"Ссылка на картинку","Ссылка на картинку при наведении",
"navextra3", // Дополнительный пункт меню 3
"Ссылка на картинку","Ссылка на картинку при наведении",
"navindex", // Форум
"Ссылка на картинку","Ссылка на картинку при наведении",
"navuserlist", // Участники
"Ссылка на картинку","Ссылка на картинку при наведении",
"navrules", // Правила
"Ссылка на картинку","Ссылка на картинку при наведении",
"navsearch", // Поиск
"Ссылка на картинку","Ссылка на картинку при наведении",
"navprofile", // Профиль
"Ссылка на картинку","Ссылка на картинку при наведении",
"navpm", // Сообщения
"Ссылка на картинку","Ссылка на картинку при наведении",
"navadmin", // Администрирование
"Ссылка на картинку","Ссылка на картинку при наведении",
"navregister", // Регистрация
"Ссылка на картинку","Ссылка на картинку при наведении",
"navlogin", // Войти
"Ссылка на картинку","Ссылка на картинку при наведении",
"navlogout", // Выход
"Ссылка на картинку","Ссылка на картинку при наведении" // !ПОСЛЕДНИЙ элемент без запятой
)
var s0,s1,s2,s3,i; for (i=0; i < navlinks.length; i++){s0=navlinks[i+1];s1="onmouseover=\"this.src='"+navlinks[i+2]+"'\""; s2="onmouseout=\"this.src='"+s0+"'\"";s3='<img class="navlinks" src="'+s0+'" '+s1+' '+s2+' border="0" />';$("#"+navlinks[i]+" a").html("<span>"+s3+"</span>");i++;i++; }
</script>
Вместо красного - Подставляем свою ссылку на картинку
Первые три пункта - можно убрать, если у Вас нет дополнительных(своих) Пунктов меню в Навигации
(или дополнить, если у Вас их большее количество. Нумерация navextraX в первой позиции будет идти далеее: navextra4, navextra5.... и.т.д.)
Названия Доп. пунктов меню, идут по порядку вставленности их в Окно Дополнительные Пункты меню (администрирование-настройки), т.е сверху-вниз, и не зависят от позиции их размещения на панели навигации
*Если всё таки нужна цифра кол-ва сообщений (после картинки -"Cообщения")
Cтавим следущий Скрипт-Заплатку перед предыдущим скриптом:
<script>
var clr=($("#navpm a").css("color"));var chng=" (";
var subs="</span><span style=\"color:"+clr+";\" id=\"news_messag\">(";
$("#navpm a").html($("#navpm a").html().replace(chng,subs));
$("#news_messag").appendTo("#navpm");
</script>
!!!Внимание - если вы не хотите, чтобы окружающее изображение дергалось и смещалось до наведения и после: Оба изображения в паре(до наведения и после) должны иметь одинаковый внешний размер!

0

Поделиться92011-09-03 20:15:05

Автор: 'yestare
Администратор
Зарегистрирован: 2011-06-17
Приглашений: 0
Сообщений: 25
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
18 часов 11 минут
Последний визит:
2012-06-18 19:08:15

+|_

ррррррв

0

Поделиться102011-09-03 20:17:02

Автор: 'yestare
Администратор
Зарегистрирован: 2011-06-17
Приглашений: 0
Сообщений: 25
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
18 часов 11 минут
Последний визит:
2012-06-18 19:08:15

Замена ссылок Профиль - ЛС - Email картинками
<script type="text/javascript">
var trr=document.getElementsByTagName("ul")
var fi=0
for (fi=0; fi<=(trr.length-1);fi++)
{if (trr[fi].innerHTML.indexOf("pl-email")!=-1)
{var drr=trr[fi].getElementsByTagName("a")
drr[0].innerHTML="<img src='картинка Профиль' />"
drr[1].innerHTML="<img src='картинка ЛС' />"
drr[2].innerHTML="<img src='картинка Email' />"
}}
</script>

0

Поделиться112011-09-03 20:19:34

Автор: 'yestare
Администратор
Зарегистрирован: 2011-06-17
Приглашений: 0
Сообщений: 25
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
18 часов 11 минут
Последний визит:
2012-06-18 19:08:15

</div>
</div>

0

Поделиться122011-09-03 20:22:18

Автор: 'yestare
Администратор
Зарегистрирован: 2011-06-17
Приглашений: 0
Сообщений: 25
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
18 часов 11 минут
Последний визит:
2012-06-18 19:08:15

Cпасибо Admin.
Убрать слово "Объявление" которое отображается на первой (верхней) строчке самого объявления. хтмл - верх ставить.
Код:
<style type="text/css">
#pun-announcement h2 {display: none}
#pun-announcement .container {padding-top: 1em}
</style>

0

Поделиться132011-09-03 20:24:15

Автор: 'yestare
Администратор
Зарегистрирован: 2011-06-17
Приглашений: 0
Сообщений: 25
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
18 часов 11 минут
Последний визит:
2012-06-18 19:08:15

Код:

Замена надписей Новые сообщения и т.д. Duka

FCKL
<script type="text/javascript">
li=document.getElementsByTagName("li")
f=0
while(li[++f]){
s=li[f].innerHTML
if((p=s.indexOf("Новых сообщений")) != -1) li[f].innerHTML=s.substring(0,p)+"<img src='адрес картинки1'>"+s.substring(p+15)
else if((p=s.indexOf("Активные темы")) != -1) li[f].innerHTML=s.substring(0,p)+"<img src='адрес картинки2'>"+s.substring(p+13)
else if((p=s.indexOf("Сообщения без ответов")) != -1) li[f].innerHTML=s.substring(0,p)+"<img src='адрес картинки3'>"+s.substring(p+21)
else if((p=s.indexOf("Мои сообщения")) != -1) li[f].innerHTML=s.substring(0,p)+"<img src='адрес картинки4'>"+s.substring(p+13)
else if((p=s.indexOf("Подписка")) != -1) li[f].innerHTML=s.substring(0,p)+"<img src='адрес картинки5'>"+s.substring(p+8)
else if((p=s.indexOf("Все прочитано")) != -1) li[f].innerHTML=s.substring(0,p)+"<img src='адрес картинки6'>"+s.substring(p+13)
}
</script>
вместо
Адрес картинки1 - пишите адрес для Новых сообщений
Адрес картинки2 - адрес для Активные темы
Адрес картинки3 - Сообщений без ответов
Адрес картинки4 - Мои сообщения
Адрес картинки5 - Подписка
Адрес картинки6 - Все прочитано
Проверил на работоспособность, вроде написал правильно... если что-то не так, говорите, доработаю

0