Om nah hoo pez nyeetz, Jürgen!
Das wäre für mich Laien vom Verständnis her sicher das einfachste
Da du ja links und rechts des Bildes auch maus-sensitive Bereiche haben möchtest, halte ich meinen zweiten Vorschlag mit Chris' Verbesserungen für einen guten Kompromis. Du hättest dann allerdings für jedes Bild ein neues Dokument, könntest aber im Gegenzug auf Javascript verzichten.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<title>Titel</title>
<style type="text/css">
html, body {margin: 0; padding: 0;}
#zurueck, #vor { width: 50%; background-color: red; display: block; text-decoration: none;}
#zurueck {float: left; text-align:right;}
#vor {text-align:left; overflow: hidden;}
a img {border: none;}
</style>
</head>
<body>
<a id="zurueck" href="foo"><img src="bla.png" alt="bild"></a>
<a id="vor" href="bar"><img src="bla.png" alt="bild"></a>
</body>
</html>
Mit den einzelnen HTML-Dateien hättest du auch gleichzeitig das Problem des ersten und letzten Bildes gelöst. Aber es bedeutet auch Aufwand mehrere HTML-Dokumente zu pflegen, wenn du sie nicht dynamisch erzeugen kannst.
Denkbar wäre auch, die Bilder in den Hintergrund verschwinden zu lassen, dann bräuchtest du wieder nur ein Dokument ... allerdings dann wieder Javascript zum dauerhaften Ändern der background-position-Eigenschaft oder der Klassenzugehörigkeit.
Es ist allerdings immer besser, so wenig wie möglich Ressourcen anzufordern. Das würde wieder gegen das Teilen des Bildes sprechen.
Matthias