✔ Bild horizontal scrollen ohne typische Scrollbars

T

Traqso

Grünschnabel
Hallo zusammen,

ich habe ein Problem und komme nicht mehr weiter. Leider finde ich keine passende Lösung im Forum.
Ich möchte ein langes Bild horizontal in einem Fenster / Tabelle oder iframe scrollen aber ohne die hässlichen Standard Scrollbars.
Meine Testpage: http://www.casual-clubwear.com/test/stuehle.html

Ich hätte es gerne so mit einer eigenen Scrolleiste (so wie hier: http://www.abercrombie.com/webapp/wcs/stores/servlet/category1_10051_10901_12215_-1_12202)
oder auch mit rechts links Pfeilen und der onmouse over Funktion so dass wenn ich mit der Maus über z.B. den rechts Pfeil gehe das Bild nach rechts scrollt.

Weiss da jemand einen Rat? Würde mich über Eure Hilfe sehr freuen.

Gruss Traq
 
Hallo, danke für die schnelle Antwort.
Die Seite habe ich auch schon gefunden und Stundenlang versucht und rumgebastelt aber ich bekomme das nicht auf meiner Seite hin.
Ich habe mir die dw_xxx.js runter geladen und den pfad angepasst aber bei mir scrollt leider nix. Was muss ich da noch alles anpasssen?
was ist hiermit: @import "style/scrollbar-h.css"; ?

danke im voraus!
 
Ohne Quellcode-Angaben lässt sich die Ursache nicht diagnostizieren.

Traqso hat gesagt.:
was ist hiermit: @import "style/scrollbar-h.css";?
Zum Vergrößern anklicken....

Code: 
<style type="text/css">
@import "style/scroll-rel-h.css";
</style>
lädt das Stylesheet scroll-rel-h.css in das Dokument:
Code: 
/* Styles for scrolling layers  
	 Specify width and height in hold and wn, and in clip for wn */
div#hold	{ 
	position:relative; overflow:hidden;
	width:184px; height:52px; z-index:100
	}
div#wn	{ 
	position:absolute; 
	left:0px; top:0px; 
	width:184px; height:52px; 
	clip:rect(0px, 184px, 52px, 0px); 
	overflow:hidden;	
	z-index:1; 
	}
div#lyr1	{ 
	position:absolute; visibility:hidden; 
	left:0px; top:0px; 
	z-index:1; 
	}
  
/* Styles for demo, not necessary for scrolling layers */  
body { 
  overflow:hidden; text-align:center;
  font: 12px verdana, arial, helvetica, sans-serif;
  }
h1 { 
  font-size:1.4em; 
  margin:1.5em 0 2em 0; 
  }
a:link { color:#33c }	
a:visited { color:#339 }	
a img { border:none }

table.main { 
  width:300px; margin:auto;
  background-color:#eee; border:1px dashed #666 
  }
td.arrows a { padding:0 1em }
td.spacer { width:38px }
td.footer { text-align:center; margin:.8em 0 .6em }
Vielleicht liegt es daran, dass der Scroller bei dir nicht funktioniert, weil du das Stylesheet nicht eingebunden hast?
 
Hiho probiers mal mit folgendem:

Code: 
<script language="JavaScript1.2">
var speed, currentpos=curpos1=0,alt=1,curpos2=-1
function initialize(){
if (window.parent.scrollspeed!=0){
speed=window.parent.scrollspeed
scrollwindow()
}
}
function scrollwindow(){
temp=(document.all)? document.body.scrollTop : window.pageXOffset
alt=(alt==0)? 1 : 0
if (alt==0)
curpos1=temp
else
curpos2=temp
window.scrollBy(0,speed)
}
setInterval("initialize()",10)
</script>

In den Body Tag kommt:

Code: 
style="overflow: hidden;"

Dein img für Linksscrollen bekommt:

Code: 
onMouseover="scrollspeed=-2" onMouseout="scrollspeed=0"

und Rechts:
Code: 
onMouseover="scrollspeed=2" onMouseout="scrollspeed=0"

sollte dann funktionieren.
 
@michaelsinterface

@import "style/scroll-rel-h.css" steht bei mir oben drin.

aber ich habe diese css glaub ich nicht. ist das der quelltext den du gepostet hast.

Hier mein Quelltext zu dem beispiel von dyn-web:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd">		 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Scroll a Relative-Positioned Layer Horizontally</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
@import "style/scroll-rel-h.css";
</style>
<script src="../js/dw_scrollObj.js" type="text/javascript"></script>
<script src="../js/dw_hoverscroll.js" type="text/javascript"></script>
<script type="text/javascript">

function initScrollLayer() {
  // arguments: id of layer containing scrolling layers (clipped layer), id of layer to scroll, 
  // if horizontal scrolling, id of element containing scrolling content (table?)
  var wndo = new dw_scrollObj('wn', 'lyr1', 't1');
  
  // pass id's of any wndo's that scroll inside tables
  // i.e., if you have 3 (with id's wn1, wn2, wn3): dw_scrollObj.GeckoTableBugFix('wn1', 'wn2', 'wn3');
  dw_scrollObj.GeckoTableBugFix('wn'); 
}
</script>	
</head>
<body onload="initScrollLayer()">

<table class="main" cellspacing="0" cellpadding="6" border="0">
<tr>
  <td> </td>
	<td>
<!-- scrolling layers -->
<div id="hold">
<div id="wn">
	<div id="lyr1" class="content">
  <table id="t1" border="0" cellpadding="0" cellspacing="6">
	 <tr>
  		<td><img src="../fotos/stuehle/1.jpg" width="176" height="30" alt="" /></td>
  		<td><img src="../fotos/stuehle/2.jpg" width="132" height="32" alt="" /></td>
  		<td><img src="../fotos/stuehle/3.jpg" width="176" height="30" alt="" /></td>
  		<td><img src="../fotos/stuehle/4.jpg" width="132" height="32" alt="" /></td>
   </tr>
  </table>
  </div>
</div>  <!-- end wn div -->
</div>	<!-- end hold div -->
  </td>
  <td> </td>
</tr>
<tr>
  <td class="spacer"> </td>
	<td class="arrows"><!-- Scroll links -->
    <a href="javascript://" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn','left')" onmouseout="dw_scrollObj.stopScroll('wn')" onmousedown="dw_scrollObj.doubleSpeed('wn')" onmouseup="dw_scrollObj.resetSpeed('wn')"><img src="links.jpg" width="30" height="20" alt="" /></a>    
    <a href="javascript://" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn','right')" onmouseout="dw_scrollObj.stopScroll('wn')" onmousedown="dw_scrollObj.doubleSpeed('wn')" onmouseup="dw_scrollObj.resetSpeed('wn')"><img src="rechts.jpg" width="30" height="20" alt="" /></a>
  </td>
  <td class="spacer"> </td>
</tr>
<tr>
  <td> </td> 
  <td> </td>
</tr>
</table>

</body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück