| Autor | Zpráva | ||
|---|---|---|---|
| zetor22 Profil |
#1 · Zasláno: 16. 2. 2014, 23:02:00
Ahoj,
potřeboval bych poradit s následujícím: mám měnící se obrázek (po najetí myší se zesvětlí fotka), je to dělané klasicky, že se zobrazí nejdříve levá polovina obrázku a po najetí pravá (světlejší kopie) obrázek je odkaz (stejný i při najetí) na obrázku bych ale potřeboval ještě text, taky odkaz který odkazuje na to samé místo... problém je v tom, že při najetí na text mi prohlížeč nebere to, že jsem i na obrázku, takže obrázek ztmavne... šlo by to nějak vyřešit pomocí html a css aby neztmavl? díky za rady pokud sem to nepopsal dostatečně vytvořím ukázku |
||
| janbarasek Profil |
#2 · Zasláno: 16. 2. 2014, 23:04:01
zetor22:
Zesvětlení řeš tak, že přes původní obrázek vykreslíš nějaký objekt (třeba DIV) s bílým pozadím a nastavenou průhledností (kolik % průhlednosti, to je už na tobě). Toto bude zároveň řešit to, že bude písmo viditelné, protože ten objekt můžeš vykreslovat mezi obrázkem a písmem (představ si to jako 3 vrstvy na sobě). |
||
| zetor22 Profil |
#3 · Zasláno: 17. 2. 2014, 12:01:27
to je celkem zajmavý nápad, on ten obrázek ještě nějak zvýrazňuje barvy, asi vyšší kontrast... ale možná to takto pude, takže díky za radu
|
||
| Bubák Profil |
#4 · Zasláno: 17. 2. 2014, 12:44:39 · Upravil/a: Bubák
janbarasek:
Tvá rada neřeší ztrátu hoveru nad textem. Přijde mi to, jako se drbat levou nohou za pravým uchem, mít takto tři vrstvy nad sebou: 1. vrstva obrázek 2. vrstva div s proměnlivou průsvitností 3. vrstva text ber proměnlivé průsvitností. „Zesvětlení řeš tak, že přes původní obrázek vykreslíš nějaký objekt (třeba DIV) s bílým pozadím a nastavenou průhledností“ Jednodušší je udělat to naopak, vložit obrázek do inline bloku, nemusím se párat s pozicovíním ani s rozměry bloku. Případný text stačí jednoduše napozicovat. <style>
.popsany {
position: relative;
display: inline-block;
background: #def; /* barva pozadí pod obrázkem, použije se, pokud má být jiná, než je pozadí stránky */
}
.popsany:hover {
visibility: visible;
}
.popsany h2 {
margin: 0;
font-family: arial, sans-serif;
font-size: 90%;
position: absolute;
top: 3px;
left: 15px;
}
.popsany img {
display: block; /* zruší mezeru pod obrázkem */
filter: alpha(opacity=40);
opacity: 0.4;
}
.popsany:hover img {
filter: none;
opacity: 1;
}
</style>
<a href="#" class="popsany">
<img src="http://teststranek.kvalitne.cz/images/obrazek-1.jpg">
<h2>Kaple svaté Kláry</h2>
</a>kód http://kod.djpw.cz/pzbb zetor22: „on ten obrázek ještě nějak zvýrazňuje barvy, asi vyšší kontrast...“ Pokud chceš měnit obrázek, tak stačí ve zdejší ukázce dát 5. řádek jako obrázkové pozadí a při hoveru měnit visibility. Myslím si, tvému původnímu kódu by stačila malá úprava, a chodilo by to tak, jak potřebuješ. Bohužel jsi nedal živou ukázku nebo aspoň HTML+CSS kód. |
||
| zetor22 Profil |
#5 · Zasláno: 17. 2. 2014, 16:49:11
tady jsem si něco zkoušel, bude mi to takto stačit....
http://testy_oop.maxcz.cz/ |
||
|
Časová prodleva: 10 let
|
|||
0