Hover Button On Web Site

bkaron

bkaron

Yep, That's Me!
I want a hover button/s on my web site, but it's a little confusing. Basicly I have one image and when I hover over it I want it to change to another image. I did some research on google but Im confused. I need some help.

Thanks :D
 
k I'm here to help you again.

In the head part of your page put this:

<style type="text/css">
.hover:link{background-image:url([imageone]);width:IMAGE WIDTH HEREpx;height:IMAGE HEIGHT HEREpx;}
.hover:visited{background-image:url([imageone]);width:IMAGE WIDTH HEREpx;height:IMAGE HEIGHT HEREpx;}
.hover:active{background-image:url([imageone]);width:IMAGE WIDTH HEREpx;height:IMAGE HEIGHT HEREpx;}
.hover:hover{{background-image:url([imagetwo]);width:IMAGE WIDTH HEREpx;height:IMAGE HEIGHT HEREpx;}

</style>

K sorry I know that looks confusing. I'll do a little mini tutorial on it, and the good thing is is that it's 100% valid. Yay. Oh yeah, here's a little legend:
[imageone] = the image you're going to use when your mouse is OFF of the link
[imagetwo] = the image you're going to use when your mouse is ON the link

.hover is what you will be what you classify.. like
<a href="link" class=hover> </a>
that will make the button.

to make multipul buttons using separate images, you just copy
.hover:link{background-image:url([imageone]);width:IMAGE WIDTH HEREpx;height:IMAGE HEIGHT HEREpx;}
.hover:visited{background-image:url([imageone]);width:IMAGE WIDTH HEREpx;height:IMAGE HEIGHT HEREpx;}
.hover:active{background-image:url([imageone]);width:IMAGE WIDTH HEREpx;height:IMAGE HEIGHT HEREpx;}
.hover:hover{{background-image:url([imagetwo]);width:IMAGE WIDTH HEREpx;height:IMAGE HEIGHT HEREpx;}

but you replace .hover with something else, like .cheese or something.
<a href="blah" class="hover"> </a>
<a href="blah" class="cheese"> </a>
those would make 2 different links, if you were using what I just mentioned above.

If you want to make a link that has text on it and a background image that bevels in and out with your mouse on and off of it, then you would add this after the height definition, after the ";" and before the "}":

text-align:center;color:FONT COLOUR;font-size:SIZEpt;

so you would have something that looks like:

<html>
<head>
<style type="text/css">
.hover:link{background-image:url([imageone]);width:IMAGE WIDTH HEREpx;height:IMAGE HEIGHT HEREpx;text-align:center;color:FONT COLOUR;font-size:SIZEpt;}
.hover:visited{background-image:url([imageone]);width:IMAGE WIDTH HEREpx;height:IMAGE HEIGHT HEREpx;text-align:center;color:FONT COLOUR;font-size:SIZEpt;}
.hover:active{background-image:url([imageone]);width:IMAGE WIDTH HEREpx;height:IMAGE HEIGHT HEREpx;text-align:center;color:FONT COLOUR;font-size:SIZEpt;}
.hover:hover{{background-image:url([imagetwo]);width:IMAGE WIDTH HEREpx;height:IMAGE HEIGHT HEREpx;text-align:center;color:FONT COLOUR;font-size:SIZEpt;}

</style>
<title>My Site. Yay.</title>
</head>
<body>
<a href="http://torxter.net" class="hover">Hozzah</a><br>
<a href="http://torxter.net" class="hover">it's</a><br>
<a href="http://torxter.net" class="hover">links</a><br>
<a href="http://torxter.net" class="hover">man.</a><br>
</body>
</html>

So there is your complicated tutorial.

It was really confusing I know. So it's probably better that you go to xentrik.net and look there for a way easier and a well written tutorial.


I just wasted 5 minutes of your life and probably gave you a headache.
 
You must log in or register to reply here.
Back
Top