FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Submit Button Change

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


moejoe
Hi Guys.

I wanna change my Submit button (The default on that is used on Xp) to a custom image.

I've made this css so far:
Code:

#replacement-1 {
  width: 200px;
  height: 55px;
  margin: 0;
  padding: 0;
  border: 0;
  background: url("url") no-repeat center top;
}


It works 100%,
I wanted to know weather you can make a #replacement-1:hover and it'll work when you hover over the sumbit button.
I've tried

Code:

#replacement-1 a:hover{
  background: url("images/sndbutton2.gif") no-repeat center top;
}


With no luck.

Ohh and How do you make the cursor change...
is it
Code:
mouse: pointer;
?

Thanks.
Nyizsa
I have never thought of doing it this way. I would make my submit a simple <a> element with href="javascript:void(0);", and submitting stuff on the onclick event. So I could make mouseover images and anything I can do with <a> elements. And the mouse pointer will change automatically.
On the other hand, if you don't want to use Javascript, this may not be your way of doing it...
mathiaus
the a:hover only works on anchor tags (<a>) as a submit button isnt one it shouldnt work. Try ...
Code:
#replacement-1 input:hover{
  background: url("images/sndbutton2.gif") no-repeat center top;
}


about the cursor its
Code:
cursor: CURSOR_WANTED;

replace CURSOR_WANTED witht he name of the icon you want, full list here
moejoe
Hi The Input hover code didn't work.

Thanks for the cursor: code!

Thanks for all ur help.
garionw
If you use Firefox the :hover will work with any tag (P, TABLE, anything) but in IE I cant really help you.

But in firefox it would look like this:
Code:

 #input{background: url(images/images.gif) no-repeat;}
 #input:hover{background: url(images/hover.gif) no-repeat;}
mathiaus
if your using <input type="submit" .... then it should work. If your using <button .... the obviously change input in the css to button otherwise it should work. Does for me Smile
riv
Hmmm... Another way, instead of the whole replacement idea, is to just use the tools already provided with HTML, such as:
Code:
<span><input type="image" src="submit.gif" id="submit"/></span>

And you should* be able to accomplish the replacement thing by using:
Code:
span:hover {
text-indent: -999px;
background: url(submit_hover.gif);
}

I don't believe this will work in IE 6, so you can work around that...
Code:
#submit:hover {
border: 1px solid #000;
}
body > span:hover {
text-indent: -999px;
background: url(submit_hover.gif);
}


*I haven't tested this so I'm not sure if span:hover will work.
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.