previous_post_link image replacement

Markup:

<ul class="prevnext">
<li class="prev"><?php previous_posts_link('%link', 'newer', TRUE, '');?></li>
<li class="next"><?php next_posts_link('%link', 'older', TRUE, ''); ?></li>
</ul>

CSS

.prevnext li {
	list-style-image:none;
	list-style:none;
}
.prevnext {
	margin:20px 0;
	padding:0;
	text-align:center;
}
.prevnext li {
	margin:0;
	padding:0 10px;
	display:inline;
}
.prevnext .next a {
	padding:0 20px 0 10px;
}
.prevnext .prev a {
	padding:0 10px 0 20px;
}
.prevnext .next a {
	background:url(images/next.gif) no-repeat center right;
}
.prevnext .prev a {
	background:url(images/prev.gif) no-repeat center left;
}

this code doesnt work

I think that’s supposed to be “previous_post_link” and “next_post_link” singular, not plural.

try this:

<?php previous_post_link('%link','<img src="prev.png"/>'); ?>
<?php next_post_link('%link','<img src="next.png"/>'); ?>

How can I implement this into a ‘hot spot’ on an image? Why doesn’t it just generate a hyperlink instead of text?

Ok, I found something that I ended up implementing:

https://www.ads-software.com/support/topic/276611?replies=3

<?PHP
$current =  get_permalink();
$prevPost = get_previous_post(true);
$prevURL = get_permalink($prevPost->ID);
$nextPost = get_next_post(true);
$nextURL = get_permalink($nextPost->ID);
?>
  <map name="Map" id="Map">
    <area shape="circle" coords="142,43,40" href="<?php echo get_settings('home'); ?>" />
    <area shape="circle" coords="343,43,37" href="../" />
    <area shape="circle" coords="829,43,39" href="<?php echo $prevURL ?>" />
    <area shape="circle" coords="1147,43,39" href="<?php echo $nextURL ?>" />
  </map>

Thanks kristovaarmari, that was just what I needed!

Try this

<div class=”navigation”>

<?php previous_post_link(‘<div class=”ImagePrev”>%link</div>’, ‘%title’); ?>
<?php if(!get_adjacent_post(false, ”, true)) {
echo ‘<div class=”ImagePrevEmpty”>DISABLED</div>’;
} ?>

<?php next_post_link(‘<div class=”ImageNext
“>%link</div>’, ‘%title’); ?>
<?php if(!get_adjacent_post(false, ”, false)) {
echo ‘<div class=”ImageNextEmpty”>DISABLED</div>’;
} ?>

</div>

In this, give CSS classes like
.ImageNext { background:url(…); height: 50px; width:50px }
etc..

Here’s how I did it.
PHP code for your template…

posts_nav_link(”, ‘<div id=”entry_previous”><span>Previous Entry</span></div>’, ‘<div id=”entry_next”><span>Next Entry</span></div>’);

CSS code…

#entry_next {
	float: right;
	display: block;
	width: 159px;
	height: 38px;
	margin: 10px 20px 40px 0px;
	background: url("images/entry_next.png") no-repeat 0 0px;
}

#entry_next:hover {
  background-position: 0 -38px;
}

#entry_next span {
	display: none;
}

#entry_previous {
	float: left;
	display: block;
	width: 229px;
	height: 38px;
	margin: 10px 0 40px 20px;
	background: url("images/entry_previous.png") no-repeat 0 0px;
}

#entry_previous:hover {
  background-position: 0 -38px;
}

#entry_previous span {
	display: none;
}