Rollover button na submit formu

[jokla]

Kako se može koristit rollover button na submit ili reset formu. Želio bi to promijeniti kod "contact" sekcije moje stranice ali nikako da mi uspije. Probao sam već svakakve moguće kombinacije, sve moguće koje ja znam, a znam ih malo.

Sada sam trenutno odredio style u css-u koje izgleda ovako

Code:

.submit, .reset   {    font-family:Verdana, Arial, Helvetica, sans-serif;    font-size: 10px;    color: #767676;    background-color: #FFFFFF;    border: 1px solid #666666;    }

Koristio bih gifiće ako u manu bar-u i gdje bi ja to morao kod ovog kôda napisat

Code:

<input name="Submit" type="submit" class="submit" value="Send Mail" > <input name="Reset" type="reset" class="reset" value="Reset">

Dosad se nisam bavio sa time pa nemam pojma kak da to sredim.

Thanks.

[vedran]

Napravi obični image link, na njega stavi rollover i ovo mu dodaj u href :
javascript:document.TvojaForma.submit(); za submit forme..
a za reset stavi ovo: javascript:document.TvojaForma.reset();

I promijeni "TvojaForma" u ime svoje forme

Last edited by vedran on 31.10.2004 14:46; edited 1 time in total

[jokla]

Ako su mi forme ovakve

Code:

<input type="submit" value="Send Mail" name="sub" /> <input type="reset" value="Reset" name="res" />

onda bi po tvome rolloveri trebali biti ovakvi

Code:

<a href="javascript:document.sub.submit();" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','xart_style/11sendmail1.gif',1)"><img src="xart_style/11sendmail1.gif" name="Image8" width="61" height="14" border="0"></a> <a href="javascript:document.res.reset();" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','xart_style/12reset2.gif',1)"><img src="xart_style/12reset1.gif" name="Image9" width="51" height="14" border="0"></a>

ako bi radilo onda bi bilo pitanje šta da radim s ovim formama, jer ako ih izbrišem onda ne bi buttoni radili jer nemaju pojma šta da rade, koju funkciju da izvedu a "hidde" ne radi jer već "type" određen

I'm confused. . . . Šta sad.

Kako bi cijeli code izgledao

[jokla]

Evo našo sam malu skriptu koja bi mogla biti korisna ali nemam pojma kako da ju modificiram za moje svrhe.


head

Code:

<SCRIPT TYPE="text/javascript"> <!-- // copyright 1999-2001 Idocs, Inc. http://www.idocs.com/tags/ // Distribute this script freely, but keep this // notice with the code. var submitRolls = new Object(); function submitroll(src, oversrc, name) { this.src=src; this.oversrc=oversrc; this.name=name; this.alt="Submit Query"; this.write=submitroll_write; } function submitroll_write() { var thisform = 'document.forms[' + (document.forms.length - 1) + ']'; submitRolls[this.name] = new Object(); submitRolls[this.name].over = new Image(); submitRolls[this.name].over.src = this.oversrc; submitRolls[this.name].out = new Image(); submitRolls[this.name].out.src = this.src; document.write ( '<A onMouseOver="if (document.images)document.images[\'' + this.name + "'].src=submitRolls['" + this.name + '\'].over.src"' + ' onMouseOut="if (document.images)document.images[\'' + this.name + "'].src=submitRolls['" + this.name + '\'].out.src"' + ' HREF="javascript:' ); if (this.sendfield) { if (! this.sendvalue) this.sendvalue = 1; document.write(thisform, ".elements['", this.sendfield, "'].value='", this.sendvalue, "';"); } document.write(thisform + '.submit();void(0);"'); if (this.msg)document.write(' onClick="return confirm(\'' , this.msg, '\')"'); document.write('>'); document.write('<IMG SRC="' + this.src + '" ALT="' + this.alt + '" BORDER=0 NAME="' + this.name + '"'); if (this.height)document.write(' HEIGHT=' + this.height); if (this.width)document.write(' WIDTH='  + this.width); if (this.otheratts)document.write(' ' + this.otheratts); document.write('></A>'); if (this.sendfield) { document.write('<INPUT TYPE=HIDDEN NAME="' + this.sendfield + '">'); document.forms[document.forms.length - 1].elements[this.sendfield].value=''; } } //--> </SCRIPT>

body

Code:

<FORM ACTION="../cgi-bin/mycgi.pl"> email: <INPUT NAME="email"> <SCRIPT TYPE="text/javascript"> <!-- var sr = new submitroll("submit.out.gif","submit.over.gif","mysubmit"); sr.write(); //--> </SCRIPT> <NOSCRIPT> <INPUT TYPE=SUBMIT VALUE="Go!"> </NOSCRIPT> </FORM>

gifovi koje bi koristio zovu se sendmail1.gif , sendmail2.gif odnosno reset1.gif i reset2.gif

Stavio bi ih na ovo

Code:

<input type="submit" value="Send Mail" name="sub" /> <input type="reset" value="Reset" name="res" />

[maratz]

Code:

<input type="image" src="submit.gif" onmouseover="this.src='submitover.gif';" onmouseout="this.src='submit.gif';" />

Ovo ti submita, a predlažem da makneš 'reset' gumb, jer je nepotreban, a i korisnik ga može slučajno kliknuti.

[velcro]

Ako si puritanac i nije ti vazan IE (radit ce u FF i Operi) onda mozes sa:

Code:

input[type="submit"]:hover {     /* tvoj CSS */ }

A s IE-om mozes jedino ako pribjegnes malim trikovima tipa enclosas buttone u anchore:

Code:

<a href="#"><input type="submit" class="submit" value="Submit"></a>

... i onda u CSSu napravis:

Code:

input.submit {     background-color: green; } :hover input.submit {     background-color: red; }

[maratz]

velcro wrote:

Ako si puritanac i nije ti vazan IE (radit ce u FF i Operi) onda mozes sa: Code: input[type="submit"]:hover {     /* tvoj CSS */ } A s IE-om mozes jedino ako pribjegnes malim trikovima tipa enclosas buttone u anchore: Code: <a href="#"><input type="submit" class="submit" value="Submit"></a> ... i onda u CSSu napravis: Code: input.submit {     background-color: green; } :hover input.submit {     background-color: red; }

Wow! Baš guba! Kak se nisam sjetio...

[jokla]

marac wrote:

Code: <input type="image" src="submit.gif" onmouseover="this.src='submitover.gif';" onmouseout="this.src='submit.gif';" /> Ovo ti submita, a predlažem da makneš 'reset' gumb, jer je nepotreban, a i korisnik ga može slučajno kliknuti.

Hvala, proradilo je onako kako treba.