| Autor | Zpráva | ||
|---|---|---|---|
| panterek Profil |
Ahoj,
řeším následující problém...představme si např 5, různě velkých kosočtverců, různě napozicovaných vedle sebe. Tím, že se jedná o kosočtverec mi to značně stěžuje práci (návrh grafika) :) Myšlenka je taková, že v kosočtvercích budou černobílé fotky, po najetí myší se obarví daný kosočtverec do reálných barev. To vše by bylo ok, kdyby se jednalo o čtverce..Kosočtverce jsou na sebe uplně nalepeny..jsou bezprostředně hned vedle sebe. Možná by to šlo udělat normálně jako čtverce a (jestli css umí) tak udělat nějaký rotate..a pokud umí, jak to může být s podporou prohlížečů...? Další nápad byl mít jeden velký obrázek, kde budou všechny kosočtverce. Tzn bude 5 velkých obrázků s tím, že v každém obrázku by byl vždy obarvený jen jeden kosočtverec. To se mi ale nelíbí už jen z důvodu, že to bude muset načítat velký obrázek... Řešil někdy někdo něco podobného? díky |
||
| Chamurappi Profil |
#2 · Zasláno: 23. 9. 2013, 11:17:21
Reaguji na panterka:
„Možná by to šlo udělat normálně jako čtverce a (jestli css umí) tak udělat nějaký rotate..“ Rotovaný čtverec je pořád čtverec, nikoliv kosočtverec. Novější prohlížeče podporují transform: rotate(45deg), starší Explorer zase zná filtr Matrix, který jde také dělat libovolná 2D transformace (ukázka tady vpravo dole).
„Tzn bude 5 velkých obrázků s tím, že v každém obrázku by byl vždy obarvený jen jeden kosočtverec.“ Můžeš mít jeden obrázek s vybarvenými variantami a nevybarvené překrývat výřezem z něj. |
||
| panterek Profil |
#3 · Zasláno: 23. 9. 2013, 11:39:21
Ještě jsem dostal tento tip....
jquery.hover + urceni pozice kurzoru... to by byla paradicka ale otazkou je narocnost na procesor a pamet nevyhoda podle me je, ze by se musel nahrazovat cely velky obrazek ten kod by byl docela jednoduchy ... hover je udalost, ta by se provadela sama. Pak uz "jen" zjistit kde je kurzor... verim ze jquery na to ma funkci a podle toho zobrazit spravny obrazek :) no to bude porod :) |
||
| Chamurappi Profil |
#4 · Zasláno: 23. 9. 2013, 12:34:18
Reaguji na panterka:
„jquery.hover + urceni pozice kurzoru... to by byla paradicka“ No fuj. „nevyhoda podle me je, ze by se musel nahrazovat cely velky obrazek“ Nemusel, stačí překrývat část. „verim ze jquery na to ma funkci“ To ses ptal nějakého jQuery závisláka? Kdybys to měl dělat opravdu přes zjišťování pozice kurzoru, tak s tím hover vůbec nesouvisí.
Použij klikací mapu. |
||
| margin Profil * |
#5 · Zasláno: 23. 9. 2013, 12:41:07
CSS hover elementu map je problém, takže se to řeší pomocí JS, koukni na následující odkazy:
http://zdrojak.root.cz/clanky/obrazova-mapa-s-hover-efektem/ http://interval.cz/clanky/interaktivni-mapa-ceske-republiky-s-hover-efektem/ |
||
| panterek Profil |
#6 · Zasláno: 23. 9. 2013, 16:20:17 · Upravil/a: panterek
Ty odkazy vypadají hodně dobře, zvlášť tento by to mohl vyřešit http://zdrojak.root.cz/clanky/obrazova-mapa-s-hover-efektem/ .
Mrknu na to podrobněji... moc vám díky za rady, L Tý jo...tak ti se s tím dobře vyhráli. Jestli to správně chápu, tak budu mít jeden velký obrázek se všema kosočtvercema, který holt bude kompletní s černobílýma fotkama. Pak druhý obrázek, kde budou nasekané vybarvené kosočtverce. A přes JS budu umisťovat za pomocí mapování souřadnic, ty barevné kosočtverce na konkrétní místo v tom velkém obrázku, no zajímavé řešení.. |
||
| margin Profil * |
#7 · Zasláno: 23. 9. 2013, 19:01:07
Já si myslím, že udělat to přesně stejně, není úplně nejvhodnější, protože PNG, formát podporující průhlednost, se na fotky příliš nehodí a další formát podporující průhlednost/průsvitnost nepodporují dva velcí výrobci prohlížečů.
|
||
| panterek Profil |
#8 · Zasláno: 23. 9. 2013, 22:36:44
PNG se nehodí z jakého důvodu? Kvůli velikosti? Pač u mě se bude jednat v podstatě o hlavní stránku....tady ta mapka měla 200px, u mě to bude počítám tak 800px..
Proto jsem právě nechtěl, aby se musel ten obrázek načítat...ale pokud jiné řešení není...? |
||
|
Časová prodleva: 11 let
|
|||
0