Image Rollover, без Javascript, без ссылок, чистый CSS, проверка кода и совместимость с Broswer

Question

Ролловер изображений, без JavaScript, без ссылок, чистый CSS, проверка кода и совместимость с браузером.

Привет всем, я работал 24 часа в сутки, чтобы придумать это довольно простое решение. Я хочу знать, все ли в порядке, и есть ли способы улучшить. Это довольно элегантно, здесь мы идем:

У меня есть только одно изображение "Логотип", но оно будет отображаться в виде 2 разных логотипов с эффектом ролловера. Я использую спрайт (только 1 изображение, содержащее мои 4 логотипа), и я просто меняю его положение.

Здесь я вставляю свое изображение в div с

<div id="logo-rollover-1" class="logo-rollover">
    <img title="whatever" alt="whatever" src="path-to-your-image">
</div>

Затем я вставляю в другой div то же изображение, но с другим идентификатором

<div id="logo-rollover-2" class="logo-rollover">
    <img title="whatever" alt="whatever" src="path-to-your-image">
</div>

Теперь мой CSS:

.logo-rollover {
    background: #ffd42a url('path-to-your-image');
    width: 230px;
    float: left;
    height: 130px;
    overflow: hidden;
    position: relative;
}

.logo-rollover img { width: 460px; height: 260px; }

.logo-rollover :hover { opacity: 0; filter:alpha(opacity=0); }

#logo-rollover-1 { background-position: 0px -130px; }

#logo-rollover-2 { background-position: -230px -130px; }

#logo-rollover-2 img { right: 230px; position: relative; display: block; }

Пояснения: когда кто-то наводит курсор на изображение, оно становится прозрачным и показывает, что фон ведьмы - это то же изображение, но с другой позицией. непрозрачность: 0 для Firefox, Google и фильтр: альфа (непрозрачность =0) для Explorer. позиция: относительно класса.logo-rollover для совместимости скрытого переполнения с IE6 и IE7. Дисплей: блок; добавляется в id img для браузера Opera.

Без взлома: когда нет ссылки, нет необходимости в href="#" или "javascript:void(0)"

Преимущества: вместо запроса 4 (или более) изображений используется только 1 изображение (общий размер одного спрайта изображения меньше, чем общий размер 4). ролловер мгновенный, так как изображение уже загружено. Нет взлома, нет ложной ссылки, код проверки. Добавьте заголовок к изображению. Единственный браузер, который не переворачивается - это IE6, но сайт не сломан, логотип отображается правильно. Есть взлом для активации hover для IE6, но я не стал беспокоиться, потому что IE6 мертв.

Совет: везде используйте один и тот же путь для вашего изображения. Я имею в виду, что "путь к вашему изображению" должен быть одинаковым для всех вызовов. Из-за кеширования браузера.

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

Комментарий приветствуется.

Answer 1

Почему бы не полностью удалить внутреннюю <img> и создать логотип с использованием фона CSS?

<a id="logo">Logo</a>

#logo { width:100px; height:60px; background:url(path/to/logo.png) 0 0; 
overflow:hidden; text-indent:-1000px; display:block; }

#logo:hover { background-position:0 -60px; }

Объяснение:

<a> единственный элемент, который поддерживает псевдо-селектор hover в IE6. Если вы хотите нативное решение для наведения логотипа, вы должны использовать этот тег. Некоторые люди иногда оборачивают другие элементы, например: <a><div></div></a> чтобы дать свойство div hover, обращаясь к нему из CSS, используя a:hover div { }

overflow:hidden; and text-indent:-1000px; скрыть текст внутри div. Хорошей практикой является оставлять текст внутри по причинам доступности.

background устанавливает цвет фона вашего div, изначально равный 0, 0

background-position выполняет настоящий трюк и смещает изображение - оно перемещает его в пределах div 'viewport', делая различную часть изображения видимой.

Answer 2

Хорошее описание! Я вижу одно небольшое улучшение: поместите определение background и no-repeat в ваш класс.logo-rollover, чтобы иметь меньше кода CSS (вы должны написать его только один раз вместо двух)