Jump to content

CSS image Rollover Button (not the way I want to do it...)


Chezshire

Recommended Posts

Hi Everyone,

  I have a project (i'm a student and this is just a little lite freelance work to help pay the student loan bills) in which a client has a project in a table and they want to have buttons that change when you mouse over them. I know how to do use a graphic as  link so setting the image to take the user to another page is easy, but I can't seem to get the full image effect I was hoping to with my css. Is it possible to set the image to have a css hover that will switch the image with another image?

 

I have to use tables, and each graphic is in a td tag representing a button as thats how they've done it and their back end is set to work with this (i'm just doing a cosmetic make over).

 

Any suggestions of how I might do this? I have all the art done and ready to go, i just can't seem to get the roll overs to work as I was hoping :(

 

Thanks for any help/suggestions

-Chez

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
a.lk{
background-image:url(images/first_image.gif);
background-repeat:no-repeat;
display:block;
}
a.lk:hover{
background-image:url(images/second_image.gif);
background-repeat:no-repeat;
display:block;
}
</style>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a href="#" class="lk">link1</a></td>
    <td><a href="#" class="lk">link2</a></td>
  </tr>
</table>

</body>
</html>

 

vineet

Uhm.. Wow - thanks that was faster then I have any right to hope for in terms of getting a nice answer. Thank you Vinpkl. As always everyone here is just wonderful and I thank you from the very bottom of my college bound heart ;)

 

-Chez

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.