| 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í :hoveru pro Explorer 6.
|
||
|
Časová prodleva: 13 let
|
|||
0