Witam jak zrobić przycisk submit który będzie korzystał z 2 gifów.
tzn zamiast normalnego przycisku ma być wyświetlony gif np. 01 a po najechaniu gif 02. kombinowałem ale coś mi nie wychodzi.
Pełna wersja: [HTML][CSS]przycisk animacjia image
Mój temat Temat: HTMLCSSCos_aand39la_rollover
Wszystko ok ale ja już z tym kombinowałem i właśnie submit mi nie wychodzi zwykły link to niema problemu.
Dzięki za pomoc. ale po 3 godzinach wali z css i html wygrałem mam przycisk "submit" w wersji graficznej
Dzięki za pomoc. ale po 3 godzinach wali z css i html wygrałem mam przycisk "submit" w wersji graficznej
Zapodasz kodem?
CSS
HTML
Kod
<style type="text/css">
button {
border: none;
background: none;
margin: 0;
padding: 0;
cursor: pointer;
margin: 0px 4px 1px 3px;
overflow: visible;
width: auto;
line-height: normal;
}
label,input,select,button {
vertical-align: middle;
font-family: Tahoma, sans-serif, arial,helvetica;
}
button td {
vertical-align: middle !important;
color: #fbfbfb;
font-size: 11px;
font-weight: bold;
width: 150px;
height: 27px;
border: 0 none;
margin: 0;
padding: 0;
}
button.type_1 td.btn_m {
text-align: center;
background: url(images/pmenu01.gif) no-repeat top;
padding: 0 0px;
white-space: nowrap;
}
button.type_1:hover td.btn_m {
text-align: center;
background: url(images/pmenu02.gif) no-repeat top;
padding: 0 0px;
white-space: nowrap;
}
button.type_1:active td.btn_m {
text-align: center;
background: url(images/pmenu03.gif) no-repeat top;
padding: 0 0px;
white-space: nowrap;
}
</style>
button {
border: none;
background: none;
margin: 0;
padding: 0;
cursor: pointer;
margin: 0px 4px 1px 3px;
overflow: visible;
width: auto;
line-height: normal;
}
label,input,select,button {
vertical-align: middle;
font-family: Tahoma, sans-serif, arial,helvetica;
}
button td {
vertical-align: middle !important;
color: #fbfbfb;
font-size: 11px;
font-weight: bold;
width: 150px;
height: 27px;
border: 0 none;
margin: 0;
padding: 0;
}
button.type_1 td.btn_m {
text-align: center;
background: url(images/pmenu01.gif) no-repeat top;
padding: 0 0px;
white-space: nowrap;
}
button.type_1:hover td.btn_m {
text-align: center;
background: url(images/pmenu02.gif) no-repeat top;
padding: 0 0px;
white-space: nowrap;
}
button.type_1:active td.btn_m {
text-align: center;
background: url(images/pmenu03.gif) no-repeat top;
padding: 0 0px;
white-space: nowrap;
}
</style>
HTML
Po za tym kod kolegi tego HTML'a powala. Ojj... Kursy!
Jak już to tak:
A CSS:
Takie trudne?
Jak już to tak:
Kod
<form action="link" method="post">
<table>
<tr>
<td>
<input type="submit" name="submit" class="submit" />
</td>
</tr>
</table>
</form>
<table>
<tr>
<td>
<input type="submit" name="submit" class="submit" />
</td>
</tr>
</table>
</form>
A CSS:
Kod
input.submit {
background:url(images/hover1.jpg) #000000;
}
input.submit:hover {
background:url(images/hover2.jpg) #000000;
}
background:url(images/hover1.jpg) #000000;
}
input.submit:hover {
background:url(images/hover2.jpg) #000000;
}
Takie trudne?
Nie wiem dlaczego ale po zastosowaniu waszego kodu nie działa tak jak powinno a według mojego "g***a" działa tak jak powinno tz jest wyświetlone zdjęcie itd.
Bo kolego nie potrafisz tego zastosować? Skopiowałeś kod HTML i CSS? Jeśli tak to nic w nim nie zmieniaj i zobaczysz, że będzie działać - musi, łaski nie robi.
U mnie wystarczy zmienić nazwę pliku graficznego z:
np. na:
i drugi zmieniasz analogicznie. Wczytuje Ci 2 osobne grafiki? Jeśli tak to na pewno działa. Albo na drugim zmień kolor z #000000 np. na #804040
przykład:
U mnie wystarczy zmienić nazwę pliku graficznego z:
Kod
background:url(images/hover1.jpg) #000000;
np. na:
Kod
background:url(jakasgrafika.jpg) #000000;
i drugi zmieniasz analogicznie. Wczytuje Ci 2 osobne grafiki? Jeśli tak to na pewno działa. Albo na drugim zmień kolor z #000000 np. na #804040
przykład:
Kod
background:url(grafikazhovera2.jpg) #804040;
to działa ale nie.. ale błąd jest w tym że zostaje wyświetlone wewnątrz przycisku a nie jako przycisk...
Dodaj do obydwóch (do input.submit i input.submit:hover) border:none;
Czyli będzie wyglądać to tak:
Czyli będzie wyglądać to tak:
Kod
input.submit {
background:url(images/hover1.jpg) #000000;
border:none;
}
input.submit:hover {
background:url(images/hover2.jpg) #804040;
border:none;
}
background:url(images/hover1.jpg) #000000;
border:none;
}
input.submit:hover {
background:url(images/hover2.jpg) #804040;
border:none;
}
ok sam doszedłem przed momentem ale wielki dzięki... i wszystkiego najlepszego w nowym roku...
Wzajemnie!
Szampańskiej zabawy. Ja już znikam i idę się zabawić.
Bez odbioru.
Szampańskiej zabawy. Ja już znikam i idę się zabawić.
Bez odbioru.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.