Viacnasobny animovany GIF, po prejdeni kurzorom cez obrazok

Programovacie jazyky, rady, poradňa...
Cako_SK
Light Expert
Light Expert
Používateľov profilový obrázok
Príspevky: 59
Registrovaný: 01 apr 2009, 23:09
Bydlisko: Zarnovica
Kontaktovať používateľa:

Viacnasobny animovany GIF, po prejdeni kurzorom cez obrazok

Príspevok od používateľa Cako_SK »

Vopred sa ospravedlnujem za nazov temy, mozno som to dobre az tak nenapisal akoby sa to malo :)
Ale posnazim sa to vysvelit.

Ked si pozriete moju stranku http://www.petercakovsky.com/
Mam tam hned na uvodnej stranke fotku v GIF formate. Dymi sa s komina a svetlo blika. Ide mi o to, ako to spravit tak, aby po prejdeni kurzorom napriklad
po okne sa rozsvietilo. Cize vymenil by sa obrazok.
Nasiel som HTML kod na menenie obrazka prejdenim myskou, ale meni len komplet obrazok. Ja by som potreboval len cast, vytvorit nejaky hotspot alebo miesto na ktorom
sa to bude menit. Dufam ze ma chapete.

Viem si vytvorit cez Photoshop a slice tool casti ktore po kliknuti hodia na inu adresu. Ale neviem to spravit tak aby sa zmenil iny obrazok po prejdeni myskou po urcitej casti fotky :(
awtt
Medium Professional
Medium Professional
Používateľov profilový obrázok
Príspevky: 1234
Registrovaný: 01 nov 2006, 19:37
Bydlisko: San Francisco
Kontaktovať používateľa:

Re: Viacnasobny animovany GIF, po prejdeni kurzorom cez obra

Príspevok od používateľa awtt »

Ty to mas tam hodene ako jeden velky obrazok.
Najlepsie by bolo rozdelit si to na mensie casti a oddelit animacie od pozadia. (len to nebude take jednoduche kedze mas tam tie tiene a odrazy)
A potom uz len na hover cez css pomenis pozadia jednotlivym animovanym blokom.
Grim
Darca
Darca
Používateľov profilový obrázok
Príspevky: 8702
Registrovaný: 25 jún 2008, 0:54
Bydlisko: pod železničným mostom
Kontaktovať používateľa:

Re: Viacnasobny animovany GIF, po prejdeni kurzorom cez obra

Príspevok od používateľa Grim »

treba spraviť nad tým pôvodným obrázkom daľší obrázok už len toho miesta, ktoré sa má meniť...treba mu nastaviť v CSS z-index: -1 a dynamicky cez javascript "onmouseover" meniť na z-index: 2 a "onmouseout" z-index: -1 ...presný kód ti tu z hlavy nenapíšem, na to sú tu lepší ako ja...
Cako_SK
Light Expert
Light Expert
Používateľov profilový obrázok
Príspevky: 59
Registrovaný: 01 apr 2009, 23:09
Bydlisko: Zarnovica
Kontaktovať používateľa:

Re: Viacnasobny animovany GIF, po prejdeni kurzorom cez obra

Príspevok od používateľa Cako_SK »

uff tak toto je tazke na mna :) stranku mam cez weebly, tam obrazok na obrazok dat nemozem. Aspon o tom neviem.
Mne by stacilo vediet zaklad ako spojit animovane obrazky do jedneho a animovat ich ked sa po nich prejde mysou. Neviem teraz ale ako by som tam pridal css kod. Je tam nejake css editor:

http://img13.imageshack.us/img13/1544/c ... d01ddj.jpg

ale v tom sa uz ja nevyznam absolutne :(

Myslel som ze by to islo nejak jednoduchsie cez HTML kod.
Grim
Darca
Darca
Používateľov profilový obrázok
Príspevky: 8702
Registrovaný: 25 jún 2008, 0:54
Bydlisko: pod železničným mostom
Kontaktovať používateľa:

Re: Viacnasobny animovany GIF, po prejdeni kurzorom cez obra

Príspevok od používateľa Grim »

...a môžeš si tak ako CSS upraviť aj index.html?...
lowmanek
Light Professional
Light Professional
Používateľov profilový obrázok
Príspevky: 977
Registrovaný: 04 apr 2010, 8:53
Bydlisko: 221B Baker Street

Re: Viacnasobny animovany GIF, po prejdeni kurzorom cez obra

Príspevok od používateľa lowmanek »

HTML nedokaze rozhybat stranku, najjednoduchsie to bude tak, ako ti povedal Grim....
Ak poznas aspon zaklady, tak: vloz obrazok a napozicuj ho tak, aby sedel presne tak ako ma (pomocou CSS pozicovania - http://www.w3schools.com/cssref/pr_class_position.asp)
Nastavis mu z-index: -1 (resp. mensi, ako ma ten hlavny obrazok...je to nieco ako vrstvy v PS) a pridas mu do atributov este onmouseover udalost, kde bude this.style.zIndex="2" (teraz musi byt vacsi ako povodneho obrazka)
este jeden atribut onmouseout, kde das this.style.zIndex="-1" (aby sa po "odjazde" mysi vratil povodny obrazok)

Mohlo by to fungovat :D
Cako_SK
Light Expert
Light Expert
Používateľov profilový obrázok
Príspevky: 59
Registrovaný: 01 apr 2009, 23:09
Bydlisko: Zarnovica
Kontaktovať používateľa:

Re: Viacnasobny animovany GIF, po prejdeni kurzorom cez obra

Príspevok od používateľa Cako_SK »

GRIM myslis toto?
http://img267.imageshack.us/img267/7898 ... d01dad.jpg

Inak lowmanek veru ja neviem ani zaklady. Jedine co viem skopirovat uz pripravene kody ako vzor a vymenit si tam akurat obrazok za moj.
Nemyslim rozhybat stranku, mne staci ked sa bude menit gif obrazok ked po nom prejdes mysou. Nemusi to ist plynulo ani mat nejake efekty. Jednoducho len zmenit. Toto aj viem, len to neviem aplikovat takto viackrat do obrazka na casti
Grim
Darca
Darca
Používateľov profilový obrázok
Príspevky: 8702
Registrovaný: 25 jún 2008, 0:54
Bydlisko: pod železničným mostom
Kontaktovať používateľa:

Re: Viacnasobny animovany GIF, po prejdeni kurzorom cez obra

Príspevok od používateľa Grim »

...áno presne to som myslel...

takže tam vlož (iba stredný riadok, horný a dolný len aby si vedel, medzi čo to máš dať):

Kód: Vybrať všetko

<div id="content">{content}</div>

<img src="obrazok.png" onmouseover="this.style.zIndex='2'" onmouseout="this.style.zIndex='-1'" alt=" " title=" " class="okno">

<div id="footer">{footer}</div>
no a potom do css vložíš:

Kód: Vybrať všetko

.okno {
	z-index: -1;
	border: 0px; //nechaj 0, urcuje oramovanie obrazku
	width: 300px; //zavisi od toho aky siroky je obrazok
	height: 100px; //zavisi od toho, aky vysoky je obrazok
	position: relative; top: 0px; left: 250px; //menis hodnoty top a left podla toho, ako chces mat napozicovany obrazok. najskor si ale pri nastavovani urci z-index 2, aby si ten obrazok videl. inak ti zalezie pod ten velky
	
}
...takto si môžeš definovať viacero obrázkov, ale každý musí mať v html inú class a samozrejme meno class v html sa musí zhodovať s názvom v css (v tomto prípade okno - okno)
Cako_SK
Light Expert
Light Expert
Používateľov profilový obrázok
Príspevky: 59
Registrovaný: 01 apr 2009, 23:09
Bydlisko: Zarnovica
Kontaktovať používateľa:

Re: Viacnasobny animovany GIF, po prejdeni kurzorom cez obra

Príspevok od používateľa Cako_SK »

Dakujem krasne naozaj! Este som to neskusal, ale hned idem... A dam vediet, ak to bude fungovat tak parada.
Ak by som ta mohol poprosit, nemohol by si spravit priklad aj s kodom? Len tak, hned na vyskusanie...

No, dal som to presne ako vravis, vsetko islo bez problemov dal som na rychlo nejaku poziciu vsetko fungovalo. Ale ked prejdem mysou, neukaze mi ho. Menil som tie cislice -1. 2 vselijako, raz som ho bud videl, alebo nie. Raz mi blikal ked som cez to isiel myskou. Nahral som tam GIF obrazok, hadam to neni tym ze to musi byt len PNG.

Tak ma napadlo, mozno by mi stacilo keby sa tento kod dal spravit tak, aby bol nad obrazkom (nie schovany pod nim) a dal sa posuvat do pozicii.
Lebo cez tento HTML kod mi to funguje, to prejdenie myskou

Kód: Vybrať všetko

<img src="URL OF FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF FIRST IMAGE GOES HERE'" /></a>
tu som nieco objavil:

Kód: Vybrať všetko

<div id="container">

PODARILO SA MI TO :D

[code]<div id="container">
    <img src="http://imageshack.us/a/img707/8905/7235056orig.gif" id="img1" />
    <img src="http://imageshack.us/a/img11/2544/1blue.jpg" id="img2"
    onmouseover="this.src='http://imageshack.us/a/img811/2677/2whiteu.jpg'"
    onmouseout="this.src='http://imageshack.us/a/img11/2544/1blue.jpg'" />
</div>
<img src="img1.jpg" id="img1" />
<img src="img2.jpg" id="img2" />
</div>

#container {
position:relative;
}

#img2 {
position: absolute;
left: 50px;
top: 50px;
}[/code]

akurat to musim vymysliet aby sa ten obrazok na vrchu menil po prejdeni myskou ako tu:

Kód: Vybrať všetko

<img src="HERE IMG" onmouseover="this.src='HERE IMG'" onmouseout="this.src='HERE IMG'" /></a>
da sa to skombinovat? :D

//autoeditácia príspevku (16 Dec 2012, 18:10)
PODARILO SA MI TO :D

HTML

Kód: Vybrať všetko

<div id="container">
    <img src="http://imageshack.us/a/img707/8905/7235056orig.gif" id="img1" />
    <img src="http://imageshack.us/a/img11/2544/1blue.jpg" id="img2"
    onmouseover="this.src='http://imageshack.us/a/img811/2677/2whiteu.jpg'"
    onmouseout="this.src='http://imageshack.us/a/img11/2544/1blue.jpg'" />
</div>
CSS

Kód: Vybrať všetko

#container {
    position:relative;
}

#img2 {
    position: absolute;
    left: 50px;
    top: 50px;
}
Grim
Darca
Darca
Používateľov profilový obrázok
Príspevky: 8702
Registrovaný: 25 jún 2008, 0:54
Bydlisko: pod železničným mostom
Kontaktovať používateľa:

Re: Viacnasobny animovany GIF, po prejdeni kurzorom cez obra

Príspevok od používateľa Grim »

...ešte by sa tam hodilo toto...je to na to, aby sa ti obrázok načítal hneď a nie až vtedy, keď cez neho prechádzaš myšou...možno preto ti to robilo také problémy...

<img src="1blue.jpg" alt=" " class="hidden">

css

.hidden {
visibility: hidden;
height: 0;
width: 0;
border: 0;
margin: 0px;
}

...alebo to bolo preto, lebo mašou vlastne neprechádzaš po tom skrytom obrázku, ale po tom veľkom podklade, takže ti to vlastne ani nemôže fungovať...chelo by to niekoho, kto to aj testoval v praxi...každopádne aj tvoje riešenie je dobré a je to druhý spôsob, ktorý by som skúšal hneď po tom, keby mi ten môj navrhnutý nefungoval...ale tento kód by si si tam mal aj tak pridať...stačí tento kód spraviť pre všetky obrázky, ktoré sa nezobrazujú hneď...
weroro
Flash coder
Flash coder
Používateľov profilový obrázok
Príspevky: 3206
Registrovaný: 14 feb 2009, 22:34
Bydlisko: Bratislava
Kontaktovať používateľa:

Re: Viacnasobny animovany GIF, po prejdeni kurzorom cez obra

Príspevok od používateľa weroro »

Ja by som tam šľahol flash a bol by pokoj.
Grim
Darca
Darca
Používateľov profilový obrázok
Príspevky: 8702
Registrovaný: 25 jún 2008, 0:54
Bydlisko: pod železničným mostom
Kontaktovať používateľa:

Re: Viacnasobny animovany GIF, po prejdeni kurzorom cez obra

Príspevok od používateľa Grim »

...ty by si ho dával všade, ale niektorí Flash mať nainštalovaný nemusia (ja viem, že je to veľmi nepravdepodobné, ale určite sa takí nájdu)...zrejme by zaberal viac miesta a nebol by tak ľahko obmeniteľný samotným užvateľom...ako vidíš, tomuto síce veľmi nerozumie, ale vie to aspoň polepiť, kdežto vytvoriť si Flash by určite nevedel a keby ho chcel zmeniť, musel by písať niekomu, kto mu to robil...z tvojej ochoty usudzujem, že by si to bol zrejme ty...aj tak tu Flash lepšie nikto nevie...a mysli aj na tie šikovné telefóny...myslím, že tie Flash nemajú...
Cako_SK
Light Expert
Light Expert
Používateľov profilový obrázok
Príspevky: 59
Registrovaný: 01 apr 2009, 23:09
Bydlisko: Zarnovica
Kontaktovať používateľa:

Re: Viacnasobny animovany GIF, po prejdeni kurzorom cez obra

Príspevok od používateľa Cako_SK »

Dakujem velmi pekne. Takisto som pisal kamaratom na FB ale nevedeli to... Neviem ci sa vyhovarali, alebo ozaj nevedeli. Nechcem ale nikoho obvinovat. Kazdopadne tu ste mi pomohli, velmi si to vazim. Ked mam pravdu povedat, ani som to velmi necakal :)

Keby som inak vedel robit flash, to by bola parada. Potom by sa dali vytvarat aj zlozitejsie veci ako co sa stane ked sa klikne na urcity objekt atd. Male adventurky alebo nieco podobne. Lenze to pokial by som sa naucil... Clovek sa nemoze venovat vela veciam naraz. Musim sa uskromnit. Ale aj tak som toto presne chcel, takze som uplne spokojny.
Este idem prist na to, ako zmenit kurzor mysky ked sa prejde po obrazku...
Grim
Darca
Darca
Používateľov profilový obrázok
Príspevky: 8702
Registrovaný: 25 jún 2008, 0:54
Bydlisko: pod železničným mostom
Kontaktovať používateľa:

Re: Viacnasobny animovany GIF, po prejdeni kurzorom cez obra

Príspevok od používateľa Grim »

http://www.jakpsatweb.cz/css/cursor.html

//...mimochodom, to počítadlo si daj zo svojej stránky preč...pôsobí to maximálne neprofesionálne a nemá to tam čo robiť...nikoho okrem teba takéto počty nezaujímajú a ak sa s tým potrebuješ na stránke chváliť, tak to je dosť úbohé...píšem to, aby som ti pomohol...
Cako_SK
Light Expert
Light Expert
Používateľov profilový obrázok
Príspevky: 59
Registrovaný: 01 apr 2009, 23:09
Bydlisko: Zarnovica
Kontaktovať používateľa:

Re: Viacnasobny animovany GIF, po prejdeni kurzorom cez obra

Príspevok od používateľa Cako_SK »

Dik za odkaz. To pocitadlo som tam mal preto, aby som vedel aku mam ja navstevnost. Niekedy sa tam objavi naraz 10 ludi a viem ze sa nieco deje, ze niekde bud zverejnili moju fotku, alebo o mne pisali... Tak si pozriem statistiky a viem odkial tam ludia prisli. Z akej stranky. Ale vymazal som ho :) najdem iny sposob... Neprofesionalne je tam skor to weebly co dole svieti. Ale nejdem spekulovat ako to zakryt, este ma bloknu. A vyse 30e rocne za to nedam aby to bolo prec. Aha, bola tam moznost ze skryte pocitadlo, tak super.
Grim
Darca
Darca
Používateľov profilový obrázok
Príspevky: 8702
Registrovaný: 25 jún 2008, 0:54
Bydlisko: pod železničným mostom
Kontaktovať používateľa:

Re: Viacnasobny animovany GIF, po prejdeni kurzorom cez obra

Príspevok od používateľa Grim »

...môžeš ho tam nechať, ale tak, aby ho ľudia nevideli...teraz ma ale žiadny spôsob nenapadne...ani neviem akým štýlom sa tam tá štatistika dáva, ale určite sa to dá spraviť tak aby to bolo viditeľné iba pre teba...prípadne skús Google Analytics...

//...aha nedočítal som to dokonca...tak potom super... :D
Cako_SK
Light Expert
Light Expert
Používateľov profilový obrázok
Príspevky: 59
Registrovaný: 01 apr 2009, 23:09
Bydlisko: Zarnovica
Kontaktovať používateľa:

Re: Viacnasobny animovany GIF, po prejdeni kurzorom cez obra

Príspevok od používateľa Cako_SK »

Zdravim

Napisem este sem do temy. Problem sa mi uz podarilo vyriesit.

Ale teraz mam dalsi, snad uz posledny.
Ako nastavim na kazdu stranku zvlast pozadia, background?
Zatial to viem len tak cez CSS ze sa mi zobrazia vsade.

Pozeral som nieco za pomoci page id ale to ja neviem najst ake mam id na stranke, absolutne a hladal som uz vsade
xadman
Medium Star
Medium Star
Príspevky: 305
Registrovaný: 09 mar 2011, 17:02

Re: Viacnasobny animovany GIF, po prejdeni kurzorom cez obra

Príspevok od používateľa xadman »

Môžeš tak že na každej stránke dáš <body id="xxx"></body

a potom v CSS
#xxx {background: ...}
#yyy {background: ...}
Cako_SK
Light Expert
Light Expert
Používateľov profilový obrázok
Príspevky: 59
Registrovaný: 01 apr 2009, 23:09
Bydlisko: Zarnovica
Kontaktovať používateľa:

Re: Viacnasobny animovany GIF, po prejdeni kurzorom cez obra

Príspevok od používateľa Cako_SK »

Dakujem, ide ale o to ze ja robim vo weebly ako som pisal pred tym. U mna to vyzera takto:

Kód: Vybrať všetko

http://img401.imageshack.us/img401/4513/clipboard01dff.jpg
vies mi presne povedat kam to mam dat?


Inak veselé Vianoce! :)
xadman
Medium Star
Medium Star
Príspevky: 305
Registrovaný: 09 mar 2011, 17:02

Re: Viacnasobny animovany GIF, po prejdeni kurzorom cez obra

Príspevok od používateľa xadman »

Každá tá stránka má svoj index.html, a do toho to takto popridávaj

Kód: Vybrať všetko

<html>
    <head>
       ....
    </head>

    <body id="id_stranky">
           obsah stranky
    </body>
</html>
Toto si nevedel kde dať?
Napísať odpoveď