Текст под ролловером

[Pinguin]

Такая проблемка. Пункты меню на сайте написаны не текстом, а картинками, ролловерами. Ролловеры сделаны на CSS. Всё чудесно, кроме одного. Некоторые чудаки бродят по Интернету с отключёнными картинками, и для них такое меню просто невидимо. Как назначить альтернативный текст картинке - общеизвестно. А вот как назначить текст ролловеру?

[novicheG]

А что если под ним блок с текстом меню сделать, а ролловеру z-index поставить?

[deadrash]

Если под картинками подразумевается <img> а не bachground:url() тогда техникой имедж-реплейсмент. Например так:

<p class="konteiner-knopki-kartinki">
<img src="knopka-glavnaya-stranica.jpg" alt="">Главная страница
<p/>

.konteiner-knopki-kartinki{
width:200px;
height:30px;
overflow:hidden;
}

Если картинка knopka-glavnaya-stranica.jpg 200 на 30 пикселей тогда при включённых картинках она будет выталкивать надпись за приделы своего контейнера, если картинки отключены то будет видна только надпись.

А вообще за всю свою сознательную жизнь ни разу не встретил ни одного человека кто бы отключал картинки при просмотре сайтов. Да и к тому же если человек отключил картинки он должен подразумевать что не всё будет выглядеть так как задумано, так что ИМХО к чёрту такой сценарий.

Edited November 28, 2010 by deadrash

[novicheG]

Если картинка knopka-glavnaya-stranica.jpg 200 на 30 пикселей тогда при включённых картинках она будет выталкивать надпись за приделы своего контейнера, если картинки отключены то будет видна только надпись.

Вообще - то на том месте будет пиктограмма изображения (и "толкать" будет как попало), если изображению явно задан размер то пиктограмма и подавно будет 200 на 30. Так что явно такое не прокатит... А вообще ТС как я понял не то имеет ввиду он имеет ввиду:

a {

background-image: url(../arrow.png);

background-position: 0px 0px;}

a: hover {

background-position: 0px -20px;

}

(подобное)

Что касается выключенных изображений - во времена диал-апа так делали очень многие, а сейчас при просмотре на мобиле

Edited November 28, 2010 by novicheG

[Pinguin]

Если картинка knopka-glavnaya-stranica.jpg 200 на 30 пикселей тогда при включённых картинках она будет выталкивать надпись за приделы своего контейнера, если картинки отключены то будет видна только надпись.

Пока не очень понял, надо пробовать. У меня-то это так выглядит:

<dl id="menu">
<dt id="menu1"></dt>
<dt id="menu2"><a href="catalogue.htm"> </a></dt>
<dt id="menu3"><a href="contact.htm"> </a></dt>
</dl>

где через CSS подсовываются ролловеры с нужным фоном и текстом.

А вообще за всю свою сознательную жизнь ни разу не встретил ни одного человека кто бы отключал картинки при просмотре сайтов. Да и к тому же если человек отключил картинки он должен подразумевать что не всё будет выглядеть так как задумано, так что ИМХО к чёрту такой сценарий.

Ооо, а я таких встречал. Причём, у людей и мысли нет, что что-то отображается не так.

А что если под ним блок с текстом меню сделать, а ролловеру z-index поставить?

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

[stars]

Для тех кто ходит по сайтам без картинок(таких не более 5%) делается все очень просто, все картинки на сайте предоставляются с атрибутом alt а при наведении курсор меняют на cursor: pointer; и background меняют цвет...

Edited November 28, 2010 by stars

[Pinguin]

все картинки на сайте предоставляются с атрибутом alt а при наведении курсор меняют на cursor: pointer; и background меняют цвет...

Боюсь, вы невнимательно читали тему. ALT - это атрибут тэга IMG, а в моём коде тэгов IMG нет.

Про курсор тоже не понял. При наличии ссылки курсор и так автоматически меняется на pointer.

[stars]

Боюсь, вы невнимательно читали тему. ALT - это атрибут тэга IMG, а в моём коде тэгов IMG нет.

Про курсор тоже не понял. При наличии ссылки курсор и так автоматически меняется на pointer.

Да я ее вообще не читал, прочитал первый пост(из которого не было ясно что вы решили картинку в css упрятать, сам по себе ролловер обозначает изменение чего либо, при воздействии пользователя) и стало все понятно, пролистав ее до конца понял что ответ не найден...

Теперь видно что вы и как сделали... Но кто вам мешает сделать так:

<dt id="menu2"><a href="catalogue.htm"><img src="spase.gif" alt="Каталог"></a></dt>

И собственно сама картинка spase.gif может быть как пустым маленьким гифом, так и вашей картинкой меню.

[Pinguin]

Воот! Я ж чувствовал, что это как-то очень просто должно делаться. Спасибо!

Только, конечно, саму картинку меню туда нельзя ставить, иначе она не будет работать как надо.

[stars]

Воот! Я ж чувствовал, что это как-то очень просто должно делаться. Спасибо!

Только, конечно, саму картинку меню туда нельзя ставить, иначе она не будет работать как надо.

Будет!!! Берете свой <a> делаете его блочным вешаете на него overflow: hidden; а картинку уже position: relative; и играете top при наведении (в данном случаи предполагается что спрайт содержит уже до и после...)

Edited November 29, 2010 by stars

[Pinguin]

Будет!!! Берете свой <a> делаете его блочным вешаете на него overflow: hidden; а картинку уже position: relative; и играете top при наведении (в данном случаи предполагается что спрайт содержит уже до и после...)

А, ну я понял, что вы имели в виду. Только в первом случае почти ничего не надо менять, а во втором нужно стили переписывать - не вышло у меня ничего из этого. Двигается блок, а не картинка в блоке. Или я должен отдельно сделать стиль для блока, и отдельно для картинки? Зачем такие сложности? GIF на 43 байта и все дела.