| Autor | Zpráva | ||
|---|---|---|---|
| veltrusk Profil * |
#1 · Zasláno: 27. 8. 2011, 22:49:47
Lze nějakým způsobem změnit pozici pozadí div1 po najetí na div2?
Obrázek pro ilustraci: http://stuff.michalveltrusky.com/div.png Tzn., jakmile bych najel myší na kteroukoliv část v prvním červeném rámečku (skládajícího se z div1 a div2) změnila by se pozice pozadí div1 tak, aby situace vypadala jako v druhém rámečku (tzn. div2 nezměněn, u div1 pouze pozice pozadí). Samozřejmě by to šlo jednoduše tím způsobem, že by se fotografie s textem "BLABLA" dala do jednoho divu, tím pádem by ale v druhé části pozadí musela být celá fotografie znovu, což je dalších cca 150 KB navíc. Díky. |
||
| Sir Tom Profil |
#2 · Zasláno: 28. 8. 2011, 09:58:27
veltrusk:
Nejdříve vytvoř 2 CSS styly (2 třídy) (např.: .stylePozadi a .stylePozadi2) - jeden takový, jako je výchozí stav; a druhý, kde je posunuté pozadí - fígl je v tom, že u div1 bude měnit třídu podle pozice kurzoru. U elementu, který se má měnit (asi div1) přidej atribut id="meniciDiv". Pak za pomoci JavaScriptu - u elementů, u kterých chceš, aby při najetí myší na ně, se něco stalo přidej JS událost (atribut): onmouseover="necoSeStane() onmouseout="necoSeStane()" Jakmile uživatel najede na element s událostí onmouseover, vykoná se funkce "necoSeStane()". Jakmile uživatel odjede myšítkem z elementu, stane vrátí se výchozí stav, <script type="text/javascript">
function necoSeStane(){
if(document.getElementById("meniciDiv").className=="stylePozadi"){ //pokud element s id "meniciDiv" má třídu "stylePozadi"
document.getElementById("meniciDiv").className = "stylePozadi2"; //změníme mu třídu (s jiným stylem a tedy i s jiným vzhledem)
}else{
document.getElementById("meniciDiv").className = "stylePozadi"; //v opačném případě element dostane výchozí třídu
}
}
</script> |
||
| jenikkozak Profil |
#3 · Zasláno: 28. 8. 2011, 10:22:12 · Upravil/a: jenikkozak
veltrusk:
Vytvoř si div, který bude obsahovat obrázek s těmi panďuláky (jako prvek <img>) a na pozadí bude mít jako obrázek to, co máš označené jako „pozadí div1“. Při najetí na div se vyvolá pseudotřída :hover, při které změníš pozici obrázku na pozadí. V podstatě ani ten div nepotřebuješ, pozadí můžeš nastavit obrázku <img>, kterému přidáš spodní okraj (padding) tak velký, jako má být část toho obrázku na pozadí, která se má zobrazit. Javascript ani dvě třídy nepotřebuješ. |
||
|
Časová prodleva: 13 let
|
|||
0