Autor Zpráva
zetor22
Profil
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
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
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
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>
živá ukázka http://kod.djpw.cz/pzbb-
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
tady jsem si něco zkoušel, bude mi to takto stačit....
http://testy_oop.maxcz.cz/

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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