FAQ Делаем меню с меняющимися картинками при наведении

Администратор · Регистрация: 27.02.2009

Сделаем навигацию для форума, при наведении на кнопку, чтобы менялось изображение.
Пример можно посмотреть на этом форуме в самом верху.

Рассмотрим на примере стандартного стиля vbulletin
Открываем админ панель - Стили и шаблоны - Управление стилями - Ищем шаблон header
Вот его содержание по умолчанию

PHP код:



<!-- logo -->
<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
    <td align="$stylevar[left]"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>
    <td align="$stylevar[right]" id="header_right_cell">
        <if condition="$ad_location['ad_header_logo']">$ad_location[ad_header_logo]<else />&nbsp;</if>
    </td>
</tr>
</table>
<!-- /logo -->

<!-- content table -->
$spacer_open
$_phpinclude_output
$ad_location[ad_header_end]

Сделаем мигающую кнопку, Новые сообщения

изменение картинки при наведении курсора осуществляется посредством кода

PHP код:



<script language="javascript"> 
<!-- 
if (document.images) { 
image1on = new Image(); 
image1on.src = "$stylevar[imgdir_misc]/links_search_getnew_over.gif"; 
image1off = new Image(); 
image1off.src = "$stylevar[imgdir_misc]/links_search_getnew.gif";
}  
function changeimages() { 
if (document.images) { 
for (var i=0; i<changeimages.arguments.length; i+=2) { 
document[changeimages.arguments[i]].src = eval(changeimages.arguments[i+1] + ".src"); 
} 
} 
} 
// --> 
</script>

и собственно сам код картинки

PHP код:



<td valign="bottom">
<a rel="nofollow" href="search.php?do=getnew" onmouseover="changeimages('image1', 'image1on')" onmouseout="changeimages('image1', 'image1off')"><img src="$stylevar[imgdir_misc]/links_search_getnew.gif" name="image1" width="140" height="59" alt="Новые сообщения" border="0" id="image1"></a>
</td>

links_search_getnew_over.gif - картинка в нажатом состоянии
links_search_getnew.gif - картинка в не нажатом состоянии
и еще картинка для фона links_bg.gif
Все их копируем в папку images/misc/

В итоге header получится таким

PHP код:



<!-- logo -->
<script language="javascript"> 
<!-- 
if (document.images) { 
image1on = new Image(); 
image1on.src = "$stylevar[imgdir_misc]/links_search_getnew_over.gif"; 
image1off = new Image(); 
image1off.src = "$stylevar[imgdir_misc]/links_search_getnew.gif";
}  
function changeimages() { 
if (document.images) { 
for (var i=0; i<changeimages.arguments.length; i+=2) { 
document[changeimages.arguments[i]].src = eval(changeimages.arguments[i+1] + ".src"); 
} 
} 
} 
// --> 
</script>
<table width="100%" border="0" cellpadding="0" cellspacing="0" background="$stylevar[imgdir_misc]/links_bg.gif">
<tr>
<td width="209"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a>
</td>
<td valign="bottom">
<a rel="nofollow" href="search.php?do=getnew" onmouseover="changeimages('image1', 'image1on')" onmouseout="changeimages('image1', 'image1off')"><img src="$stylevar[imgdir_misc]/links_search_getnew.gif" name="image1" width="140" height="59" alt="Новые сообщения" border="0" id="image1"></a>
</td>
    <td align="$stylevar[right]" id="header_right_cell">
        <if condition="$ad_location['ad_header_logo']">$ad_location[ad_header_logo]<else />&nbsp;</if>
    </td>
</tr>
</table>
<!-- /logo -->
<!-- content table -->
$spacer_open
$_phpinclude_output
$ad_location[ad_header_end]

width="209" - это ширина логотипа в пикселях
width="140" height="59" - размеры картинки
background="$stylevar[imgdir_misc]/links_bg.gif" - этой строчкой сделаем фон для кнопок

Чтобы добавить другие кнопки, просто добавляем следующие коды после аналогичных в header, только меняем порядковый номер 1, на 2 (и т.д.) и меняем ссылки и картинки соответственно:

PHP код:



image2on = new Image(); 
image2on.src = "$stylevar[imgdir_misc]/links_search_getnew_over.gif"; 
image2off = new Image(); 
image2off.src = "$stylevar[imgdir_misc]/links_search_getnew.gif";

PHP код:



<td valign="bottom">
<a rel="nofollow" href="search.php?do=getnew" onmouseover="changeimages('image2', 'image2on')" onmouseout="changeimages('image2', 'image2off')"><img src="$stylevar[imgdir_misc]/links_search_getnew.gif" name="image1" width="140" height="59" alt="Новые сообщения" border="0" id="image1"></a>
</td>

И вот так это выглядит:

А вот кнопочки, чтоб можно было попробовать:

Всё остальное придется допиливать самим :-) чтоб дизайн сочетался с вашими изменениями

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид