VPF::Кнопка-изображение и поисковая оптимизация

olldman

Дата 15.7.2011, 13:22 (ссылка)

(нет голосов)

Загрузка ...

Дед

Профиль
Группа: Участник
Сообщений: 75
Регистрация: 9.1.2009
Где: Омск

Репутация: 6
Всего: 6

Ну что сказать - для такого варианта существует атрибут title для элемента А, а в случае таки недозагрузки графики, ставим подходящий к дизайну фон ссылке:

Код


ul{list-style:none;}
ul li{width:**px;/*при необходимости - height:*px;*/}
ul li a{display:block;background:#CCC url(../img/pic-on.gif);text-indent:-9999px;}
ul li a:hover{background:#CCC url(../img/pic-act.gif);

p.s. чет, по-моему, мы уже просто изгаляемся друг над другом, за сим - всё. smile

SelenIT

Дата 15.7.2011, 13:41 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Я не изгаляюсь, а борюсь за юзабилити ;). Title - не панацея, для него надо навести мышкой, а если юзер телепат и догадается, что на однотонный прямоугольник надо навести, он и текст угадает smile

. Зачем? Зачем подпирать костылями самый убогий метод image replacement'а, когда есть море других, без этого недостатка?

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Satellence

Дата 15.7.2011, 23:01 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 42
Регистрация: 28.3.2007

Репутация: нет
Всего: нет

По-моему, метод

Код


<a href="..">
    <div class="image"></div>
    <div class="text">текст ссылки</div>
</a>

Самый оптимальный.
Верхний div закрывает текст картинкой.
Если картинки отключены - пользователь видит текст ссылки, максимально похожий на предполагаемое изображение.
Тем самым, ссылка уже видна, даже если интернет медленный и картинка еще не загрузилась.

SelenIT

Дата 16.7.2011, 17:03 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Вообще-то, если вынести за скобки резкость и безапелляционность, в главном olldman был прав — не следует множить сущности (элементы) без явной необходимости. При возможности абстрагироваться от IE7-, я бы сделал как-то так:

Код


<a href="..">текст ссылки</a>

Код


.menu a {
   display: block; /* или inline-block, если меню горизонтальное, а вообще по ситуации */
   position: relative;
}
.menu a:after {
   position: absolute;
   top: 0; right: 0; left: 0; bottom: 0;
   background: url(адрес_картинки.png) 50% 50% no-repeat;
}

Но если нужна кроссбраузерность с IE7 и ниже, то я скорее смирюсь с вынужденным злом в виде пустого дива/спана (вместо :after), чем с риском нечитаемости текста ссылки...

Это сообщение отредактировал(а) SelenIT - 16.7.2011, 18:53

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »