Многие вебмастеры в погоне за красивостью и эффектностью (не путать с эффективностью) начинают внедрять эффекты, которые зачастую раздражают пользователей сайта.
Я часто наблюдаю в сети: загрузился сайт и при наведении на ссылку-картинку происходит загрузка новой картинки, которая выступает в качестве hover-эффекта ссылки.
Идея отличная, т.к. любая ссылка должна откликаться на наведение мыши, но реализация просто ужасная. Кстати, такую картину я наблюдал на сайте Сбербанк, сейчас возможно это уже убрали, не знаю.
Такое поведение ссылки-картинки выглядит очень неуважительно к пользователю. Сбербанк еще может себе позволить это, т.к. суточная посещаемость там зашкаливает, но начинающему сайту это не простительно.
Реализовать "правильный" эффект смены картинки, при наведении мышкой на ссылку, можно с помощью CSS.
Алгоритм действия этого приема CSS будет заключаться в том, что картинка, используемая для ссылки, будет загружаться сразу целиком, но показываться будет только часть. При наведении происходит ее смещение и показывается другая часть.
Как говориться: Все гениальное просто.
- Готовим картинку. Должно получится примерно так: Где первая (верхняя) часть - это картинка без наведения указателя, а вторая (нижняя) часть - картинка после наведения указателя мыши. Все просто. Самое главное в изготовлении сделать 2 абсолютно одинаковых изображения, а то при наведении изображение на картинке будет скакать.
- Далее в CSS-файл вашего сайта нужно добавить: #rollover {
background: url(/images/logo_fd.png);
display: block;
width: 80px;
height: 74px;
}
#rollover:hover {
background-position: 0 -74px;
} - В месте, где должно быть выведено изображение с эффектом, ставим:
В результате всего этого деяния мы получим вот такой результат:
В последнее время стал задумываться о покупке квартиры. Задумываться - это же не покупать. Дак вот. Купить недвижимость в Новосибирске сравнимо с приобретением квартиры в Чехии. А Чехия - это Евросоюз, а Новосибирск - это Россия. Делайте выводы.
CSS рулит
Вот дополненный код с кнопками для менюшки…
http://armdgroup-tdu2.ucoz.ru/Bce_Dlya_menu/menu_click.html
Не обижайтесь, но Ваша реализация гавно, от которого нужно избавляться. В Вашем случае картинки подгружаются после того как на нее навели мышкой, а это ой как неудачно. К примеру, с моим Интернетом – 64Кб/сек это топорность сразу лезет в глаза.
подскажите пожалуйста, а как сделать чтобы такая меняющаяся картинка работала как ссылка?
Делаем так:
<a href=“http://adminway.ru”><div id=“rollover”></div></a>
Спасибо брат! сутки мучился что бы именно на ЦСС замутить))
Простите, вопрос совсем от чайника:
“Далее в CSS-файл вашего сайта нужно добавить”…
Это куда? (с HTML уже подружился)…
Если Вы используете отдельный файл CSS, то в него.
Если его нет, то прямо в HTML-файле, в любом месте нужно добавить:
<style type=“text/css”>
#rollover {
background: url(/images/logo_fd.png);
display: block;
width: 80px;
height: 74px;
}
#rollover:hover {
background-position: 0 -74px;
}
</style>
Да, уж…
Простите, если я тут поспрашиваю со своего уровня!))) Думал, что все уже понял и… ничего не получается.
Буду благодарен за “показ пальцем” без мудростей для “бывалых”:
вот первая картинка – http://www.visionshop.su/images/stories/r2-2.jpg
вот вторая, которая появляется при “мышании” – http://www.visionshop.su/images/stories/r3-2.jpg…
Через FTP не нашел файл CSS…
Что нужно вставить в HTML страницы? Пожалуйста, подскажите!
Пройдитесь по статье, прямо по пунктам. первонапево нужно картинку подготовить, а потом уже вставляйте код, который я привел, а после код для вывода изображения
Я конечно дико извиняюсь и ничего не критикую, Но сделав все как выше написано, а именно:
__________________________________________________
<style type=“text/css”>
#rollover {
background: url(/images/logo_fd.png);
display: block;
width: 80px;
height: 74px;
}
#rollover:hover {
background-position: 0 -74px;
}
</style>
И добавив в контент
<a href=“Ваша ссылка”><div id=“rulesover”></div></a>
_________________________________________________________
Получилось ровно 0.
Долго я смотрел и не мог понять логической цепочки, откуда же берется вторая картинка в этом коде.
В результате задолбался и решил подправить код, что бы все встало на свои места!
Если Вам требуется сделать смену картинки без особых заморочек, то это Вам:
_________________________________________________________
Рисуем 2 картинки. Сохраняем в одну папочку имена к примеру: test.png и test-on.png (Назвать каждый индивидуально хоть ежиками можете, главное не забудьте!)
CSS код:
#rulesover {
background: url(‘images/test.png’);
display: block;
width: 168px;
height: 44px;
}
#rulesover:hover {
background-position: 0 -44px;
background: url(‘images/test-on.png’);
}
Далее идем в сам шаблон и в нем где хотим вывести картинку вставляем:
<a href=“Ваша ссылка”><div id=“rulesover”></div></a>
Без ссылки : <div id=“rulesover”></div>
Все далее зависит только от знания кода и фантазии. поставив первой скажем jpg картинку вам ничто не мешает вторую сделать gif анимированную и в результате при наведении будет ваша анимация.
Удачи всем, кто нашел себя здесь!)
Картинка должна быть одна. В результате работы при наведении на картинку происходит ее сдвиг.
Ваш пример показывает как не нужно делать картинки-ссылки. В вашем случае, вторая картинка будет подгружаться только после наведения.
Да по большому счету, мне все равно будет она подгружаться при наведении или нет. Главное результат.
Прочитать тут код и подумать это одно другое дело практика.
По первоначальному коду я наконец таки понял как происходит у тебя смещение. Путем простого сдвига на пиксели. .т.е. картинка одна, но сделать ее и сохранить ровно на сдвиг, тем более если ты ее штрихуешь и подгоняешь в процессе сложно и в Этом есть большой недостаток! у тебя Картинка одна! сделать красивую анимацию не получиться это просто примитивно и все. в случае с двумя картинками есть поле для творчества.
Я ничего не доказываю, а показываю как сделать надо для того, что бы люди могли воплощать с ЭТИМ кодом гораздо больше чем простой сдвиг.
Всем только польза будет.
P.S. Кстати Если Вы так уж привязалась к подгрузке картинки во время загрузки сайта что бы убрать на нет неказистость отображения при малой скорости интернета, то сделайте тупо и просто скрипт на ПРЕДКЕШ всех вообще картинок каких хотите и вставьте его в шапку сайта будет Вам радость))
Если нужно поле для творчества то jQuery Вам в помощь. ;)
Приведенный выше способ – это всего-лишь пример того, как можно сделать простой эффект смены картинки, который одинакого хорошо будет работать как на быстром интернете, так и на медленном. К тому же не будет проблем с мобильными устройствами.
Понятно, что можно сделать скрипт, который будет кэшировать все картинки, но это своеобразный “костыль”, который решает проблему добавлением ненужного звена.
Без обид.
Мужик, молодец. Я обычно комментарии не пишу, но тут решил поблагодарить. Преподнес отлично! Спасибо!
спасибо, красиво получилось
В девятом эксплорере не работает. Грусть…
Я думал они свои потуги на 8 остановят. Ан нет…
Странно, что не работает
Спасибо, Автор.
Кстати, в IE такую фичу вообще не реализовать?