Я понимаю, как использовать спрайты, однако, это не атрибут "src", необходимый для тегов IMG? Я всегда мог использовать SPAN или другой тег и устанавливать фон /width/etc, но он не будет семантически правильным.
В принципе, я бы хотел опустить SRC для тега IMG и использовать только спрайты, но я обеспокоен тем, что HTML не является технически обоснованным из-за этого. Спасибо.
О семантической корректности:
Если изображение имеет семантическое значение,, поэтому оно считается содержимым, использует тег IMG без спрайтов и правильно настроенный ALT.
Когда изображение является просто украшением,, как фон в поле, фон кнопки, фон меню и т.д., он не имеет семантического значения, поэтому вы можете просто используйте его в качестве фона SPAN, DIV и т.д. из CSS. Вы можете использовать спрайты в этом случае.
Использование спрайтов не обязательно означает, что вам нужно определить их в css-фоны. Вы также можете использовать справки IMG tag, чтобы сделать это, вам нужно в основном обрезать изображение. Есть две хорошие статьи, объясняющие эту технику:
http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp
http://www.artzstudio.com/2010/04/img-sprites-high-contrast/
У обоих методов CSS и IMG есть свои преимущества, поэтому вам нужно выяснить, какой из них вам подходит.
Я использую прозрачный gif 1x1 (так называемый spacer) для src. затем установите фоновое изображение для этого тега img с соответствующей позицией bg. таким образом, вы используете скорость спрайтов и сохраняете семантику своего кода (вы все равно можете использовать атрибут alt)
Я всегда мог бы использовать SPAN или другой тег и устанавливать фон/ширину/etc, но он не будет семантически правильным
На самом деле нет ничего плохого в использовании CSS для установки фона span или div. На самом деле было бы неверно синтаксически опускать src из изображения, так как это вся точка тега. В стандартах ничего не говорится о том, что вы должны вводить текст внутри диапазона. Синтаксически говоря, изменение фона на элементе было бы самым "правильным" способом сделать это.
Вот ссылка на img-теги на W3C: http://www.w3.org/TR/html401/struct/objects.html#h-13.2
И немного дополнительного чтения: http://www.w3.org/TR/html4/struct/global.html#h-7.5.3
Эти элементы определяют контент как встроенный (SPAN) или блочный уровень (DIV), но не накладывают никаких других презентационных идиом на контент. Таким образом, авторы могут использовать эти элементы в сочетании со списками стилей, атрибутом lang и т.д., Чтобы адаптировать HTML к их собственным потребностям и вкусам.
Вы можете либо использовать фоны CSS, либо HTML Canvas для динамического рисования. С холстом вы можете легко подмножать изображения и выполнять эффекты эффекта смешивания.
Вы решаете это, пересматривая свои варианты.
Вы создаете определенную область с <a> с помощью display:block; или <div> и используйте overflow hidden;, чтобы скрыть переполнение и position:relative;.
Затем вы разместите свой <img> спрайт изображения внутри абсолютно позиционированного, что возможно, так как вы позиционировали родителя.
Затем используйте :hover на изображении, чтобы изменить положение.
Теперь ваш спрайт основан на теге img, поэтому вы можете использовать текст alt.
Следующий пример основан на справочнике Facebook с двумя версиями значка поверх друг друга, каждый 50 пикселей на 50 пикселей, общая высота изображения составляет 100 пикселей:
<!DOCTYPE html>
<html>
<head>
<style>
.icon {
display:block;
position:relative;
width:50px;
height:50px;
border:1px solid red;
overflow:hidden;
}
#fb {
position:absolute;
top:0;
left:0;
}
#fb:hover {
position:absolute;
top:-50px;
left:0;
}
</style>
</head>
<body>
<a href="#" onclick="location.href='https://facebook.com'; return false;" class="icon" title="Facebook">
<img src="sprite-facebook.png" id="fb" width="50" height="100" alt="Facebook">
</a>
</body>
</html>