При наведении мышки появляется окно!

Sat · 31 Авг 2007

Два вопроса:

1.У вас если навести на статьи или на рейтинг и ещё некоторые рекламки,появляется окошко с описанием,как такое сделать?

2.Можно ли с помощью такого же окошка сделать,чтоб когда наводишь мышку на аватар,появлялась инфа о пользователе?

Vladiger · 1 Сен 2007

<div align="center"><span style="color:#FF0000"><span style="font-size:14pt;line-height:100%"><b>Всплывающие подсказки onMouseOver</b></span></span></div>
Для начала скачайте скрипт wz_tooltip.js Скачать скрипт можно с <a href="http://www.walterzorn.com/" target="_blank">оффициального сайта разработчика</a>.
<a href="http://www.walterzorn.com/scripts/wz_tooltip.zip" target="_blank">Download wz_tooltip.js</a>
Распакуйте архив и загрузите файл скрипта wz_tooltip.js на сервер в дирректорию <b>style_images/<span style="color:#FF0000">Ваш скин</span>/folder_js_skin/</b>
Именно в этой дирректории желательно хранить все подключаемыe JavaScript скрипты, так как при экспорте вашего скина, все JavaScript в этой дирректории будут так-же экспортированы и не будут утеряны в случае архивации вашего экспортированного скина. При дальнейшей установки (импорте) вашего скина на другом форуме, все JavaScript так же распакуются.
Для удобства работы (экспериментов), откройте два окна браузера:
Одно окно с основным форумом, где мы будем просматривать результат операций, другое окно Панель Администратора, где мы будем выполнять изменения.
Итак, что-бы не было расхождений с описанием ниже, экспериментировать будем в "Классическом стиле IPB (синем)". Для этого создайте стиль "Test" из родительского "Классического стиля IPB"

Заходим в панель Администратора:
<b>Админцентр > ВНЕШНИЙ ВИД > Опции (в строке "Стили") > Создать новый стиль</b>
Введите название стиля <b>Test</b> и нажмите "Создать".
Сделайте стиль "Test" стилем по умолчанию, а так же выберите этот стиль "Test" на форуме (слева внизу, в форме выбора стиля).
<b>Админцентр > ВНЕШНИЙ ВИД > Опции (в строке стиля Test) > Изменить HTML шаблоны > skin_global (глобальные шаблоны) > global_board_header</b>
Найдите строчку:<div class='codetop'>Код</div><div class='codemain'><script type="text/javascript" src='{$this->ipsclass->vars['img_url']}/folder_js_skin/ips_menu_html.js'></script></div>
Добавьте ниже:<div class='codetop'>Код</div><div class='codemain'><script type="text/javascript" src='{$this->ipsclass->vars['img_url']}/folder_js_skin/wz_tooltip.js'></script></div>
Найдите далее:<div class='codetop'>Код</div><div class='codemain'>alt='IPB'</div>
Замените на:<div class='codetop'>Код</div><div class='codemain'>onMouseOver="Tip('{$this->ipsclass->vars['board_name']}', TITLE, 'Тестовая панель', CLOSEBTN, true, STICKY, true, WIDTH, 300)"</div>
Сохраните шаблон и проверьте работает ли скрипт? Для этого обновите страницу форума и наведите мышкой на логотип форума (слева вверху). Должна выскочить всплывающая подсказка "Invision Power Board".
Если скрипт успешно установлен и работает, займемся подгонкой его цветовой палитры под общий стиль форума.

Откройте файл JavaScript <b>style_images/<span style="color:#FF0000">Ваш скин</span>/folder_js_skin/wz_tooltip.js</b>
Найдите строчку<div class='codetop'>Код</div><div class='codemain'>var config = new Object();</div>
Все что находится выше этой строчки с начала файла - это комментарии, их можно удалить, а можно оставить без изменения (лично я удалил).
Далее (чуть ниже) найдите строчку<div class='codetop'>Код</div><div class='codemain'>config. Above</div>
С этой строчки начинаются глобальные настройки скрипта по умолчанию, то есть цвет текста, бекграунд, время появления всплывающей подсказки, время затухания и.т.д и.т.п
После каждой переменной комментарий на Английском, но совсем не трудно догадаться за что отвечает каждый из параметров по названию самих переменных. Весь массив глобальных настроек по умолчанию длится до строчки<div class='codetop'>Код</div><div class='codemain'>config. Width</div>
Именно в этих настройках, задайте значения цветовой палитры всплывающих окошек и текста сообщений, бекграунд и.т.д...
Например для Классического стиля IPB я установил такие значения:<div class='codetop'>Код</div><div class='codemain'>config. Above        = false
config. BgColor        = '#E4EAF2'
config. BgImg        = ''
config. BorderColor        = '#000'
config. BorderStyle        = 'solid'
config. BorderWidth    = 1
config. CenterMouse    = false
config. ClickClose        = false
config. CloseBtn        = false
config. CloseBtnColors    = ['transparent', 'transparent', 'transparent', 'transparent']
config. CloseBtnText    = '<img src="' + ipb_var_image_url + '/close.png" alt="" border="0" align="absmiddle" style="padding:5px">'
config. CopyContent    = true
config. Delay        = 50
config. Duration        = 0
config. FadeIn        = 300
config. FadeOut        = 300
config. FadeInterval    = 30
config. Fix        = null
config. FollowMouse    = true
config. FontColor        = '#000'
config. FontFace        = 'Verdana, Tahoma, Arial, Sans-Serif, Georgia, Courier, Times New Roman, Serif'
config. FontSize        = '10px'
config. FontWeight        = 'normal'
config. Left        = false
config. OffsetX        = 14
config. OffsetY        = 8
config. Opacity        = 90
config. Padding        = 5
config. Shadow        = true
config. ShadowColor    = '#777'
config. ShadowWidth    = 3
config. Sticky        = false
config. TextAlign        = 'left'
config. Title        = ''
config. TitleAlign        = 'left'
config. TitleBgColor        = 'url(' + ipb_var_image_url + '/tile_cat.gif)'
config. TitleFontColor    = '#FFF'
config. TitleFontFace    = ''
config. TitleFontSize    = '11px'
config. Width        = 0</div>
На этом настройку JavaScript можно считать законченной. Помните о том, что любой из глобальных параметров можно менять, прописывая теги прямо в строке шаблонов. Описание всех тегов этого скрипта можно посмотреть на <a href="http://www.walterzorn.com/" target="_blank">оффициальном сайте разработчика</a>.
Далее приступим к вставке самих тегов в шаблоны стиля "Test" IPB.

Как вы наверное уже догадались, вызов всплывающего окна выполняется функцией Javascript <b>Tip();</b>
Например на наведение мышки <b>onMouseOver="Tip()"</b>, на клик мышкой <b>onClick="Tip()"</b>, а так же эту функцию можно вызывать непосредственным запуском при загрузке страницы (без условия), например прописав в каком либо из шаблонов простую комманду запуска Javascript<div class='codetop'>Код</div><div class='codemain'><script type="text/javascript">Tip('Мое всплывающее окно', STICKY, true)</script></div>
В этом случае функции Tip() обязательно нужно передать тег <b>STICKY, true</b> (залипание всплывающего окна). Если залипание всплывающего окна не указать, то окно не появится, так как оно сразу же закроется, не успев открыться (это распространяется только на те случаи, когда вы используете скрипт в качестве вывода всплывающих окон без условия наведения мыши). Такие окна непосредственного вызова, требуются не часто, на них можно не сосредотачиваться, но все же иногда эта полезность может пригодиться для вывода каких либо сообщений от форума или для вывода рекламы на какой либо страничке.
В этом случае, если вы будете выводить всплывающие окна непосредственно (без условий мыши) на странице, то вам потребуется вспомогательные плагины к этому скрипту, для выравнивания всплывающего окна по центру страницы, независимо от размеров открытого окна браузера, а так же выравнивание при скролинге сраницы вверх и вниз, всплывающее окно может все время находиться в центре. Для этого загрузите в дирректорю <b>style_images/<span style="color:#FF0000">Ваш скин</span>/folder_js_skin/</b> файлы tip_centerwindow.js и tip_followscroll.js из распакованного архива wz_tooltip.zip, а так же подключите их в глобальном шаблоне global_board_header как и сам скрипт wz_tooltip.js (см. в самом начале).
<b>Админцентр > ВНЕШНИЙ ВИД > Опции (в строке стиля Test) > Изменить HTML шаблоны > skin_global (глобальные шаблоны) > global_board_header</b>
Найдите строчку:<div class='codetop'>Код</div><div class='codemain'><script type="text/javascript" src='{$this->ipsclass->vars['img_url']}/folder_js_skin/wz_tooltip.js'></script></div>
Добавьте ниже:<div class='codetop'>Код</div><div class='codemain'><script type="text/javascript" src='{$this->ipsclass->vars['img_url']}/folder_js_skin/tip_centerwindow.js'></script>
<script type="text/javascript" src='{$this->ipsclass->vars['img_url']}/folder_js_skin/tip_followscroll.js'></script></div>
Скачать дополнительный плагин Balloon Tooltip можно так-же с <a href="http://www.walterzorn.com/" target="_blank">оффициального сайта разработчика</a>.
<a href="http://www.walterzorn.com/scripts/tip_balloon.zip" target="_blank">Download Balloon Tooltip</a>
Но его пока трогать не будем.
Проверим как работают теги выравнивания всплывающего окна по центру, выполним следующие действия:
<b>Админцентр > ВНЕШНИЙ ВИД > Опции (в строке стиля Test) > Изменить общий шаблон форума</b>
Найдите строчку:<div class='codetop'>Код</div><div class='codemain'></body></div>
Добавьте выше:<div class='codetop'>Код</div><div class='codemain'><script type="text/javascript">
//<![CDATA[
Tip('<img src="http://www.dissans.com.ua/1119.jpg">', TITLE, 'Реклама на сайте', CLOSEBTN, true, STICKY, true, CENTERWINDOW, true, CENTERALWAYS, true, FOLLOWSCROLL, true, DURATION, 10000, FADEOUT, 1000)
//]]>
</script></div>
Сохраните шаблон.
После обновления страницы форума, должно появиться маленькое окошечко в центре экрана с изображением автомобиля, которое будет находиться в центре страницы независимо от скролинга (полосы прокрутки) страницы вверх и вниз.
Итак если у вас все работает, верните все изменения в шаблонах в исходное состояние, оставив только подключение скриптов в шаблоне global_board_header в строчках:<div class='codetop'>Код</div><div class='codemain'><script type="text/javascript" src='{$this->ipsclass->vars['img_url']}/folder_js_skin/wz_tooltip.js'></script>
<script type="text/javascript" src='{$this->ipsclass->vars['img_url']}/folder_js_skin/tip_centerwindow.js'></script>
<script type="text/javascript" src='{$this->ipsclass->vars['img_url']}/folder_js_skin/tip_followscroll.js'></script></div>

Vladiger · 1 Сен 2007

Итак вернемся к выпадающей подсказке, при наведении мышкой на активных пользователей в статистике.
Имена активных пользователей и HTML сущьности ссылок в панели статистики формируются в файле func_boardstats.php, поэтому изменения придется делать именно в нем, но все же создадим дополнительный шаблон в группе skin_boards (главная страница) в котором будем рисовать нужную нам рамку в HTML.
Создайте новый шаблон:<ul><li><b>Панель администратора > ВНЕШНИЙ ВИД > Опции (в строке "Test") > Изменить HTML шаблоны > skin_boards (главная страница)</b></li><li>Нажмите <b>Добавить шаблон</b></li><li>Введите в поле "Название шаблона": <b>splash_user_row</b></li><li>Введите в поле "Входящие переменные": <b>$data</b></li><li>Нажмите <b>Продолжить...</b></li><li>Вставьте шаблон:<div class='codetop'>Код</div><div class='codemain'><div style='float:left'><b>{$data['members_display_name']}</b><br>{$data['avatar']}<br>{$data['member_rank_img']}<br>{$data['member_number']}<br>{$data['member_group']} {$data['title']}<br>{$data['member_joined']}<br>{$data['member_location']}Пол: {$data['_pp_gender_text']}<br>{$data['member_posts']}</div><div style='float:right; margin-left:5px; border:1px solid #000'><img src='{$data['pp_main_photo']}'></div></div></li><li>Нажмите <b>Сохранить шаблон</b></li></ul>Теперь визуальную структуру HTML всплывающего окна, вы сможете корректировать на свой вкус именно в этом шаблоне, запомните где он находится:
<b>Панель администратора > ВНЕШНИЙ ВИД > Опции (в строке "Test") > Изменить HTML шаблоны > skin_boards (главная страница) > splash_user_row </b>

Теперь займемся файлом func_boardstats.php
Данные для формирования ссылки, читаются из таблицы БД, но их в данном случае недостаточно, так как в формировании ссылки учавствуют только Имя пользователя, время его последней активности, ID пользователя и группа пользователя. Этих данных недостаточно, поэтому изменим SQL запрос и получим все данные которые нам требуются:
Аватар пользователя:
Название группы пользователя:
E-mail пользователя:
Дату регистрации пользователя:
Количество сообщений пользователя:
Местожительства пользователя: (если указанно)
Дату рождения пользователя: (если указанно)
Время и дату последнего сообщения:
Время и дату последнего визита:
Время последней активности на сайте:
Количество просмотров профиля:
Фото пользователя и другую всякую хрень...
Откройте файл <b>sources/lib/func_boardstats.php</b><ul><li>Найдите и удалите участок кода:<div class='codetop'>Код</div><div class='codemain'>if ( $this->ipsclass->member['id'] )
            {
                $rows = array( $ar_time.'.'.md5(microtime()) => array( 'id'             => 0,
                                                  'login_type'   => substr($this->ipsclass->member['login_anonymous'],0, 1),
                                                  'running_time' => $ar_time,
                                                  'member_id'    => $this->ipsclass->member['id'],
                                                  'member_name'  => $this->ipsclass->member['members_display_name'],
                                                  'member_group' => $this->ipsclass->member['mgroup'] ) );
            }</div>
</li><li>Найдите участок кода: (он будет сразу после удаленного участка выше)<div class='codetop'>Код</div><div class='codemain'>$this->ipsclass->DB->simple_construct( array( 'select' => 'id, member_id, member_name, login_type, running_time, member_group',
                                                          'from'   => 'sessions',
                                                          'where'  => "running_time > $time",
                                                          //'order'  => "running_time DESC" // Sort in PHP to avoid filesort in SQL
                                                 )     &nbsp

;</div>
</li><li>Замените следующим кодом:<div class='codetop'>Код</div><div class='codemain'>$this->ipsclass->DB->simple_construct(array(    'select' => 'm1.id, m1.member_id, m1.member_name, m1.login_type, m1.running_time, m1.member_group',
                                'from'   => array('sessions' => 'm1'),
                                'where'  => "m1.running_time > $time",
                                'add_join' => array(0 => array(    'select' => 'm2.id, m2.email, m2.hide_email, m2.joined, m2.posts, m2.title, m2.last_post, m2.view_avs, m2.bday_day, m2.bday_month, m2.bday_year, m2.last_visit, m2.last_activity, m2.members_display_name, m2.members_profile_views',
                                                'from'   => array( 'members' => 'm2' ),
                                                'where'  => 'm2.id=m1.member_id',
                                                'type'   => 'left'),
                                        1 => array(    'select' => 'm3.aim_name, m3.icq_number, m3.website, m3.yahoo, m3.msnname, m3.location, m3.avatar_location, m3.avatar_size, m3.avatar_type',
                                                'from'   => array( 'member_extra' => 'm3' ),
                                                'where'  => 'm3.id=m1.member_id',
                                                'type'   => 'left'),
                                        2 => array(    'select' => 'm4.pp_main_photo, m4.pp_thumb_photo, m4.pp_gender',
                                                'from'   => array( 'profile_portal ' => 'm4' ),
                                                'where'  => 'm4.pp_member_id=m1.member_id',
                                                'type'   => 'left'))));</div>
</li><li>Найдите далее:<div class='codetop'>Код</div><div class='codemain'>foreach ( $rows as $result )
            {
                $last_date = $this->ipsclass->get_time( $result['running_time'] );</div>
</li><li>Замените на:<div class='codetop'>Код</div><div class='codemain'>foreach ( $rows as $result )
            {
                $last_date = $this->ipsclass->get_time( $result['running_time'] );
                if (!is_array($this->ipsclass->cache['ranks'])) {
                    $this->ipsclass->cache['ranks'] = array();
                    $this->ipsclass->DB->simple_construct(array('select' => 'id, title, pips, posts', 'from' => 'titles', 'order' => "posts DESC"));
                    $this->ipsclass->DB->simple_exec();
                    while ($i = $this->ipsclass->DB->fetch_row()) $this->ipsclass->cache['ranks'][$i['id']] = array('TITLE' => $i['title'], 'PIPS'  => $i['pips'], 'POSTS' => $i['posts']);
                    $this->ipsclass->update_cache(array('name' => 'ranks', 'array' => 1, 'deletefirst' => 1));
                }

                $this->ipsclass->load_template('skin_topic');
                $member = $this->ipsclass->parse_member($result);
                $output = $this->ipsclass->compiled_templates['skin_boards']->splash_user_row($member);
                if (is_array($this->ipsclass->skin['_macros'])) {
                    foreach($this->ipsclass->skin['_macros'] as $row) {
                        if ($row['macro_value'] != "") $output = str_replace( "<{".$row['macro_value']."}>", $row['macro_replace'], $output);
                    }
                }

                $output = str_replace("'", "\'", $output);
                $output = str_replace("\"", "\'", $output);</div>
</li><li>Найдите далее:<div class='codetop'>Код</div><div class='codemain'>$active['NAMES'] .= "<a href='{$this->ipsclass->base_url}showuser={$result['member_id']}' title='$last_date'>{$result['member_name']}</a>*{$this->sep_char} \n";</div>
</li><li>Замените на:<div class='codetop'>Код</div><div class='codemain'>$active['NAMES'] .= "<a href='{$this->ipsclass->base_url}showuser={$member['member_id']}' onMouseOver=\"Tip('".$output."')\">{$result['member_name']}</a>{$this->sep_char} \n";</div>
</li><li>Найдите далее:<div class='codetop'>Код</div><div class='codemain'>$active['NAMES'] .= "<a href='{$this->ipsclass->base_url}showuser={$result['member_id']}' title='$last_date'>{$result['member_name']}</a>*{$this->sep_char} \n";</div>
</li><li>Замените на:<div class='codetop'>Код</div><div class='codemain'>$active['NAMES'] .= "<a href='{$this->ipsclass->base_url}showuser={$member['member_id']}' onMouseOver=\"Tip('".$output."')\">{$result['member_name']}</a>{$this->sep_char} \n";</div>
</li><li>Сохраните файл sources/lib/func_boardstats.php</li></ul>Теперь обновите страницу форума и наведите мышкой на любого активного пользователя в панели статистики (внизу форума). Если у вы внимательно читали описание и правильно выполнили все изменения, то у вас должно появиться всплывающее окошко с аватаром, фото и некоторыми другими данными пользователя.

Вот так выглядят такие всплывающие окна:
<div align="center">Посмотреть вложение 1576</div>

Sat · 1 Сен 2007

И ещё что бы картинка отображалась я воспользовался кодом BGIMG и попытался настроить размер WIDTH и PADDING,но ни чё не получмлось,как можно изображение сделать нормально отображаемым?
Посмотреть вложение 1575
<div class='codetop'>Код</div><div class='codemain'>onmouseover="Tip('', BGIMG, 'http://url/testforum/2.jpg', WIDTH, 200, PADDING, 100)</div>

Vladiger · 1 Сен 2007

Да не нужно картинку в Background пихать, нужно писать простые HTML сущности в текст функции Tip();<div class='codetop'>Код</div><div class='codemain'><a href="#" onMouseOver="Tip('<img src=\'Адресс картинки\'>')">Картинка</a></div>
Только очень важно соблюдать синтаксис внутри функции Tip();
Текст функции заключается в апострофы и выглядит так:<div class='codetop'>Код</div><div class='codemain'>Tip('Мой текст');</div>
Но если вместо текста вы введете HTML тег картинки, то перед всеми апострофами HTML тега картинки необходимо поставить слеши "\"

При наведении мышки появляется окно!

Sat

PROnets

Vladiger

С-Модер

Vladiger

С-Модер

Sat

PROnets

Vladiger

С-Модер