[HTML][CSS]przycisk animacjia image Opcje

[ArturEales]

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.

[Strarus]

Mój temat Temat: HTMLCSSCos_aand39la_rollover

[ArturEales]

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

[Strarus]

Zapodasz kodem?

[decha-design]

A nie wystarczy

[HTML] pobierz, plaintext 
<input type="submit" value="Wyślij" class="send" />
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
input.send {
background: #fff url('01.gif');
}
 
input.send:hover {
background: #fff url('02.gif');
}
[HTML] pobierz, plaintext 

?

[ArturEales]

CSS

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>

HTML

[HTML] pobierz, plaintext 
<form><button type="submit" class="type_1"><table><tbody><tr><td class="btn_m">Dalej</td></tr></tbody></table></button></form>
[HTML] pobierz, plaintext 

Ten post edytował ArturEales 31.12.2008, 23:31:37

[decha-design]

[HTML] pobierz, plaintext 
button.type_1:hover td.btn_m
[HTML] pobierz, plaintext 

takie coś nie ma prawa dzialać, na pewni nie poprawnie. Kto widział TABELKĘ w PRZYCISKU? Ja pierdzielę ...

standardy, standardy, standardy

[rodipl]

Po za tym kod kolegi tego HTML'a powala. Ojj... Kursy!

Jak już to tak:

Kod

<form action="link" method="post">
     <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;
}

Takie trudne?

[ArturEales]

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.

[rodipl]

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:

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;

Ten post edytował rodipl 31.12.2008, 23:52:23

[ArturEales]

to działa ale nie.. ale błąd jest w tym że zostaje wyświetlone wewnątrz przycisku a nie jako przycisk...

[rodipl]

Dodaj do obydwóch (do input.submit i input.submit:hover) border:none;

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;
}

[ArturEales]

ok sam doszedłem przed momentem ale wielki dzięki... i wszystkiego najlepszego w nowym roku...

[rodipl]

Wzajemnie!

Szampańskiej zabawy. Ja już znikam i idę się zabawić.
Bez odbioru.