Autor | Zpráva | ||
---|---|---|---|
LovecAnimuk Profil |
#1 · Zasláno: 18. 3. 2013, 14:02:25
Zdravím všechny přítomné, prosím o pomoc s následujícím problémem:
Chtěl bych vytvořit galerii, kde v jednom divu je obrázek v plném rozlišení, v dalším potom náhledy dalších obrazků. Problémem však je navigaci, kdy bych rád po najetí na hlavní obrázek nechal zobrazit v rámci obrázku navigační šipku/y pro posun. Zkoušel jsem udělat přes obrázek jako background divu , následně do divu vložený pruhledný div, který má nastavený na hover změnu pozadí na png se šipkou. Mám ale dva problémy: Nechci mít obrázek zobrazený jako background, ale jako img. Vlastnost hover jsem musel mit nastavenou u nadřazeného divu, jinak změna pozadí nefungovala, což mi hlava moc nebere, viz kód: #detail_image_large { height: 367px; width: 550px; background-repeat: no-repeat; } #detail_image_arrow_left { background: transparent; height: 367px; width: 225px; float:left; background-repeat: no-repeat; background-position: left center; } #detail_image_large :hover { background-image: url(./images/left.png); <div id = "detail_image_large" style="background-image: url(ABC);"> <a href="ABC"> <div id = "detail_image_arrow_left"> </div> </a> </div> Nechci použít JS, případně jestli máte nějaký tip, tak sem s ním, díky moc, LovecAnimuk |
||
peta Profil |
<style> div.img {position:relative;} div.img span {display:none; position:absolute; bottom:0;} div.img:hover span {display:block;} </style> <div class="img"> <a href=?><img src=?>obrazek<span>sipka</span></a> </div> |
||
LovecAnimuk Profil |
Zdravím, nemůžu hned vyzkoušet, ale vypadá to, že by to mohlo fungovat. Akorát, snad jen ještě, pokud bych to chtěl mít tu "aktivitu" na obrázku rozdělenou na levou a pravou stranu obrázku (při najetí na levou půlku obrázku zobrazí pouze levou šipku a celá levá půlka bude sloužit jako href. Pro pravou stranu to stejné) Jestli je k pochopení jak to myslím.
Tam už se asi nepůjde vyhnout použití obrázku jako background, co? Díky |
||
suvel Profil |
#4 · Zasláno: 18. 3. 2013, 21:19:05
Je to určitě dobrý jako cvičení v html a css, ale proč nepoužít úplně primitivní řešení přes js? Je to asi jako bych si radši programoval vlastní db, místo abych použil třeba MySQL. A kdyby to tady probírané řešení mělo být ještě "vychytanější" (a k tomu obvykle postupem času dochází), bez js se to pak už stejně neobejde. Můj názor: tak jsme si zaprogramovali, problém zvládli, ale je na čase udělat to rychle a pořádně :-)
|
||
LovecAnimuk Profil |
#5 · Zasláno: 18. 3. 2013, 23:19:34
suvel: No popsal jsi to přesně, ale jinak by to přece nebyla taková sranda, nen? :)
|
||
Str4wberry Profil |
#6 · Zasláno: 19. 3. 2013, 08:37:02
Zase tolik složité to není. Zkusil jsem vyrobit takový nástřel.
Zásadní problémy: 1) nechtěný preload (při načtení stránky se načtou všechny obrázky v plné velikosti), 2) nutnost vygenerovat komplikovanější HTML kód, 3) složitější budoucí rozšíření fungující napříč prohlížeči. |
||
LovecAnimuk Profil |
#7 · Zasláno: 19. 3. 2013, 13:06:54
Str4wberry: díky, přesně tento výstup jsem chtěl :)
Ad problémy: 1) nepůjde preload odstranit tím, že se vždy nechá vykreslit jen jeden large obrázek a odkazy nepůjdou přes kotvy, ale normalním linkem? 2) je to trochu horší, ale nic strašného 3) nějaký konkrétní příklad? LovecAnimuk |
||
Str4wberry Profil |
#8 · Zasláno: 19. 3. 2013, 13:18:18
„nepůjde preload odstranit tím, že se vždy nechá vykreslit jen jeden large obrázek a odkazy nepůjdou přes kotvy, ale normalním linkem?“
To by šlo, ale bude se při tom načítat znovu celá stránka. Pokud to nevadí, tak padá i bod 3. |
||
LovecAnimuk Profil |
#9 · Zasláno: 19. 3. 2013, 14:12:26
Str4wberry:
„To by šlo, ale bude se při tom načítat znovu celá stránka. Pokud to nevadí, tak padá i bod 3.“ Naopak, je to chtěné, díky moc za pomoc, večer zkusím nakódovat. |
||
Str4wberry Profil |
Aha. Tak potom je tedy skutečně CSS ideální řešení a používat JS nemá smysl*.
*) Kromě případného zprovoznění :hover u pro Explorer 6.
|
||
Časová prodleva: 11 let
|
0