(CSS & Php) How to create a rollover button link with CSS and Php?

How would i create a rollover button effect which links with CSS & Php?

I have the images ready, and i've started to code them in CSS and have called the one using PHP, however I can't figure out what to do next.

The website is www.filmhammer.com

Here is the CSS code.

.art-randomButton
{
display:block;
z-index:-1;
float: left;
background-image: url('http://www.filmhammer.com/images/randomButton.jpg');
width: 137px;
height: 122px;
}


.art-randomButton.hover
{
display:block;
z-index:-1;
float: left;
background-image: url('http://www.filmhammer.com/images/randomButtonRoll.jpg');
width: 137px;
height: 122px;
}

Code (markup):

and here is the PHP i have so far for it ...lol

<div class="art-randomButton"></div>

PHP:

 

.art-randomButton.hover should be .art-randomButton:hover then when the mouse rolls over it the hover effect will show, however just in case you are using IE6 this won't work without some JavaScript, so just upgrade or us a different browser.

You can also reduce/remove flicker but joining the 2 images as one then using background-position to shift the image left or which ever direction to show the hover state.

 

Not tested

.art-randomButton:hover
{
display:block;
z-index:-1;
float: left;
background-image: url('http://www.filmhammer.com/images/randomButtonRoll.jpg');
width: 137px;
height: 122px;
}

class="art-randomButton" onmouseover="this.className='art-randomButton:hover'"

Code (markup):

 

Thanks, the ":hover" works brilliantly. (Other than the flicker)

I will use the background position later on after i have sorted out how to link this image to something.

Could you share any insight for that too?

Thanks for your help.

 

Change the <div> to <a href="location"> and style that, should work just as well or you can wrap the div in an a tag.

 

Thanks tolra.

It works! I wrapped the div in an <a> tag like you suggested.

<a href="http://filmhammer.com/?random"><div class="art-randomButton"></div></a>

PHP:

Thanks for your help, i knew it would be something simple.

 

Glad to help

 

I tried the background positioning as you suggested, unfortunately i can't get it to work.

Have i done it correctly? I have an image with both the rollover and original picture on as you can see below.

Here is the CSS code...

.art-randomButton
{
display:block;
z-index:-1;
float: left;
background-image: url('http://www.filmhammer.com/images/randomButtonD.jpg');
width: 137px;
height: 122px;
background-repeat: no-repeat;
}

.art-randomButton:hover
{
right: -78px;
background-image: url('http://www.filmhammer.com/images/randomButtonD.jpg');
display:block;
z-index:-1;
float: left;
width: 137px;
height: 122px;
}

Code (markup):

 

add background-position: -137px 0; to the hover

 

Thanks again