Scroll Area

P

pazuzu

Grünschnabel
hallo, werte forumsmitglieder ,

ich habe ein problem :)

und zwar möchte ich eine bilder slideshow auf meiner hp einbauen.
also eine, die sich von allein von links nach rechts bewegt, wenn man mit der maus die rechts-und-links pfeile berührt (nicht drückt)
leider habe ich nirgendwo ein passendes script gefunden, muss auch zugeben, dass ich mehr designer statt programmierer bin.

ich habe hier folgendes beispiel, text scrollt von oben nach unten.
was muss ich ändern, dass der scrollvorgang von rechts nach links und zurück verläuft? (ist eine extension für den DW MX)
vielen dank im vorraus für die antworten :)

Code: 
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">  
#divUpControl{position:absolute; width:320; left:10; top:10; z-index:1; text-align: right} 
#divDownControl{position:absolute; width:320; left:10; top:270; z-index:1; text-align: right} 
#divContainer{position:absolute; width:320; height:240; overflow:hidden; top:30; left:10; clip:rect(0,320,240,0); visibility:hidden} 
#divContent{position:absolute; top:0; left:0} 
</style>
<script language="JavaScript">// begin absolutely positioned scrollable area object scripts 

function verifyCompatibleBrowser(){ 
    this.ver=navigator.appVersion 
    this.dom=document.getElementById:0 
    this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom):0; 
    this.ie4=(document.all && !this.dom):0; 
    this.ns5=(this.dom && parseInt(this.ver) >= 5) :0; 
 
    this.ns4=(document.layers && !this.dom):0; 
    this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5) 
    return this 
} 
bw=new verifyCompatibleBrowser() 
 
 
var speed=50 
 
var loop, timer 
 
function ConstructObject(obj,nest){ 
    nest=(!nest) ? '':'document.'+nest+'.' 
    this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0; 
    this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0; 
    this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight 
    this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight 
    this.up=MoveAreaUp;this.down=MoveAreaDown; 
    this.MoveArea=MoveArea; this.x; this.y; 
    this.obj = obj + "Object" 
    eval(this.obj + "=this") 
    return this 
} 
function MoveArea(x,y){ 
    this.x=x;this.y=y 
    this.css.left=this.x 
    this.css.top=this.y 
} 
 
function MoveAreaDown(move){ 
	if(this.y>-this.scrollHeight+objContainer.clipHeight){ 
    this.MoveArea(0,this.y-move) 
    if(loop) setTimeout(this.obj+".down("+move+")",speed) 
	} 
} 
function MoveAreaUp(move){ 
	if(this.y<0){ 
    this.MoveArea(0,this.y-move) 
    if(loop) setTimeout(this.obj+".up("+move+")",speed) 
	} 
} 
 
function PerformScroll(speed){ 
	if(initialised){ 
		loop=true; 
		if(speed>0) objScroller.down(speed) 
		else objScroller.up(speed) 
	} 
} 
 
function CeaseScroll(){ 
    loop=false 
    if(timer) clearTimeout(timer) 
} 
var initialised; 
function InitialiseScrollableArea(){ 
    objContainer=new ConstructObject('divContainer') 
    objScroller=new ConstructObject('divContent','divContainer') 
    objScroller.MoveArea(0,0) 
    objContainer.css.visibility='visible' 
    initialised=true; 
} 
// end absolutely positioned scrollable area object scripts 

</script>
</head>

<body onLoad="InitialiseScrollableArea()">
<!-- begin absolutely positioned scrollable area object-->
<div id="divUpControl"> <a href="javascript:;" onMouseOver="PerformScroll(-7)" onMouseOut="CeaseScroll()">[scroll 
  up]</a> </div>
<div id="divDownControl"> <a href="javascript:;" onMouseOver="PerformScroll(7)" onMouseOut="CeaseScroll()">[scroll 
  down]</a> </div>
<div id="divContainer"> 
  <div id="divContent"> <b>Scroll Area Content Start</b> 
    <p> Lorem ipsum dolor sit amet, consectetur adipscing elit, sed diam nonnumy 
      eiusmod tempor incidunt ut labore et dolore magna aliquam erat volupat.</p>
    <p>Et harumd dereud facilis est er expedit distinct. Nam liber a tempor cum 
      soluta nobis eligend optio comque nihil quod a impedit anim id quod maxim 
      placeat facer possim omnis es voluptas assumenda est, omnis dolor repellend. 
      Temporem autem quinsud et aur office debit aut tum rerum necesit atib saepe 
      eveniet ut er repudiand sint et molestia non este recusand.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipscing elit, sed diam nonnumy 
      eiusmod tempor incidunt ut labore et dolore magna aliquam erat volupat.</p>
    <p>Et harumd dereud facilis est er expedit distinct. Nam liber a tempor cum 
      soluta nobis eligend optio comque nihil quod a impedit anim id quod maxim 
      placeat facer possim omnis es voluptas assumenda est, omnis dolor repellend. 
      Temporem autem quinsud et aur office debit aut tum rerum necesit atib saepe 
      eveniet ut er repudiand sint et molestia non este recusand.</p>
    <b>Scroll Area Content End</b> </div>
</div>
<!-- end absolutely positioned scrollable area object -->
</body>
</html>
 
horizontal scrollen

Hallo

da hast du dir ja mal gleich ein Heavy-Beispiel(so mit OOP, Konstruktor und Destruktor und so..) ausgesucht, wenn man schon keine Ahnung von JavaScript hat.
Ich hab dir aber mal die veränderte Version reingepostet. Probiers mal aus

hab in den Funktionen MoveAreaUp und MoveAreaDown einfach die Koordinaten vertauscht.

So denn.


Code: 
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"> 
#divUpControl{position:absolute; width:320; left:10; top:10; z-index:1; text-align: right} 
#divDownControl{position:absolute; width:320; left:10; top:270; z-index:1; text-align: right} 
#divContainer{position:absolute; width:320; height:240; overflow:hidden; top:30; left:10; clip:rect(0,320,240,0); visibility:hidden} 
#divContent{position:absolute; top:0; left:0} 
</style>
<script language="JavaScript">// begin absolutely positioned scrollable area object scripts 

function verifyCompatibleBrowser(){ 
this.ver=navigator.appVersion 
this.dom=document.getElementById:0 
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom):0; 
this.ie4=(document.all && !this.dom):0; 
this.ns5=(this.dom && parseInt(this.ver) >= 5) :0; 

this.ns4=(document.layers && !this.dom):0; 
this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5) 
return this 
} 
bw=new verifyCompatibleBrowser() 


var speed=50 

var loop, timer 

function ConstructObject(obj,nest){ 
nest=(!nest) ? '':'document.'+nest+'.' 
this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0; 
this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0; 
this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight 
this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight 
this.up=MoveAreaUp;this.down=MoveAreaDown; 
this.MoveArea=MoveArea; this.x; this.y; 
this.obj = obj + "Object" 
eval(this.obj + "=this") 
return this 
} 
function MoveArea(x,y){ 
this.x=x;this.y=y 
this.css.left=this.x 
this.css.top=this.y 
} 

function MoveAreaDown(move){ 
if(this.y>-this.scrollHeight+objContainer.clipHeight){ 
this.MoveArea(this.y-move,0) 
if(loop) setTimeout(this.obj+".down("+move+")",speed) 
} 
} 
function MoveAreaUp(move){ 
if(this.y<0){ 
this.MoveArea(this.y-move,0) 
if(loop) setTimeout(this.obj+".up("+move+")",speed) 
} 
} 

function PerformScroll(speed){ 
if(initialised){ 
loop=true; 
if(speed>0) objScroller.down(speed) 
else objScroller.up(speed) 
} 
} 

function CeaseScroll(){ 
loop=false 
if(timer) clearTimeout(timer) 
} 
var initialised; 
function InitialiseScrollableArea(){ 
objContainer=new ConstructObject('divContainer') 
objScroller=new ConstructObject('divContent','divContainer') 
objScroller.MoveArea(0,0) 
objContainer.css.visibility='visible' 
initialised=true; 
} 
// end absolutely positioned scrollable area object scripts 

</script>
</head>

<body onLoad="InitialiseScrollableArea()">
<!-- begin absolutely positioned scrollable area object-->
<div id="divUpControl"> <a href="java script:;" onMouseOver="PerformScroll(-7)" onMouseOut="CeaseScroll()">[scroll 
up]</a> </div>
<div id="divDownControl"> <a href="java script:;" onMouseOver="PerformScroll(7)" onMouseOut="CeaseScroll()">[scroll 
down]</a> </div>
<div id="divContainer"> 
<div id="divContent"> <b>Scroll Area Content Start</b> 
<p> Lorem ipsum dolor sit amet, consectetur adipscing elit, sed diam nonnumy 
eiusmod tempor incidunt ut labore et dolore magna aliquam erat volupat.</p>
<p>Et harumd dereud facilis est er expedit distinct. Nam liber a tempor cum 
soluta nobis eligend optio comque nihil quod a impedit anim id quod maxim 
placeat facer possim omnis es voluptas assumenda est, omnis dolor repellend. 
Temporem autem quinsud et aur office debit aut tum rerum necesit atib saepe 
eveniet ut er repudiand sint et molestia non este recusand.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipscing elit, sed diam nonnumy 
eiusmod tempor incidunt ut labore et dolore magna aliquam erat volupat.</p>
<p>Et harumd dereud facilis est er expedit distinct. Nam liber a tempor cum 
soluta nobis eligend optio comque nihil quod a impedit anim id quod maxim 
placeat facer possim omnis es voluptas assumenda est, omnis dolor repellend. 
Temporem autem quinsud et aur office debit aut tum rerum necesit atib saepe 
eveniet ut er repudiand sint et molestia non este recusand.</p>
<b>Scroll Area Content End</b> </div>
</div>
<!-- end absolutely positioned scrollable area object -->
</body>
</html>
 
vielen dank für die hilfe und die mühe, die du dir gemacht hast.
nur leider funktioniert es nicht. da scrollt nix :(
gibt es denn mit javascript keine andere möglichkeit, dass die bilder laufen, wenn man den entsprechenden button berührt? oder ist das nur mit flash möglich?

gruss, und nochmals danke,
paz
 
Danke...

Ich glaub, genau so einen script hab ich gesucht... Leider funktioniert er bei mir auch nicht... Hab leider schon ewig kein nonprint mehr gemacht. Kann mir vielleicht jemand erklären, wie ich den einbau in eine bestehende seite...

Gruß
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück