nicht angemeldet
Gunnar Bittersmann@@Jürgen:
nuqneH
Da fällt auf, dass die clickbaren Bereiche links und rechts vom Bild nicht so hoch sind wie das Bild. Nicht nutzerfereundlich ist auch, dass der Mauscursor beim ersten und letzten Bild eine Funktionalität signalisiert, die überhaupt nicht vorhanden ist: Beim ersten Bild gibt es kein Zurück, beim letzten kein Vor.
Die bestehende Funktionalität könntest du auch einfacher haben, indem du einfach einen clickbaren Bereich über die gesamte Breite vorsiehst und beim Click die Mausposition abfragst. Linke Hälte heißt zurück, rechte heißt vorwärts:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>TEST</title>
<style>
[code lang=css]figure#prevnextimg
{
cursor: pointer;
display: block;
width: 100%;
}
figure#prevnextimg img
{
display: block;
margin: auto;
}
</style>
</head>
<body>
<figure id="prevnextimg"><img src="foo.jpg"/></figure>
<script>
//<![CDATA[
document.getElementById("prevnextimg").addEventListener("click", prevnextimg, false);
function prevnextimg(e)
{
if (e.clientX < window.innerWidth/2) previmg();
else nextimg();
}
function previmg()
{
alert("previmg"); // zur Demonstation
}
function nextimg()
{
alert("nextimg"); // zur Demonstation
}
//]]>
</script>
</body>
</html>[/code]
Die Ergänzungen für IE überlasse ich dir. Molily hilft dabei: http://molily.de/js/event-handling-objekt.html, http://molily.de/js/event-handling-fortgeschritten.html.
Sinnvoller dürfte aber sein, zur Verlinkung wirklich 'a'-Elemente vorzusehen:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>TEST</title>
<style>
[code lang=css]figure#prevnext
{
display: block;
position: relative;
width: 100%;
}
figure#prevnext img
{
display: block;
margin: auto;
}
figure#prevnext a
{
height: 100%;
position: absolute;
top: 0;
width: 50%;
}
figure#prevnext a#prev
{
left: 0;
}
figure#prevnext a#next
{
right: 0;
}
</style>
</head>
<body>
<figure id="prevnext">
<img src="foo.jpg"/>
<a id="prev"></a>
<a id="next"></a>
</figure>
<script>
document.getElementById("prevnext").addEventListener("click", prevnextimg, false);
function prevnextimg(e)
{
switch (e.target.id)
{
case "prev": previmg(); break;
case "next": nextimg(); break;
}
}
function previmg()
{
alert("previmg"); // zur Demonstation
}
function nextimg()
{
alert("nextimg"); // zur Demonstation
}
</script>
</body>
</html>[/code]
Die Ergänzungen für IE überlasse ich wieder dir.
Die 'a'-Elemente könnten nun (wie ChrisB schon sagte) per @href auf andere Ressourcen verlinken; 'return false;' in den jeweiligen Funktionen verhindert das Folgen der Links bei aktiviertem JavaScript.
Beim ersten Bild sollte kein Link "prev" und beim letzten kein Link "next" vorhanden sein.
Qapla'
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
Struppi