как изменить изображение в гиперссылке, соответствующей активной странице? - PullRequest
Новая
       3

как изменить изображение в гиперссылке, соответствующей активной странице?

0 голосов
/ 19 июля 2011

РЕДАКТИРОВАНИЕ ВОПРОСА ДЛЯ ДОБАВЛЕНИЯ HTML - > 

<li><a href="about.php"><img src="images/about.png" width="16" height="16" />ABOUT</a></li>
<li><a href="mission.php"><img src="images/mission.png" width="16" height="16" />MISSION</a></li>
<li><a href="contact.php"><img src="images/contact.png" width="16" height="16" />CONTACT</a></li>

Это три гиперссылки, и, как вы видите, рядом с ними есть небольшие изображения.Теперь я хочу, чтобы, когда, скажем, страница MISSION была активной страницей, я хочу, чтобы изображение было mission2.png (вместо изначально mission.png, когда эта страница НЕ была активной страницей).

Надеюсь, теперь вопрос немного яснее.

<> >

Вопрос по HTML / CSS -

Пример сценария -Существует три веб-страницы - About, Mission, Contact - и ссылки таковы, что у вас есть картинка 10x10 рядом с каждой из этих ссылок, например так: 

[pic] About
[pic] Mission
[pic] Contact

(где [pic] обозначает соответствующее изображение 10x10).

Я хотел бы создать эти гиперссылки таким образом, чтобы [рис.] Был синим цветом для страницы ACTIVE, а все остальные [картинки] - черным цветом.

ДляНапример, предположим, что пользователь находится на странице MISSION, тогда [pic], соответствующий гиперссылке Mission, будет только BLUE, все остальные будут в BLACK.

Обратите внимание, что синий и оранжевый рисунки одинаковы, между каждой из этих ссылок меняется только цвет.

Не могли бы вы подсказать мне, как создать дизайн гиперссылки для "активной страницы"?Я знаю, как пометить ссылку и страницу идентификаторами, а затем изменить цвет гиперссылки, чтобы гиперссылка активной страницы была синей, а другие - черной, но мне кажется, что у меня нет идей о том, как изменить соответствующую 10x10изображение также.

Ответы [ 3 ]

2 голосов
/ 20 июля 2011

HTML 

<div id="menu">
  <a>Menu Item 1</a>
  <a>Menu Item 2 </a>
  <a class="active">Current page</a>
</div>

CSS 

#menu a
{
  background: some background;
}

#menu a.active
{
  background: some other background;
}

Чтобы предотвратить использование нескольких изображений для пунктов меню, вы можете использовать изображение sprite sheet , которое сохранит некоторую визуализациювремя.

Все, что вам нужно сделать, это выяснить, как получить текущую страницу и применить активный класс на выбранном вами языке, есть множество способов сделать это.

0 голосов
/ 20 июля 2011

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

Если вы хотите внести статическое изменение на основе страницы, на которой пользователь в данный момент находится здесь, есть два популярных варианта для вас.

  1. Обработка на стороне сервера.Пусть сервер выяснит, на какой странице вы находитесь, и измените путь к изображению / класс CSS для этой конкретной ссылки.Это можно сделать миллионами разных способов, и все это зависит от вашей обработки на стороне сервера (PHP, ASP.NET и т. Д.)с адреса, а затем измените путь изображения / класс CSS на ссылку этой страницы.

0 голосов
/ 19 июля 2011

Вероятно, самое простое - это использовать background img s.

. Затем вы можете изменить их на hover.

. Также вы можете добавить active class для каждой страницы.и установите background-img для этого тоже.

...