+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: Przycisk + tekst (/thread-przycisk-tekst)
Przycisk + tekst - LukaszC89 - 20-11-2010
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>
RE: Przycisk + tekst - jozbar - 20-11-2010
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
RE: Przycisk + tekst - LukaszC89 - 20-11-2010
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.
RE: Przycisk + tekst - Dhofca - 20-11-2010
Nie można.
RE: Przycisk + tekst - jozbar - 20-11-2010
(20-11-2010, 17:46)LukaszC89 napisał(a): 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ć
(20-11-2010, 17:46)LukaszC89 napisał(a): 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
RE: Przycisk + tekst - LukaszC89 - 21-11-2010
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.
RE: Przycisk + tekst - Engine - 21-11-2010
Zaraz Cię wszyscy wyśmieją za te tabele, z resztą ja też
.Jak byś stworzył szablon na DIV-ach nie miałbyś tego problemu.
RE: Przycisk + tekst - Kartofelek - 21-11-2010
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