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?
 
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
 
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
 
Computer GuyAuthor Commented:
Hi,

I got that code working. How can do the background image now. Like the attached image.
cb.png
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.