asked on

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!

AngryBinary

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.

Computer Guy

ASKER

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

ASKER CERTIFIED SOLUTION

AngryBinary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Computer Guy

ASKER

Hi,

I got that code working. How can do the background image now. Like the attached image.
cb.png