Automatische Bildleiste die mit Maus mit läuft
Conny
- html
Hallo an alle da draußen,
ich habe ein Problem, da ich im unteren Teil meiner Seite mehrere kleine Bilder aneinander reihen will, die per Mausklick dann groß auf der Seite angezeigt werden. Jedoch sind es so viele Bilder das die untere Reihe nicht ausreicht in der Breite und ich somit wollte das die Leiste weiter geht wenn ich mit der Maus in die entsprechende Richtung wie rechts oder links gehe. Leider habe ich nur überhaupt keine Idee wie ich das machen könnte. Die einzige Möglichkeit ist mit einer ganz normalen Bildlaufleiste mit der ich nach rechts und links scrollen könnte aber eine andere Lösung wäre mir lieber.
Danke im Voraus und LG
Conny
Hallo,
ich habe ein Problem, da ich im unteren Teil meiner Seite mehrere kleine Bilder aneinander reihen will, die per Mausklick dann groß auf der Seite angezeigt werden. Jedoch sind es so viele Bilder das die untere Reihe nicht ausreicht in der Breite und ich somit wollte das die Leiste weiter geht wenn ich mit der Maus in die entsprechende Richtung wie rechts oder links gehe. Leider habe ich nur überhaupt keine Idee wie ich das machen könnte. Die einzige Möglichkeit ist mit einer ganz normalen Bildlaufleiste mit der ich nach rechts und links scrollen könnte aber eine andere Lösung wäre mir lieber.
Wie gut bist Du mit JavaScript? So etwas ähnliches habe ich hier http://forum.de.selfhtml.org/archiv/2006/7/t132846/#m860158 und hier http://forum.de.selfhtml.org/archiv/2006/9/t136270/#m884944 skizziert. Speziell den horizontalen Spezialscroller könnte man so umsetzten:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Scrollbares DIV mit Spezialscrollern ;-)</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
#container {width:300px; height:200px; margin:auto; background-color:#007070;}
button#left, button#right {height:100%; width:25px; float:left; padding:0;}
button#left {float:left;}
button#right {float:right;}
#scrolldiv {float:left; width:250px; height:100%; background-color:#00AFAF; overflow:auto;}
#scrolldiv p {width:800px;}
</style>
<script type="text/javascript">
<!--
function right() {
var myScrollDiv = document.getElementById("scrolldiv");
myScrollDiv.scrollLeft += 10;
myScrollDiv.scr = window.setTimeout("right()", 10);
}
function left() {
var myScrollDiv = document.getElementById("scrolldiv");
myScrollDiv.scrollLeft -= 10;
myScrollDiv.scr = window.setTimeout("left()", 10);
}
function stop() {
var myScrollDiv = document.getElementById("scrolldiv");
window.clearTimeout(myScrollDiv.scr);
}
//-->
</script>
</head>
<body>
<div id="container">
<button id="left" onmouseover="left();" onmouseout="stop();"><</button>
<button id="right" onmouseover="right();" onmouseout="stop();">></button>
<div id="scrolldiv">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed leo neque, ultrices id, venenatis ut, interdum sit amet, ante. Suspendisse sapien lorem, ornare at, iaculis eu, pellentesque eu, leo. Donec mi elit, interdum sit amet, ornare vel, porttitor sit amet, sapien. Nunc urna lacus, imperdiet vel, imperdiet non, placerat eu, felis. Donec sapien. Donec porta magna ac nibh. Aliquam sagittis sem non sapien. Suspendisse aliquet erat id eros. Cras tincidunt ornare est. Vivamus mattis eros ac tellus. Etiam commodo eros ac risus pellentesque facilisis. Ut tincidunt. Pellentesque feugiat sapien in quam. Suspendisse potenti. Suspendisse potenti. In hac habitasse platea dictumst. Suspendisse ullamcorper nibh. Nulla facilisi.</p>
</div>
</div>
</body>
</html>
Für den Text im P-Element können natürlich auch Bilder (IMG-Elemente) eingesetzt werden.
Wenn Du es gut machst, dann fügst Du die Spezialelemente (Button) erst nachträglich mit JavaScript ein und lässt den Nutzern ohne JavaScript den normalen Scrollbalken. Wie das gehen kann, habe ich im ersten Beispiel mit dem vertikalen Scroller gezeigt.
viele Grüße
Axel