| Autor | Zpráva | ||
|---|---|---|---|
| kordy Profil |
#1 · Zasláno: 10. 8. 2011, 22:39:20 · Upravil/a: kordy
Vytvořil sem si tenhle kód:
<img src="ramecek.png" style="position:absolute; left:1; right:1; visibility=hidden;" onmouseover="this.style.visibility='visible'" onmouseout="this.style.visibility='hidden'"> Ten mi nefunguje, ale když to prohodím teda kde je hidden dám visible a naopak tak mi to funguje dovede mi někdo poradit, případně aspoň říct proč je tomu tak? Děkuji Kordy |
||
| margin Profil * |
#2 · Zasláno: 11. 8. 2011, 06:12:23
Když ten obrázek skryješ, tak tam není, tak to nemůže nic dělat.
Můžeš třeba měnit opacity a obrázek úplně zprůhlednit, nebo změnit src obrázku za průhledný GIF. |
||
| peta Profil |
#3 · Zasláno: 11. 8. 2011, 08:46:32 · Upravil/a: peta
margin: To neni tak uplne pravda. Visibility meni prvek na neviditelny, ale stale tam je. Ale je mozne, ze nektery rozbity prohlizec se k tomu postavi jina a prvek uplne schova jako pri display:none.
kordy: 1) Position + z-index jsou neoodelitelne parametry. 2) Nechapu, proc nemenis className? 3) mas tam preklep style = ... visibility=hidden 4) proc to neudelas pres :hover? <style>
img.a, img.b {position:absolute; left:1; right:1;z-index:10;}
img.a {visibility:visible;}
img.b {visibility:hidden;}
</style>
<img src="ramecek.png" class=a onmouseover="this.className='b'" onmouseout="this.className='a'">
<style>
img.a {position:absolute; left:1; right:1; visibility:hidden;z-index:10;}
img.a:hover {visibility:visible;}
</style>
<img src="ramecek.png" class="a">
K te opacite, co psal margin, tam by slo pouzit 0.01 nebo 0.99, ale myslim, ze problem bude spis v z-indexu, protoze to pozicujes. |
||
| kordy Profil |
#4 · Zasláno: 11. 8. 2011, 11:54:30
Dík za ten z-index to je pro mě novinka sem tak trošku samouk :)
Bohužel mi to stále nefunguje na IE ostatní v tuto chvíli nemůžu vyzkoušet... To první behá to co ale potřebuji ne :( Stejně díky za snahu vysvětlit nasměrování na řešení problému :) |
||
| peta Profil |
#5 · Zasláno: 11. 8. 2011, 13:39:08
Jaka je teda otazka, co ti kde proc a za jakych podminek (co delat, jaky prohlizec, jake doctype) jde ci nejde? Tva posledni odpoved do toho vklada trosku zmatek.
|
||
| Davex Profil |
#6 · Zasláno: 11. 8. 2011, 18:36:32 · Upravil/a: Davex
peta:
Nevím, zda jsi to zkoušel, ale tyto všechny tři varianty odkrývání obrázku nefungují skoro nikdy a nikde. Na vykreslovacím režimu nezáleží. V tvém prvním příkladě máš navíc logickou chybu. Na skrytém prvku tak nějak nezabírá událost onmouseover a pseudotřída :hover, takže měl margin pravdu.
|
||
| kordy Profil |
#7 · Zasláno: 11. 8. 2011, 19:20:50
Davex
Můžu se zeptat jak by to mělo vypadat? Přiznám se, že se neorientuji natolik, abych věděl o čem se vlasně bavíte. Pomohl by mi kód tam si aspoň uvědomím co je k čemu. |
||
| Davex Profil |
#8 · Zasláno: 11. 8. 2011, 20:17:06
Pro skrytí obrázku použij CSS vlastnost
opacity, jak psal margin. Aby to fungovalo i v Exploreru 6, tak se musí obrázek obalit odkazem a přidat filter.
<!doctype html>
<style>
.vykuk img {
filter: alpha(opacity=0);
opacity: 0;
border: 0;
}
.vykuk:hover img {
filter: alpha(opacity=100);
opacity: 1;
}
</style>
<a class="vykuk" href="#"><img src="ramecek.png"></a> |
||
| kordy Profil |
#9 · Zasláno: 11. 8. 2011, 21:36:24
Děkuji tohle sice funguje, ale teď tam neni průhednost toho png...
|
||
| Davex Profil |
#10 · Zasláno: 11. 8. 2011, 23:25:46 · Upravil/a: Davex
kordy:
O průhledném png jsi předtím nic nepsal. V jakém prohlížeči chybí průhlednost? Pokud v IE, tak zkus přepsat filter: alpha(opacity=100) na filter: none, aby se filtr vypnul.
|
||
| kordy Profil |
#11 · Zasláno: 11. 8. 2011, 23:45:45
Nepsal jsem o něm, protože do teď fungoval :) Díky za čas a snahu vyřešil jsem to neprůhledným png a asi to i vypadá líp. Vím co jsem potřeboval můžete lock...
|
||
| peta Profil |
#12 · Zasláno: 12. 8. 2011, 11:12:30 · Upravil/a: peta
kordy: Ja bych pres tvuj obrazek napozicoval <div> nebo <a> se spravnym z-indexem a obrazek bych nechal na pozadi.
<style>
a {position:relative; display:inline-block;} /*pripadne nejak width/height*/
a img {visibility:hidden;}
a:hover img {visibility:visible;}
</style>
<a><img src="ramecek.png"></a> |
||
|
Časová prodleva: 13 let
|
|||
0