Есть ссылка в HTML с текстом, на которую, через CSS навешали фоновое изображение (текст убрали + фиксированные размеры).
С точки зрения семантики, правильно делать так, а не через тег img, поскольку сама пиктограмма не несет смысловой нагрузки. А бот или поисковик увидит понятный текст ссылки, а не непонятную для него картинку. Естественно, на элементе есть атрибут title, который дополняет (обьясняет) пиктограмку.
Но вот беда, если у пользователя выключены изображения, он ничего не увидит. Даже квадратика. Даже фонового цвета. В случае с тегом img, покажется alt текст, даже кусок (пиктограмка 16х16пикселей, много текста не влезет).
Самое обидное в этой ситуации, что я понимаю, что решения нет: или делай через alt, либо фоновый цвет устанавливай тоже (забудь про полупрозрачные пиктограмки), либо еще какой-то хак.
Может как-то можно отследить, включены ли в браузере изображения, и использовать доп. CSS, если нет (установить сплошной цвет например, а пользователь по тегу title поймет).
Ответы типа «Зачем?» или «Сделай через img alt» не принимаются: семантика и доступность на главном месте.
Попробуйте покопать в сторону <object>, это то ради чего данный тег и был придуман:
<a href="http://google.com">
<object data='http://www.google.com/images/srpr/logo3w.png' type="image/png">
Turn on images!
</object>
</a>
Я проверил: в FF при отключении картинок показывает текст, но не в Хроме (хотя если картинка возвращает 404 то текст покажет), в других не тестировал. Возможно это бага хрома, потому что согласно спецификации:
If the user agent is not able to render the object for whatever reason (configured not to, lack of resources, wrong architecture, etc.), it must try to render its contents.
интересно… чувствую, что это близко, но… нет масовости. т.е. нужно каждую картинку приспосабливать. Много затрат ради 1% людей с выключенными картинками.
Просто, проблема доволи банальна и распространенная, и странно, что нет решение и никаких разработок в эту тему.
P.S. Я тоже использую логотип гугла, когда нужна любая картинка. Это как использовать ya.ru для пинга =)
Хм. Ну если нужно лаконичный HTML, то фоллбэк можно с JS реализовать. Если надо дополнительный CSS, то засунуть его в тот же object можно, с 1x1trans.png в data. Правда это будет невалидно, потому что CSS только в head разрешены, но обычно работает.
Размеры изображения и элемента должны совпадать. Тогда, если изображения включены, текст отодвигается изображением за пределы элемента, а если выключены — генерируемый контент имеет нулевую высоту, и виден текст.
Хм. а это кстати идея. Я постоянно думал о том, чтобы спозиционировать под картинкой, а тут просто сдвинуть. И проблема с полупрозрачными пиктограмами будет решена.
А если если слой с текстом поместить под это все через допустим абсолютное позиционирование? пишите там что хотите — картинки если отключат — увидят этот текст.
а если картинка полупрозрачная — тогда будет просачиватся. Так же, можно и цвет указывать, в дополнении к background'у. Пользователь хоть увидить прямоугольник, подведет мышку — и уже title покажет ему, что это.
var image = $('img'); // jquery
var imgObj = new Image();
imgObj.src = image.attr('src');
if ( imgObj.width == 0 || imbObj.height == 0 )
{
// TODO
}
По крайней мере Opera с отключенными картинками показывает 0 для этих аттрибутов. А в хроме если не удалось загрузить изображение. В других браузерах низнаю как отключить :)
Код кривой и неверный. К моменту вызова кода, возможно, картинка еще не успела загрузиться. Использование jQuery тут неоправданно. (дожили, тащить 200 Кб кода ради картинки) Логичнее было бы создать new Image() и слушать на нем onload и onerror.
Простой