Autor Zpráva
LovecAnimuk
Profil
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
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
suvel: No popsal jsi to přesně, ale jinak by to přece nebyla taková sranda, nen? :)
Str4wberry
Profil
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
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
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
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.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: