| Autor | Zpráva | ||
|---|---|---|---|
| cosimo Profil |
#1 · Zasláno: 10. 3. 2013, 11:24:18
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")'); |
||
| 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')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í.)
|
||
|
Časová prodleva: 13 let
|
|||
0