Funkcja zmiany tła przycisku w HTML

Jeśli chcesz, aby przyciski na Twoich stronach internetowych przyciągały uwagę, musisz zrobić coś więcej niż tylko dodać je do kodu HTML za pomocą tagów "input". Domyślnie przyciski mają szare tło z czarnym tekstem. Prosta funkcja JavaScript może zmienić nudne tło przycisku na kolorowe lub nawet ozdobić je wybranym obrazem.

Tworzenie przycisków

Bez formatowania CSS kod potrzebny do utworzenia podstawowego przycisku strony wygląda następująco:

Możesz dodać odwołanie do klasy CSS, które ustawia żółte tło przycisku, tak jak pokazano tutaj:

Następująca klasa CSS, umieszczona w sekcji stylu twojego dokumentu, tworzy tę klasę:

.styleButton {background-color: Yellow;}

Zmień "Żółty" na dowolny prawidłowy kolor HTML, aby uzyskać pożądany wygląd. Możesz dodać obraz do tła przycisku, używając następującego kodu CSS:

.styleButton {background-image: url ('myImage.jpg');}

Zastąp "myImage.jpg" adresem URL dowolnego obrazu w Internecie lub adresem URL obrazu na serwerze sieci Web.

Parametry funkcji

Poniższy przykład pokazuje ramy funkcji, która zmienia tło przycisku:

function changeBackground (buttonID, backgroundType, buttonBackground) {if (backgroundType == "image") {// Zmień obraz tła przycisku zmiany}

else {// Zmień kolor tła przycisku}}

Ta funkcja akceptuje trzy parametry. Przycisk ID zawiera identyfikator przycisku, który chcesz zmienić. Zmienna backgroundType może mieć wartość "color" lub "image". Ostatni parametr, przyciskBackground, zawiera kolor, który chcesz dodać do przycisku lub URL obrazu. Kod przetwarza logikę zdefiniowaną w pierwszym bloku "if", jeśli przekazujesz "image" jako wartość backgroundType. W przeciwnym razie wykonuje instrukcje w bloku "else" i zmienia kolor tła przycisku.

Logika kodu

Poniższy kod zawiera instrukcje niezbędne do dodania obrazu tła do przycisku lub zmiany jego koloru tła w zależności od wartości przekazanej w parametrze backgroundType:

function changeBackground (buttonID, backgroundType, buttonBackground) {if (backgroundType == "image") {// Zmień obraz tła przycisku var urlValue = "URL (" "+ buttonBackground +" ') "; document.getElementById (buttonID) .style.backgroundImage = urlValue; }

else {// Zmień kolor tła przycisku document.getElementById (buttonID) .style.backgroundColor = buttonBackground; }}

Jeśli wywołasz funkcję i przekazujesz jej backgroundType "obrazu", kod ustawia atrybut backgroundImage przycisku na kolor przekazany w zmiennej buttonBackground. W przeciwnym razie kod ustawia atrybut backgroundColor przycisku na kolor przekazany w zmiennej buttonBackground.

Wskazówki

Podczas korzystania z funkcji dodawania obrazu do tła wybierz taki, który jest wystarczająco mały, aby zmieścić się wewnątrz przycisku. HTML nie zmniejsza rozmiaru obrazu, aby zmieścić się bez elementu strony. Możesz także zmieniać tło przycisków, pulsować lub świecić, dodając do nich małe animowane pliki GIF. Zachowaj ostrożność umieszczając złożone obrazy na przyciskach, ponieważ mogą utrudniać odczytanie tekstu przycisku, jeśli przyciski mają tekst.