Как да направите това изображение се промени в HTML

Internet Explorer Chrome Opera Safari Firefox за Android IOS 6.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Заменете една картина към друга, когато мишката върху него курсора на мишката.

: Мишката псевдо клас

Фиг. 1 показва две изображения: (. Фигура 1b) първоначалното (. Фигура 1а), и заместител.

Фиг. 1. Снимки за създаване на преобръщане ефекти

Пример 1. С помощта на псевдо: мишката

Горният метод, въпреки че лесно да се осъществи, но има определено недостатък. От второто изображение се зарежда само когато задържите курсора на мишката върху връзката, а след това на снимката се случва с пауза. За да се премахне това забавяне, не можете да използвате две изображения, но само един.

подвижен ефект е с отделен образец

Тя ще изглежда, че е налице противоречие, тъй като ефектът от търкаляне е да се замени един чертеж в друг, как тогава да направите една снимка? В действителност, ще има две изображения (фиг. 2), но те ще се съхраняват в един файл с изображение.

Фиг. 2. Снимка с две снимки

Променете една фигура в друга, изображението се измести вертикално чрез използване на универсален имот фон или фон-позиция, както е показано в пример 2.

Пример 2. Промяна в модел позиция

Селектор е настроен за фоновото изображение чрез фон имот, ширината (широчина) съвпада с един модел, както и височина (височина имота), равна на половината от височината на изображението. В резултат на това на оригиналния зеления лост трябва да се показва в своята цялост.

Когато курсора на мишката над връзката на фона движи до половината от височината на изображението (40 пиксела), с помощта на фон-позиция и става видима раздела оранжево.

Как да направите това изображение се промени в HTML снимка