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.: 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.

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/ukazky/zmena-obrazku-po-najeti-mysi.phpTyhle 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......}

Napsal Krupajz;1089423

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 ----------

Napsal orda.cz;1089414

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.:

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.