HTML'de Düğme Arka Planını Değiştirme İşlevi

Web sayfalarınızdaki düğmelerin dikkat çekmesini istiyorsanız, "input" etiketlerini kullanarak bunları HTML kodunuza eklemekten daha fazlasını yapmanız gerekir. Düğmeler, varsayılan olarak, siyah metinli gri arka planlara sahiptir. Basit bir JavaScript işlevi, sıkıcı düğme arka planını renkli bir renge dönüştürebilir veya seçtiğiniz bir resimle süsleyebilir.

Düğmeler Yaratmak

CSS biçimlendirmesi olmadan, temel bir Web sayfası düğmesi oluşturmak için gereken kod aşağıdaki gibi görünür:

Düğmenin arka planını burada gösterildiği gibi sarıya ayarlayan bir CSS sınıfı başvurusu ekleme seçeneğiniz vardır:

Belgenizin stil bölümüne yerleştirilen aşağıdaki CSS sınıfı, bu sınıfı oluşturur:

.styleButton {background-color: Sarı;}

İstediğiniz görünümü elde etmek için "Sarı" ifadesini geçerli bir HTML rengine değiştirin. Aşağıdaki CSS kodunu kullanarak düğmenin arka planına bir görüntü ekleyebilirsiniz:

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

"MyImage.jpg" ifadesini Web'deki herhangi bir resmin URL’siyle veya Web sunucunuzdaki resmin URL’leriyle değiştirin.

İşlev parametreleri

Aşağıdaki örnek, bir düğmenin arka planını değiştiren bir fonksiyonun çerçevesini gösterir:

function changeBackground (buttonID, backgroundType, buttonBackground) {if (backgroundType == "image") {// Düğmenin arka plan resmini değiştir}

else {// Düğmenin arka plan rengini değiştir}}

Bu fonksiyon üç parametre kabul eder. ButtonID değiştirmek istediğiniz düğmenin kimliğini tutar. BackgroundType değişkeni "color" veya "image" değerine sahip olabilir. ButtonBackground adlı son parametre, düğmeye veya resmin URL'sine eklemek istediğiniz rengi tutar. Kod, ilk "if" bloğunda tanımlanan mantığı, "image" ifadesini backgroundType'ın değeri olarak iletirseniz işler. Aksi takdirde, "else" bloğundaki ifadeleri çalıştırır ve düğmenin arka plan rengini değiştirir.

Kod Mantığı

Aşağıdaki kod, bir düğmeye arka plan görüntüsü eklemek veya backgroundType parametresinde geçirilen değere bağlı olarak arka plan rengini değiştirmek için gereken ifadeleri listeler:

changeBackground işlevi (buttonID, backgroundType, buttonBackground) {if (backgroundType == "image") {// Düğmenin arka plan resmini değiştir var urlValue = "URL ('" + buttonBackground + "')"; document.getElementById (buttonID) .style.backgroundImage = urlValue; }

else {// düğmenin arka plan rengini değiştir document.getElementById (buttonID) .style.backgroundColor = buttonBackground; }}

Eğer işlevi çağırır ve "image" 'ın bir backgroundType'ını iletirseniz, kod, düğmenin backgroundImage özelliğini, buttonBackground değişkeninde geçirilen renge ayarlar. Aksi halde, kod, düğmenin backgroundColor özelliğini, buttonBackground değişkeninde geçirilen renge ayarlar.

İpuçları

Bir görüntüye arka plan eklemek için işlevi kullanırken, düğmenin içine sığacak kadar küçük birini seçin. HTML, bir görüntünün boyutunu sayfa elemanı olmadan sığdırmaz. Düğme arka planlarına, küçük animasyonlu GIF'ler ekleyerek hareket ettirme, atma veya parlama da yapabilirsiniz. Düğmelere karmaşık görüntüler yerleştirirken dikkatli olun çünkü düğmelerinizde metin varsa, düğmenin metnini okumayı zorlaştırabilir.