Файл заголовка HTML, изменение состояния кнопки - PullRequest
Новая
       0

Файл заголовка HTML, изменение состояния кнопки

1 голос
/ 24 февраля 2012

Я сейчас создаю базовый веб-сайт.Пока все хорошо, однако становится довольно загроможденным.Одна из причин в том, что у меня есть отдельный заголовок для каждой страницы, потому что у меня нет сценария для изменения кнопок при наведении курсора или когда страница, с которой связана кнопка, является текущей страницей.

  • ???? _ selected_idle (активно, если кнопка ссылается на активную страницу)
  • ???? _ selected_hover (активно, если кнопка ссылается на текущую страницу И пользователь наводит курсор)
  • ???? _ default_idle (обычно активный)
  • ???? _ default_hover (обычно активный + hover)

????может быть 'home', 'about', 'register', 'products', 'contact'

, таким образом, всего есть 20 изображений.

Вот то, что я использую сейчас (этона странице О): 

<td width="173px" Height="103px">
<a href="/index.php">
    <img src="/Images/home_default_idle.jpg" onmouseover="this.src='/Images/home_default_hover.jpg'" onmouseout="this.src='/Images/home_default_idle.jpg'" width="100%" height="100%" border="0" alt="Home selected">
</a>

А вот тот же код, но на странице ГЛАВНАЯ. 

<td width="173px" Height="103px">
<a href="/index.php">
    <img src="/Images/home_selected_idle.jpg" onmouseover="this.src='/Images/home_selected_hover.jpg'" onmouseout="this.src='/Images/home_selected_idle.jpg'" width="100%" height="100%" border="0" alt="Home selected">
</a>

Любая помощьвысоко ценится!Если вы хотите взглянуть на веб-сайт, перейдите по ссылке .

  • Если вы заходите на страницу, не обращайте особого внимания на ее содержание, это все равно WIP.РЕДАКТИРОВАТЬ:

Прямо сейчас у меня есть пять основных страниц.

  • Дом
  • О
  • Контакт
  • Регистрация
  • Продукты

Все этих страниц имеют свои собственные заголовки.Эти заголовки находятся в отдельных файлах.Моя цель - создать заголовок * , который применим ко всем страницам.

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

Скажите, что вы находитесь на странице HOME, кнопка HOME, чем эта картинка: - home_selected_idle

Если вы 'Если навести указатель мыши на эту кнопку, она должна измениться на: - home_selected_hover

Если бы вы были на странице О ПРОГРАММЕ и посмотрели бы кнопку HOME, она должна была бы быть: - home_default_idle

Если бы вы поместили указатель мыши на эту кнопку, она изменилась бы на: - home_default_hover.

В основном моя структура iamge выглядит следующим образом: - pagename_state_mousestate

  • pagename
    • home
    • о
    • продуктах
    • регистр
    • контакт
  • состояние
    • по умолчанию
    • выбрано
  • mousestate
    • в режиме ожидания
    • зависание

Ответы [ 2 ]

1 голос
/ 24 февраля 2012

Хорошо, я приведу небольшой пример в php:

Для ссылки в заголовке вы хотите использовать CSS, а не изображение.

Вы захотите динамически изменить класс каждого элемента следующим образом: 

<div class="<? if($_SERVER['PHP_SELF']=="home.php"){echo "selected";}else{echo "ghosted";} ?>" > HOME </div>

Вы просто скопируете этот формат для каждого. Нет необходимости в JQuery lib, это слишком просто для этого. Просто переделайте ваши изображения в CSS, это в любом случае стандартно, изображения загружаются слишком долго для событий наведения мыши, а CSS более гибок.

1 голос
/ 24 февраля 2012

Я бы рекомендовал вам использовать jQuery .Это может сэкономить вам много времени.

Например, этот исходный код изменяет все изображения на экране, когда пользователь наводит на них курсор.Посмотрите, насколько это просто с jQuery. 

$('hover',function () { //This function will run every time user over
an image this.src=this.src.replace('idle','hover') }, function () {
//This function will run every time user leave (mouseout) an image.
this.src=this.src.replace('hover','idle') })
...