Replacing previous/next buttons with images as links

  • I’ve been reading and searching for a solution which allows me to replace the initial “Next/Previous” links on the bottom of the page with just images, without showing the text. So far i’ve got this:

    Main index template:
    ————————-

    <div id="nav1" class="alignleft"><?php next_posts_link('&raquo previous') ?></div>
<div id="nav2" class="alignright"><?php previous_posts_link('next &raquo;') ?></div>

    CSS:
    ——–

    .navigation{width:450px;float:left;color:#ffba00;}
#nav1{background:url(images/next.jpg)no-repeat top left;height:55px; width:77px; padding-left: 5px; padding-top:12px;}
#nav2{background:url(images/next.jpg)no-repeat top left;height:55px; width:77px; padding-top:12px; padding-left:20px;}

    But, this way it just shows a background image underneath the textlinks. I would love to have the textlinks not visible at all, but have the image link to the prev.next post(s)

    This may be a nOOb questions, but i can’t seem to get around it.
    Any help would be much appreciated.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter staygoldstudio

    (@staygoldstudio)

    I see i made a mistake above…
    Obviously the #nav1 in the css isn’t the same image as the one in #nav2, so that would be prev.jpg instead of 2 “next.jpg’s”

    try the following to display images instead:

    Main index template:

    <?php next_posts_link('<div id="nav1" class="alignleft"></div>') ?>
<?php previous_posts_link('<div id="nav2" class="alignright"></div>') ?>

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Replacing previous/next buttons with images as links’ is closed to new replies.