✔ Bilderleite mit Pfeile

[amiga1200]

Ich habe eine Bildergalerie so wie hier (ganz oben)
http://www.computerbase.de/
programmiert.

Bei mir sind die Pfeile (als Grafiken hinterlegt) nur nicht im Bild wie bei computerbase.de sondern
am Rand vor die Bilderleiste und dahinter. (Vor und zurück)

Wie erreicht man es, dass die Pfeile wie bei computerbase in den Bilder erscheinen.
Ich habe schon viel versucht, auch das die Pfeile in den Bildern erscheinen, aber dann habe die mit gescrollt.
Es wird zwar viele fertige Lösungen geben, aber ich wollte es liebe alles selbst programmieren, ist ja auch schon 90% Fertig.

Wer kann ein Typ oder vielleicht ein Beispeiel geben?

 

[tombe]

Dann wirst du die Pfeile mit "position: absolute" und "z-index" an die entsprechende Stelle platzieren müssen.

Ohne aber zu sehen wie du es jetzt aufgebaut hast kann keine wirkliche Aussage gemacht werden!

 

[amiga1200]

Mit
position: absolute
hatte ich versuch, die Pfeile Link/Rechts in den Bilder rein zu setzen, aber dann scrollten die mit

<style type='text/css'>
	#wn	{ 
    position:relative; 
    width:860px; height:140px; 
    overflow:hidden;	
	white-space:nowrap;
	 border: solid 1px #000;
	}
</style>

	<div id='wn' style='margin-left:41px' >
	<div style='position: absolute;left:0px; display:inline;' id='t1'>
 		<img src='b1'><img src='b2'><img src='b3'><img src='b4'>...
  </div></div>

geschrollt wird über javascript einfach die Position ändern

 		document.getElementById('t1').style.left =pos

vergiss alles was oben steht,
als Du mir das mit Position: absolute geschrieben hast, habe ich es einfach noch mal probiert,
und es geht die Pfeile Scrollen nicht mit:
VIELEN DANK

edit:
Gestern hatte ich wohl was falsch gemacht, weil die Pfeile immer mit Scrolten.


das musst über alle divs.

<div style='margin-top:43px;margin-left:46px; position: absolute; z-index:2 '>
<a class='link_text2' href='javascript:zur()'  onmouseover='zur()'> <img    src='../l.png' alt='' border='0' /></a>
 </div>
<div style='margin-top:43px;margin-left:872px; position: absolute; z-index:2 '>
<a class='link_text2' href='javascript:vor()'  onmouseover='vor()'> <img    src='../_r.png' alt='' border='0' /></a>
 </div>

 

[tombe]

Das ist jetzt mal auf die Schnelle und mit Sicherheit muss es noch verbessert werden. Aber von Prinzip ist es wohl das was du haben willst:

<script language="javascript" type="text/javascript">
function left() {
if (parseInt(document.getElementById('t1').style.left) < 0) {
	document.getElementById('t1').style.left = parseInt(document.getElementById('t1').style.left) + 98;
}
}

function right () {
if (parseInt(document.getElementById('t1').style.left) >= -294) {
	document.getElementById('t1').style.left = parseInt(document.getElementById('t1').style.left) - 98;
}
}
</script>
<style type='text/css'>
#wn	{
	position: relative;
	width: 200px;
	height: 98px;
	overflow: hidden;
	white-space: nowrap;
	border: solid 1px #000;
	}
</style>

<img onclick="left();" src="pfeil_links.png" width="65" height="72" style="border: 0px;" style="position: absolute; left: 0px; top: 30px; z-index: 1;"/>
<div id="wn" style="margin-left:41px">
	<div style="position: absolute; left:0px; display:inline;" id="t1">
		<img src="bild1.png" />
		<img src="bild2.png" />
		<img src="bild3.png" />
		<img src="bild4.png" />
		<img src="bild5.png" />
	</div>
</div>
<img onclick="right();" src="pfeil_rechts.png" width="65" height="72" style="border: 0px;" style="position: absolute; left: 240px; top: 30px; z-index: 1;"/>

Bilder bzw. Bildnamen austauschen, die Größenangaben im Javascript anpassen und es sollte klappen.