Эффект при наведении курсора на картинку

[kotarosan]

(JavaScript), вот мне нужно сделать так, чтобы вместо картинок был текст, а эффект был такой же. Т.е. Ссылка будет текстовой, а не картинкой, а при наведении фоновый цвет изменялся или же воном грузилась эта другая картинка.
Задача связана с тем, что начальник решил, что нужно проиндексировать ссылку в этом меню.

Элементарно делается, изображение прописывается в css файле в a:hover{background: url(картинко);}
Табличное меню лучше переверстать в списки, меньше кода.

Мне пришла в голову идея, может быть оставить все как есть и добавить в <a>...</a> скрытый текст. Как в таком случае будет с индексацией??

А каким образом будет скрыт текст?

 

[rafic]

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Вот тут показано как средствами CSS делать замену картинки. Я себе с него переделал на замену бекграунда. Просто не скрывал текст ссылки. Там все шаги описаны, так что уберите что лишнее и добавьте форматирование текста вашей ссылке.

 

[askarbin]

Элементарно делается, изображение прописывается в css файле в a:hover{background: url(картинко);}
Табличное меню лучше переверстать в списки, меньше кода.
А каким образом будет скрыт текст?

Да я вобщем-то и думал, что мне помогут тут с этим вопросом. Я знаю как на JavaScript это реализовать, думал может и на CSS можно.

 

[Eihwaz]

2 askarbin
А текст обязательно скрывать?
Если нет, то можно оставить просто фон кнопки, а писать уже на ней, текстом.
Если в виде списка делать (<ul><li></li></ul>), то используйте свойство css float: left, а не display: inline, так как во втором случае вы не сможете указывать высоту и ширину элементов.
А можно и скрыть текст — запихнуть в ячейку с каждым элементом меню текст в теге, например, span, и назначить ему в css свойство display: none;, правда, не знаю, как это по части поисковиков, но в коде страницы этот текст будет присуствовать.

 

[kotarosan]

2 askarbin
А можно и скрыть текст — запихнуть в ячейку с каждым элементом меню текст в теге, например, span, и назначить ему в css свойство display: none;, правда, не знаю, как это по части поисковиков, но в коде страницы этот текст будет присуствовать.

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

Но в указанном ТС сайте элементарное классическое меню, что смысла скрывать текст нет, лучше сделать текстовое меню списком, а через css загружать фон вкладки.

 

[askarbin]

2 askarbin
А текст обязательно скрывать?

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

 

[Eihwaz]

Если вас устраивает меню в том виде, в каком оно есть, то просто тем div'ам, в которые вы вставили текст назначьте свойство css: display: hidden.
Т.е., div, в который вы запихнули текст должен выглядеть примерно так:

<div class="menu_se_text">
    Главная
</div>

А в css указываете:

.menu_se_text {
    display: none;
}

Именно display: none, а не visibility: hidden.
Тогда этот div вообще не будет занимать места на странице, соответственно, меню будет отображаться так же, как отображалось до этого (т.е., до того, как вы вставили div'ы).
При visibility: hidden; div будет занимать столько места, сколько ему требуется, но его не будет видно, соответственно, тогда меню "поведет".

 

[Artu]

Продолжая тему.
Хочу вернуться к вопросу как "оживить" картинку при наведении?
Подмена при наведении это вариант,но если картинка достаточно большая,то это двойной трафик.

Как подменить например только рамку картинки?
Или наложить эффект:волна,переливание,блеск,смена цветов и т.д.?

 

[Artu]

javascript эффекты можно взять за основу в jquery ui
*** скрытое содержание ***

Еще раз спрошу:а такое возможно с картинками?

 

[askarbin]

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

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.