Autor Zpráva
Neregistrovaný
Profil *
Zdravím,
chci na web dát tlačítko s tím, že text tlačítka bude součásti obrázku (kvůli písma, stínům atd.). Obrázek bude nejlepší asi použít na pozadí s posunutím na hover stav.
Jak to ale zapsat do kódu, aby nebyl vidět text tlačítka, který je použít v kódu?

Např. použiji <a href="odkaz">Klikni</a>, ale nechci aby ten text byl vidět, protože ten již je v obrázku.

Jedna možnost by asi byla ten text v kódu nepsat, ale nevím jak moc je to "správný způsob" a navíc by to nebylo moc přístupné s vypnutými obrázky atd. (i když nevím, jestli dnes ještě někdo obrázky vypíná).
Jak to udělat?

Děkuji
Davex
Profil
Překrytí textu obrázkem
Trejpa
Profil
Neregistrovaný:
Náhrada textu obrázkem
Neregistrovaný
Profil *
Díky, mrknu na to.

Ještě by mě zajímalo, jestli je vůbec možné odkaz (který je defaultně vlastně řádkový element) takto volně použít na stránce, aniž by byl součástí třeba odstavce.

Mám třeba velký titulek h1 a pod ním chci mít odkaz formou tlačítka na nějakou podstránku. Nejvhodnější značka je tedy <a>, jelikož jde o odkaz (i když vypadá jako tlačítko). Může být ale takto <a> odkaz volně v body, nebo divu, aníž by byl v odstavci nebo jiné značce?
Trejpa
Profil
Neregistrovaný:
je vůbec možné odkaz … takto volně použít na stránce, aniž by byl součástí třeba odstavce.
Může, ničemu to nevadí, prohlížeče to zpracují jako běžný text.

Pokud bude odkazů více, bylo by vhodnější použít logickou strukturu, třeba dát odkazy do položek v seznamu <menu>, nicméně to není bezpodmínečně nutné.
Neregistrovaný
Profil *
Ještě mám s tím menší problém :-( Když ten obrázek použiji na ten prázdný span jako je to v druhém příkladu, tak při vytváření :hover efektu jej také aplikuji na span.
Nevím ale, jak to bude fungovat ve starších IE (hlavně 6). Tam byl myslím právě nějaký problém s tím, že IE rozumí jen aplikování :hoveru na odkazy. Nemám IE6 po ruce, takže nevím jak to tam bude fungovat.
margin
Profil *
Neregistrovaný:
Pokud chceš hover i pro IE6, tak se to dělalo (dělá) jednoduchým trikem takto:
a:hover {visibility: visible;} /* pro IE6 se musí deklarovat nějaký hover, pokud žádný není, tak třebas tento */
a:hover span {background-position: top;}
Neregistrovaný
Profil *
Trošku to nechápu. To jako jen tak tam mám plácnout ten první hover pro <a> a to je všechno? Raději uvedu konkrétní příklad.

Já mám třeba tento html kód podle toho druhého příkládu na tom odkazovaném webu:
<a href="reference.html" id="reference-button">Moje reference<span></span></a>

A css:
#reference-button {  /*Text tlačítka, který bude překrytý*/
                   margin: 70px 0 0 0;
                   padding: 0;
                   position: relative;
                   width: 170px;
                   height: 45px;
                   overflow: hidden;
                   display: block;
                  }
                  
#reference-button span {  /*Ten prázdný span na který je aplikované pozadí s tlačítkem, které překryje text*/
                        display: block;
                        position: absolute;
                        left: 0;
                        top:0;
                        z-index: 1;
                        width: 170px;
                        height: 45px;
                        margin: 0;
                        padding: 0;
                        background: url("images/reference-button.png") top left no-repeat;
                       }
                       
#reference-button span:hover {  /* Hover s posunutím pozadí u kterého si nejsem jistý, jak bude fungovat v IE6*/
                        display: block;
                        position: absolute;
                        left: 0;
                        top:0;
                        z-index: 1;
                        width: 170px;
                        height: 45px;
                        margin: 0;
                        padding: 0;
                        background: url("images/reference-button.png") 0px -50px no-repeat;
                       }
Trejpa
Profil
Neregistrovaný:
Dej :hover odkazu, jak bylo uvedeno výše.

Místo tohohle:
#reference-button span:hover { … }

Použij toto:
#reference-button:hover span { … }
margin
Profil *
#reference-button {  /*Text tlačítka, který bude překrytý*/
                   margin: 70px 0 0 0;
                   padding: 0;
                   position: relative;
                   width: 170px;
                   height: 45px;
                   overflow: hidden;
                   display: block;
                  }
                  
#reference-button span {  /*Ten prázdný span na který je aplikované pozadí s tlačítkem, které překryje text*/
                        display: block;
                        position: absolute;
                        left: 0;
                        top:0;
                        z-index: 1;
                        width: 170px;
                        height: 45px;
                        margin: 0;
                        padding: 0;
                        background: url("images/reference-button.png") top left no-repeat;
                       }
                       
#reference-button:hover span {  /* Hover s posunutím pozadí pro IE6*/
                        /* pro hover stačí deklarovat jen to, co se mění */
                        background: url("images/reference-button.png") 0px -50px no-repeat;
                       }
                       
a:hover {visibility: visible;}
V podstatě musíš pro IE6 použít dva triky, viz výše, teď to více okecám.
První trik, hover nemá span uvnitř odkazu, ale odkaz, ve kterém je span, takže pravidlo
#reference-button:hover span platí pro span, který je uvnitř přejížděného odkazu #reference-button.
Výše uvedená trik funguje ve všech prohlížečích, ale kvůli chybě nefunhuje v IE6 , ale stačí ho trochu popostrčit jakýmkoliv kdekoliv deklarovaným hoverem odkazu. Pokud nikde žádný hover odkazu nedeklaruješ, stačí přidat
a:hover {visibility: visible;}, což je pravidlo, u kterého je téměř nulová pravděpodobnost, že se jeho přidáním něco rozbije.
antoninstrnad
Profil
Zdravím a prosím o radu. Vkládám "Tlačítko" a chtěl bych použít tento zápis pro posunovací obrázek:

CSS

a {display: block; width: 80px; height: 20px; overflow: hidden;}
a:hover {text-indent: -80px;}
a img {border: none;}

HTML

<a href="#"><img src="img/tlacitkodownload.jpg" width="160" height="20"</a>

Rozhodí mi to ale Menu lištu tak, že odkazy v ní se také začnou přesunovat do strany.
Jak bych měl tedy definovat, že chci tímto zápisem ovlivnit pouze Tlačítko Download ?
Trejpa
Profil
antoninstrnad:
a.tlacitkodownload {display: block; width: 80px; height: 20px; overflow: hidden;}
a.tlacitkodownload:hover {text-indent: -80px;}
a img {border: none;}

<a href="#" class=tlacitkodownload><img src="img/tlacitkodownload.jpg" width="160" height="20"></a>
antoninstrnad
Profil
Trejpa:
Funguje to, díky!
Bubák
Profil
Nevím, zda se s neuzavřeným tagem img vyrovnají všechny prohlížeče, ale pokud chyba není jen v této ukázce, důrazně doporučuji opravu.
<a href="#" class=tlacitkodownload><img src="img/tlacitkodownload.jpg" width="160" height="20"></a>

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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