Proměnné obrázky 2v1?

Zdravím, chtěl bych se zeptat jak fungují obrázky které se po najetí myši mění mezi s sebou, ale jsou přitom jako jeden ?

viz.:


Nějak to prostě nechápu.

Ale hlavní otázka zní, v jakém programu tyto obrázky upravovat ?

Jasně, jdou nahradit jinýma, ale málokdy se mi podaří trefit stejný roviny a pak to na stránkách skáče.

Předpokládám že se tato varianta používá k ušetření dat.

Jde o CSS sprite.

myslíš tohle ?

JavaScript - změna obrázku při najetí kurzorem 1. | Interval.cz

JavaScript to není, ten používám běžně http://www.klikzone.cz/javascript/uk...ajeti-mysi.php

Tyhle obrázky jsou na jiném principu právě...

Nejspíš tedy jde o CSS sprite, díky, to bude asi ono :) jdu to tedy nastudovat.

Já používám v css img:hover{background-position......}

Původně odeslal Krupajz ↪

Já používám v css img:hover{background-position......}

Asi tak, prostě jen se posune pozice x nebo y, případně obě. A nemusí to být jen při událostech, klidně může být několik obrázků, hlavně třeba ikony, v jednom a jen se posunuje základní poloha pomocí css.

---------- Příspěvek doplněn 15.06.2014 v 14:17 ----------

Původně odeslal orda.cz ↪

Zdravím, chtěl bych se zeptat jak fungují obrázky které se po najetí myši mění mezi s sebou, ale jsou přitom jako jeden ?

viz.:
Příloha 11376

Nějak to prostě nechápu.

Ale hlavní otázka zní, v jakém programu tyto obrázky upravovat ?

Jasně, jdou nahradit jinýma, ale málokdy se mi podaří trefit stejný roviny a pak to na stránkách skáče.

Předpokládám že se tato varianta používá k ušetření dat.

Hlavně musíš udržet přesné rozměry a polohy, například ta X: Jedno samotné je např. obrázek 50 na 50px. Obas pojené jsou 50px šířka, 100px výška. To musí být zachováno i když tam budeš chtít dát jiný obrázek, třeba s Y. A samozřejmě musíš pohlídat jednak velikost toho písmenka a také jeho přesnou polohu v obrázku, např. 3px od odkraje, jinak to bude právě poskakovat.

Je to hlavně kvůli úspoře místa a času, takhle se načte jen jeden obrázek ( může mít třeba 100 ikon - onrázků) a ten se pak poziciováním pomocí css přesně usadí. Pak při například události hover, se už nemusí čekat a načítat další obrázek, ale jen se ten obrázek posune, viz výše 100 x 50px o 50% nahoru nebo dolů, případně vodorovného uspořádnání do stran, dle potřeby, případně oboje, jeli-li to multikomplet, například 4 obrázky - 2nad sebnou, 2vedle sebe atp.