Autor Zpráva
Huppicek
Profil
Zdravím, dělám menu s obrázky a každý button má svůj obrázek. Bohužel když chci poté změnit obrázek pomocí hoveru, tak se mi obrázek dává za pozadí prvního obrázku, ale já ho potřebuji dát jako první vrstvu. Děkuji za vaše návrhy.

HTML
<li><a href="#"  title=""><img src="images/obrazek1.png" alt="#" class="obrazek1"></a></li>

CSS
img.obrazek1:hover
{
  background-image: url(images/obrazek2.jpg)      ;

}  
Chamurappi
Profil
Reaguji na Huppicka:
Možnosti jsou cca dvě:
1) Nepoužívat <img> a dát i ten první obrázek na pozadí odkazu, ten pak půjde vyměnit při :hoveru.
2) Měnit src při přejetí myší pomocí JavaScriptu.
Huppicek
Profil
Chamurappi:
Která je podle vás lepší ?. První možnost jsem zkoušel, ale když dám na pozadí odkazu, tak v odkazu musím mít něco napsaného, aby se obrázek zobrazil, jenže já tam žádné texty mít nechci, protože je už mám v tom obrázku.
Chamurappi
Profil
Reaguji na Huppicka:
Já bych asi zvolil první možnost. Odkazu musíš nastavit rozměry (rozměry obrázku znáš, ne?) a k tomu musí být blokový.
Krom toho mít v odkazu i nějaký text (třeba odpozicovaný do neviditelných končin) není špatný nápad, protože minimálně roboti vyhledávačů a hlasové čtečky nevidomých zatím neumějí číst texty z obrázků.

já tam žádné texty mít nechci, protože je už mám v tom obrázku
Opravdu to musí být obrázek? Jak vypadá?
Huppicek
Profil
Chamurappi:
V tom prvním obrázku mám právě obrázek bez textu a když potom najede někdo myší, tak se zobrazí obrázek a pod ním text o jakou stránku se jedná.
Huppicek
Profil
Chamurappi:
Tak jsem to nakonec udělal podle první volby, ale ještě bych potřeboval, že když klikne na zvolenou stránku a ta se otevře, tak aby byl otevřený ten obrázek hoveru. Jediná možnost která mě napadá je tam dát prostě image, ale to zase bude bránit vyhledávačům ?
Tomáš123
Profil
Huppicek:
Aktívnej položke priradíš triedu, ktorej potom obrázok nastavíš. Konkrétnejší selektor zaistí správne zobrazenie.
Huppicek
Profil
Tomáš123:
Jenže já už u nich mám třídy, pro ty hovery -_-
Trejpa
Profil
Huppicek:
Můžeš použít třídu na LI nebo A, můžeš požít i více tříd.

<li class=aktivni><a class=obrazek1></a></li>
li.aktivni a.obrazek1 { }

<li><a class="obrazek1 aktivni"></a></li>
a.obrazek1.aktivni { }
Bubák
Profil
Chamurappi:
Možnosti jsou cca dvě:
Ani třetí možnost není špatná, měnit viditelnost obrázku změnou visibility nebo opacity, to jsem se inspiroval jsem se na Webylonu ;-)

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: