Przycisk + tekst

[LukaszC89]

Cześć.
Mam taki problem w html'u:
Stworzyłem przycisk + dodałem tekst na grafice.
Co można zrobić aby po najechaniu na tekst na przycisku. Również zmieniał on swoją grafikę? Jest jakieś rozwiązanie w html'u?

Kod:
<div style="border:0px solid black; position:relative; width:124px; height: 26px;">
<img src="tlo.jpg" alt="Tekst alternatywny" border="0" onmouseover="this.src = 'tlo2.jpg'" onmouseout="this.src = 'tlo.jpg'" /></a>
<div style="position:absolute; bottom:5; right:5;"><a href="http://www.google.pl">Google</a></div>
</div>

[jozbar]

Lepiej tak:

Kod:

<a style="display:block; width:124px; height: 26px;background:url(tlo.jpg);" onmouseover="this.style.background = 'url(tlo2.jpg)'" onmouseout="this.style.background='url(tlo.jpg)'" href="http://www.google.pl">Google</a>

...a do zmiany wyglądu tekstu zastosuj zwykły :hover

EDIT: Poprawione

[LukaszC89]

Super, wszystko działa. A czy można do tego kodu dorzucić, zeby z najechaniem odtwarzał się dźwięk?

Edit: lub np. powiększała się czcionka tekstu.

[Dhofca]

Nie można.

[jozbar]

Super, wszystko działa. A czy można do tego kodu dorzucić, zeby z najechaniem odtwarzał się dźwięk?

Wszystko można ale nie wszystko należy robić

Edit: lub np. powiększała się czcionka tekstu.

Dodaj zwykłą pseudo klasę :hover w stylach dla tego <a> i możesz tam robić wszystko z tym tekstem

[LukaszC89]

Jeszcze jedna sprawa z którą nie mogę sobie poradzić.
Stworzyłem tabelę, z zaokrąglonymi rogami.

poprzez kod:
<table cellpadding="0" cellspacing="0" width="790">
<tr><td style="line-height: 1px"><img src="lg.png" alt="4" /></td><td bgcolor="#66CC33" style="line-height: 1px"><img src="0.gif" alt="" /></td><td style="line-height: 1px"><img src="pg.png" alt="" /></td></tr>
<tr><td bgcolor="#66CC33"><img src="0.gif" alt="" /></td><td bgcolor="#66CC33">

Zawartość

</td><td bgcolor="#66CC33"><img src="0.gif" alt="" /></td></tr>
<tr><td style="line-height: 1px"><img src="ld.png" alt="" /></td><td bgcolor="#66CC33" style="line-height: 1px"><img src="0.gif" alt="" /></td><td style="line-height: 1px"><img src="pd.png" alt="" /></td></tr>

</table>


Wszystko było ok, lecz gdy wprowadziłem rozmiar width="790".
Nastąpiło przesunięcie. Jest sposób aby to skorygować?


http://img337.imageshack.us/img337/3253/83084935.jpg

Dzięki za powyższą pomoc.

[Engine]

Zaraz Cię wszyscy wyśmieją za te tabele, z resztą ja też .

Jak byś stworzył szablon na DIV-ach nie miałbyś tego problemu.

[Kartofelek]

wyłącz paddingi dla tabeli, wyłącz marginesy, daj jej cellpadding="0" i cellspacing="0" jako atrybuty. Może zadziała.

Co do wyśmiewania. No to różnie z tym bywa. Taki np jqtransform też generuje tabele dla textarea. Ludzie nienawidzą tabel - bo tak. A jak zapytasz o argument, to ci zacytują te które kiedyś ktoś powiedział.


Prawda jest jednak taka, że czasami o wiele łatwiej skorzystać z tabel. Np przy bardzo dużych formularzach, gdzie często wykorzystujemy vertical align. W sumie zapomniana metoda, ale ostatnio miałem możliwość poprawiania takiego layautu (visual studio) i nie było to takie złe - było nawet przyjemne