Autor Zpráva
surovka
Profil
Ahoj, prosím jak udělám horním menu (CSS) měnící se při najetí myši z ikony na text? Aby se běžně zobrazovala ikona (obrázek obálky) a až na ní najedu myší, tak tam bude místo obálky text kontakt.
Prosím poraďte, jsem laik :-)
margin
Profil *
Třeba takto:
<style>
a {
    display: block;
    width: 131px;
    height: 98px;
    overflow: hidden;
    background: #395;
}
a:hover {
    background: #447;
    color: #def;
    text-align: center;
    font: bold 18px/98px sans-serif;
}
img {
    border: none;
}
a:hover img {
    display: none;
}
</style>

<a href=" Jak psát web">
<img src="Odkaz" width="131" height="98" alt="">
www.jpw.cz</a>
Živá ukázka http://jsfiddle.net/aX5mj/
Jde upravit podle potřeb, třebas hrátkami s marginem, paddindem, borderem...
Trejpa
Profil
surovka:

#kontakt { background: url(obalka.gif) center no-repeat; }
#kontakt span { visibility: hidden; }
#kontakt:hover { background: none; }
#kontakt:hover span { visibility: visible; }

<a href="#" id=kontakt><span>kontakt</span></a>
surovka
Profil
A když bych to chtěla udělat s obrázky? aby se mi přepínaly mezi sebou po najetímyší, ale aby to zároveň fungovalo jako tlačítko? To udělám jak?
margin
Profil *
surovka:
aby se mi přepínaly mezi sebou po najetímyší
Nestačilo by, kdyby se obrázek měnil při najetí jedné myši?

Třeba takto:
http://teststranek.kvalitne.cz/menu6/
http://teststranek.kvalitne.cz/menu7.1/
http://teststranek.kvalitne.cz/menu7.2/
Trejpa
Profil
surovka:
A pokud tam ten text být vůbec zobrazen nemá:
<a href="#odkaz-na-kontakt"><img src=obalka.gif alt="kontakt" width=64 height=48 border=0
onMouseOver="this.src='obalka-pod-mysi.gif';" onMouseOut="this.src='obalka.gif';"></a>
jenikkozak
Profil
surovka:
Využiješ pseudotřídu hover, jak ti radili kluci výše. Obrázek na pozadí se nastavuje pomocí background-image. U této pseudotřídy se dá buď obrázek změnit, nebo se dá změnit jeho pozice.

margin:
Nestačilo by, kdyby se obrázek měnil při najetí jedné myši?
Třeba je to sedmý pád. ;)
surovka
Profil
jenikkozak:
b]margin[/b]:Jasně, že nám jenom jednu myš :-) Díky
surovka
Profil
Tak jsem se to snažila nějak sesmolit. A nevíte proč mi nefungují tak jak by měly první dvě ikony v horním menu? A proč je to tak rozházené a nezarovnané? www.surovka.cz
PS:Mějte se mnou prosím trpělivost :-)
Trejpa
Profil
surovka:
Ty v HTML hodně plaveš, že? Element UL neslouží k tomu, aby v něm byly bloky DIV.

Pominu to divné zanořovaní divů, seznamů bez položek, divů, seznamů bez položek, divů… Proč je každý obrázek v odstavci? (Víš, k čemu slouží odstavec?) Proč mají obrázky pod myší jiný rozměr? Proč rozměry neuvádíš a necháváš stránku během načítání poskakovat? Proč nevyplňuješ alty u obrázků - aby vyhledávače ani lidé nepochopili jejich význam? Proč se soubor s kontakty jmenuje index-6.htm a ne třeba kontakty.htm?


Sjednoť si velikosti obrázků a zkus to nějak normálně… jednoduše:

<div id=menu>
  <a href=index.htm><img src="images/home.png" onmouseover="this.src='images/home2.png'" onmouseout="this.src='images/home.png'" alt="domů" width=68 height=127></a>
  <a href=index-2.htm><img src="images/sluzby.png" onmouseover="this.src='images/sluzby2.png'" onmouseout="this.src='images/sluzby.png'" alt="služby" width=68 height=127></a>
  <a href=index-3.htm><img src="images/kalendar.png" onmouseover="this.src='images/kalendar2.png'" onmouseout="this.src='images/kalendar.png'" alt="kalendář" width=68 height=127></a>
  <a href=index-4.htm><img src="images/foto.png" onmouseover="this.src='images/foto2.png'" onmouseout="this.src='images/foto.png'" alt="fotografie" width=68 height=127></a>
  <a href=index-5.htm><img src="images/cenik.png" onmouseover="this.src='images/cenik2.png'" onmouseout="this.src='images/cenik.png'" alt="ceník" width=68 height=127></a>
  <a href=index-6.htm><img src="images/kontakt.png" onmouseover="this.src='images/kontakt2.png'" onmouseout="this.src='images/kontakt.png'" alt="kontakt" width=68 height=127></a>
</div>

EDIT: Opraveny překlepy v kódu. Děkuji za upozornění.
surovka
Profil
Trejpa: plavu a potřebuju to vypilovat..učím se na tom :-(


Trejpa:
místo <a href máš <a ref
:-)
Trejpa
Profil
surovka:
Vytvořil jsem komentovaný příklad stránky. I když hlavní myšlenka je vytvoření dvousloupcové struktury, možná tam pochytíš i pár dalších pár principů, třeba že obvykle stačí poměrně jednoduchý a přehledný HTML kód.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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