Virtual Pagination - own buttons

[Johank82]

1) Script Title: Virtual Pagination

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...pagination.htm

3) Describe problem:

When looking at the Virtual Pagination page, there is a demo to the bottom left (where the words castle, park, harvest and country are within a box each, as well as < and >).

I want to do something similar, but without < and >.
Also want to use the same buttons as on this page: http://justtesting.atspace.com/test.htm

So for example, someone wants to read more about dogs. They then click on the green button named "dogs". Next to it may a button named "cats" be.
I also want to have at least some pixel space between each button.

Please help me with this, would be very grateful

[ddadmin]

Those look like form buttons. Since this script generates regular links (<a>) for the pagination, the easiest way without modifying the script itself is just to use CSS to style the links so they resemble form buttons, something like:

<style type="text/css">

.paginationstyle a{
background-color: #d1ec4c;
border: 2px #d1ec4c outset;
padding: 1px 4px;
color: black;
text-decoration: none;
font: bold 90% "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
}

.paginationstyle a:visited{
color: black;
}

.paginationstyle a:hover{
border-style: inset;
background-color: #e3f48e;
padding: 2px 3px 0 5px; /*shift text 1px to the right and down*/
}

</style>

This assumes the DIV containing your pagination links have a CSS classname of "paginationstyle", something like:

<div class="paginationstyle">
<a href="#">ds</a> <a href="#">ds</a> <a href="#">ds</a>
</div>

[Johank82]

But the form buttons don´t look the same in explorer and firefox. In explorer, I don´t have any border around the buttons. In firefox it looks normal.

I also don´t know how to make a button another color after it is chosen, compared to the other buttons?

Tried to move this part shown below above the first <div class="virtualpage4">, but it didn´t work

<!-- Pagination DIV for Demo 4 -->
<div id="galleryalt" class="paginationstyle" style="width: 300px; text-align: left">
<a href="#" rel="previous"><</a> <span class="flatview"></span> <a href="#" rel="next">></a>
</div>

<!-- Initialize Demo 4 -->
<script type="text/javascript">
var gallery=new virtualpaginate("virtualpage4", 1)
gallery.buildpagination("galleryalt", ["castle", "park", "harvest", "country"])
</script>

[Johank82]

The only problem left now is to make the current box marked, so one knows which box they are visiting when looking at them.

How do I fix that?

[ddadmin]

Just like with the original pagination links, you can make the selected one stand out by styling the .selected selector:

.paginationstyle a.selected{
background-color: yellow
}

In this case, the selected button will have a background color of yellow.