CSS Rollover Links

Need help with single image CSS rollovers

Page 1 of 1

3 Replies - 1046 Views - Last Post: 18 November 2008 - 07:02 PM

#1 D1gitalIce  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 20
  • Joined: 29-October 08

CSS Rollover Links

Posted 17 November 2008 - 10:17 AM

What I am trying to do is use pure CSS (no javascript) to make rollover links. I have each button of the navigation menu made already. For each button, there are two states combined into a single image file, one on top of the other. What I would like to do is create a button template using CSS, and then create individual button selectors only containing the background image information. Something like this (if possible):

.nav
{
	 width: 110px;
	 height: 30px;
	 background-position: 0px -30px;
}

.nav:hover
{
	 background-position: 0px 0px;
}

.nav #home
{
	 background: url(home.jpg);
}



That code probably does not work, since I really have no clue what I am doing any way.

Basically I have to make buttons for my web page. Each button has its own image file, and inside of the image file, the image size is 60px tall, with the first 30px being the highlighted state, the last 30px being the normal state. I have no idea how to use these to make a navigation bar using CSS. I have spent the last 4 days, about 3 hours a day picking through Google search results with no luck as to finding a solution for my specific need.

I would also like to have a class/selector for the current button selected, so that the highlighted state would appear as the normal state when the person is on that page. The text for each link is inside the image file, and I do not wish to use the Trifecta style button, as the text generated by those are horrid.

Any help or links to code or examples would be greatly appreciated.

Thanks

Is This A Good Question/Topic? 0
  • +

Replies To: CSS Rollover Links

#2 grimpirate  Icon User is offline

  • Pirate King
  • member icon

Reputation: 149
  • View blog
  • Posts: 714
  • Joined: 03-August 06

Re: CSS Rollover Links

Posted 17 November 2008 - 10:44 PM

Without the use of some javascript, what you're trying to achieve may not be possible. I tried doing so a couple of times myself and found that every tutorial I looked up involved javascript in some way. Either to fix quirks or just to do the actual dropping down and such, if I'm speaking erroneously here, please disagree with me.
Was This Post Helpful? 0
  • +
  • -

#3 xerxes333  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 31
  • View blog
  • Posts: 504
  • Joined: 05-July 07

Re: CSS Rollover Links

Posted 18 November 2008 - 07:09 AM

I just Googled "css mouseover image" and "got lucky" with this link http://www.domedia.o...lover-image.php I think it has what you need.
Was This Post Helpful? 1
  • +
  • -

#4 ses20020557  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 13-November 08

Re: CSS Rollover Links

Posted 18 November 2008 - 07:02 PM

You'd better be able to put your html code。

This post has been edited by ses20020557: 18 November 2008 - 07:03 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1