Autor Zpráva
cosimo
Profil
Dobrý den,
na více místech už se tu řešila změna pozadí u input buttonu:
<input type="image" src="off.gif" onmouseover="this.src = 'on.gif';" onmouseout="this.src = 'off.gif';">

Zkouším zapsat jednoduchou funci, která by pak ovlivnila více buttonů, i typů inputů např. [type=submit], [type=reset], [type=button].
Všechno funguje jak má, až na alternativu zápisu button.style.backgroundImage, kód je následující:

<style type="text/css">
input[type=submit], input[type=reset], button[type=button] {
                color: #f76a29;
                font-weight: bold; 
                text-align: center;
                width: 80px; height: 23px;
                background-image: url('css_images/but_submit_off.gif');
                border: 1px solid grey;
            }
</style>

<input type='submit' value='Odeslat' onmouseover="On(this);" onmouseout="Off(this);">
<input type='reset' value='Smazat' onmouseover="On(this);" onmouseout="Off(this);">
<input type='hidden' name=hotovo' value='1' onmouseover="On(this);" onmouseout="Off(this);">

A teď k vlastní funkci
<script type="text/javascript">
function On(button) {
button.style.border = '1px solid #c61a1b';
button.style.color = '#c61a1b';
button.style.backgroundImage = "url('css_images/but_submit_on.gif')";
}
function Off(button) {
button.style.border = '';
button.style.color = '';
button.style.background = '';
}
</script>

Změna pozadí na barvu krásně funguje:
button.style.background = "#000";

Změna pozadí na obrázek bohužel ne, zkoušel jsem více typů zápisu marně:
button.style.background = "url('css_images/but_submit_on.gif')";
button.style.backgroundImage = "url('css_images/but_submit_on.gif')";
button.style.css = ('background-image','url("but_submit_on.gif")');
– nevíte někdo, jak na to?
Jan Tvrdík
Profil
cosimo:
Zkontroluj, že ta cesta k tomu obrázku je určitě správná. Ten zápis, co používáš by měl bez problémů fungovat (testováno ve FF a Chrome).


Teď jsem si všiml, že máš chybu v tom HTML (i když s tím asi nesouvisí):
<input type='hidden' name='hotovo' value='1' onmouseover="On(this);" onmouseout="Off(this);">
cosimo
Profil
Jan Tvrdík:
No jo, dyť jsem pako. Tohle přehlídnout! Hledal jsem to po všech čertech 2 hodiny - tedy ten (ne)fungující řádek js.
Ono mi to vizuelně splynulo:
• k prvnímu obrázku jdu ze souboru .css z adresáře "css" do podsložky "css_images"
url('css_images/but_submit_off.gif')
• k druhému ale musím z úrovně .html o patro výš
url('css/css_images/but_submit_on.gif')

Jak plavu v tom javaScriptu - přičítal jsem to prvotně své chybě v zápisu.
Díky za ověření, tohle už se mi, počítám, než zase vyrukuju s dotazem, jen tak nepřihodí ;).
_ _ _
(chybějících uvozovek jsem si už všiml, v orig. zdrojáku je mám)
cosimo
Profil
FIX pro starší verze IE – kdyby příklad chtěl někdo použít.
Script běhá ve FF, Chrome, Opeře, Safari i IE10.
Explorer 8 asi chápe prázdné uvozovky ve funkci Off(button) jinak,
místo cesty k původně definovaným stylům tam ony styly vynechá.
Po zadání css hodnot natvrdo do funkce mi to chodí ok.
_ _ _
(Pro starší IE prohlížeče je též možno u použitých inputů doplnit class.
Selektorům "[type= ]" totiž nerozumějí.)

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: