kursy
Podświetlanie pola tekstowego
Wraz z rozwojem internetu coraz częsciej spoykay się z polami formularzy. Przeważnie są dune - jednokolorowe i statyczne. Ale można to zmienić! Zobacz jak łatwo.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<style type="text/css">
/* tu będzie kod CSS */
</style>
<body>
<form action="#">
<input type="text" name="pole" />
</form>
</body>
</html>
Najprostszy z możliwych formularz. Nawet nigdzie nie prześle tych danych. Ale tu nie o wysyłanie danych też chodzi:-)
A teraz CSS z seksji head
/* dla normlanego inputa [każdego, także submit, reset itp.] tworzę regułę */ input {
border: 1px solid black;
font: normal 12px arial, sans-serif; {
}
input:hover {
border: 1px solid black;
font: normal 12px arial, sans-serif; {
background: transparent url(tlo.gif) top left no-repeat; }
Cały zabieg polega na wstawieniu ruchomej grafiki w tło. jest to dwukolorowy pasek przechodzący dosyć szybko z lewej na prawą stronę. Nic takiego? No, może i nic, ale pojawia się dopiero po najechaniu nad pole formularza.
Efekt, najedź na poniższe pole formularza
Jeśli jesteś szczęśliwym posiadaczem MSIE - szybko wyrzuć to coś i zainstaluj porządną, nowoczesną przeglądarkę -np. Firefox lub Opera.
Kolory dobrałem celowo bardzo mocne, aby można było bez problemu zauważyć efekt. Ale lepiej wygląda on z delikatnymi odcieniami, mniej kontrastującymi ze sobą. Popróbuj:-)
Jeśli jednak jesteś zatwardziałym zwolennikiem MSIE, albo twoi klienci są, to spróbujmy obejść tą przeszkodę. Znalazłem kiedyś taki plik .htc[pobierz], dzięki któremu wszystkie elementy na stronie mogą mieć przypisywaną regułe z pseudoklasą :hover.
Plik ten należy wstawić do reguły body:
<style type="text/css">
body {
behavior: url(csshover.htc);
}
/* tu pozostały kod. I działa! */
</style>
jak widać, nie dość, że dla MSIE trzeba dodatkowo nadrzucać kodu - większy rozmiar strony, to jeszcze trzeba zrezygnować ze standardów - bahavior nie jest zgodne ze standardami W3C.
Zobaczmy jeszcze jeden sposób ma ten sam efekt.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> </head> <body> <form action="#"> <input size="8" type="text" name="pole" onmouseover="this.style.background='Url(\'pinput_grafa/tlo.gif\')'" onmouseout="this.style.background='Url(\'\')';" /> </form> </body> </html>
Tym razem skorzytałem ze zdarzeń JS. Też się da, ale kod - jak dla mnie - stracił swoją przejrzystość.
Efekt
Druga metoda działała we wszystkich przeglądarkach(oczywiscie obsługa JS musi być włączona), w tym i MSIE. nawet bez tego pliku.
Po raz kolejny widać, że MSIE często wiąże ręce webmasterom. Czasem można to obejść - tak jak w powyższym przykładzie. Coraz częściej jednak - nie. Zachęcam do używania przeglądarek - nie MSIE:-)
Patryk 'yarpo' Jar
