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

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

1 голос
/ 25 мая 2011

Image Rollover, без 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 изображение (общий размер 1 спрайта изображения меньше, чем общий размер 4).ролловер мгновенный, так как изображение уже загружено.Нет взлома, нет ложной ссылки, код проверки.Добавьте заголовок к изображению.Единственный браузер, который не переворачивается, это IE6, но сайт не сломан, логотип отображается правильно.Есть взлом для активации наведения для IE6, но я не стал беспокоиться, так как IE6 мертв.

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

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

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

Ответы [ 2 ]

3 голосов
/ 25 мая 2011

Почему бы не полностью удалить внутреннюю <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', делая видимой другую часть изображения.

0 голосов
/ 25 мая 2011

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

...