CSS Page Number Example

Hi,

Can you please  provide me with an example of this:

I have page numbers, I want to add a background image to them, if someone hovers, I want a different image, if it is visited, I want the same image as a nomal page background.

The height of an image is 27px and I need padding of padding:0 12px 0 12px;

Images:

page.png (for the background of a page number in general)
page-hover.png (for the background when hovering)
page-current.png (for the background on the current page)

How would I do this?

Thanks!
LVL 3
Computer GuyAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

AngryBinaryCommented:
The easiest way to achieve the hovering effect is to combine the plain background and the hover background into a single image, where the hover background is tiled directly below the plain background (so they'd appear to be stacked on top of each other), and to use an anchor tag for the page number:

a.pagenum {
  background:url(page.png) no-repeat top center;
  display:block;
  padding:0 12px 0 12px;
}

/* this will cause the background to appear to switch when the mouse hovers */
a.pagenum:hover {
  background-position:-27px center;
}

CSS doesn't understand the concept of "current page", however, so you would need to use your scripting language to add a CSS style or class to the element that specifies it must use a different background url.
0
Computer GuyAuthor Commented:
Hi,

This is what I have, for some reason it does not work. Can you please fill in the blanks?
<div class="pagenum">
	for ($i = 1; $i <= $pages; $i++) {
		if ($i > 1)
			echo '&nbsp;';
		if ($i == $page)
			echo $i;
		else
			echo '<a href="test.php?group=' . $group . '&event=' . $event .'&page=' . $i . '"> ' . $i . '</a>';
	}

	?> 
    </div>

Open in new window

0
AngryBinaryCommented:
This should fix at least the code syntax. However, it doesn't address the issue of the background image... but I think we should verify that this gets you that first step towards your goal:

<div class="pagenum">
<?
      for ($i = 1; $i <= $pages; $i++) {
            if ($i > 1)
                  echo '&nbsp;';
            if ($i == $page)
                  echo $i;
            else
                  echo '<a href="test.php?group=' . $group . '&event=' . $event .'&page=' . $i . '"> ' . $i . '</a>';
      }

?>
</div>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Computer GuyAuthor Commented:
Hi,

I got that code working. How can do the background image now. Like the attached image.
cb.png
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.