[Code] Scroll Onmouseover

Ithron · 18.08.2007, 20:32

Falls ihr zu faul seid den scrollbalken oder das rad an der maus zu nutzen, hier ein kleines Script was euch beim überfahren eines Feldes das scrollen erlaubt

Code:

<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  
/* 
Extension developed by David G. Miles (www.z3roadster.net/dreamweaver) 
Original Scrollable Area code developed by Thomas Brattli  
To add more shock to your site, visit www.DHTML Shock.com 
*/ 
 
function verifyCompatibleBrowser(){  
    this.ver=navigator.appVersion  
    this.dom=document.getElementById?1:0  
    this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;  
    this.ie4=(document.all && !this.dom)?1:0;  
    this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;  
  
    this.ns4=(document.layers && !this.dom)?1: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> 
 
<body bgcolor="999999" 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 -->

mister-x · 10.06.2009, 13:03

nikosch · 10.06.2009, 21:56

@ -x: Da passiert bei mir goar nix. Nicht mal der Content wird angezeigt. Das andere ist ganz neckisch. Noch schöner wäre, wenn man die Scrolleiste anzeigen könnte.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Code] Zoomfunktion	Ithron	JavaScript, Ajax und mehr	2	19.08.2007 15:32
Layer onMouseOver	Quagga	HTML, Usability und Barrierefreiheit	2	09.07.2006 09:23
bei onmouseover sanft auf 100 pixel vergrößern	php_frage	HTML, Usability und Barrierefreiheit	5	29.04.2006 00:43
onmouseover Java Script geht nicht	CHRIS	HTML, Usability und Barrierefreiheit	9	05.01.2006 11:30
onmouseover geht in Firefox nicht. IE schon. Warum?		HTML, Usability und Barrierefreiheit	4	12.10.2005 11:39
onmouseover trouble mit ie	function	HTML, Usability und Barrierefreiheit	4	27.09.2005 21:39
Horizontaler Bilder-Scroller mit Vergrößerung (OnMouseover)?		HTML, Usability und Barrierefreiheit	5	09.09.2005 09:03
PHP Menü onMouseOver !!!		PHP Tipps 2005-2	6	23.08.2005 00:56
dynamische Link-Grafik mit OnMouseOver		HTML, Usability und Barrierefreiheit	11	24.06.2005 21:39
[Erledigt] Mehrere Anweisungen in onMouseOver		HTML, Usability und Barrierefreiheit	4	24.11.2004 16:56
scroll down auslesen & rechts die html-seite anzeigen...		PHP Tipps 2004	2	27.08.2004 17:31
OnMouseOver mit wanderndem <div>-Tag	Sirke	HTML, Usability und Barrierefreiheit	4	20.08.2004 21:04
Scroll Down		Beitragsarchiv	1	27.07.2004 18:15
tabelle mit onmouseover einblenden lassen		HTML, Usability und Barrierefreiheit	9	30.06.2004 13:08
Button OnMouseOver --> Nachricht in Textfeld anzeigen las		HTML, Usability und Barrierefreiheit	7	16.06.2004 17:49


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

10.06.2009, 13:03
mister-x Neuer Benutzer Registriert seit: 10.06.2009 Beiträge: 1 PHP-Kenntnisse: Anfänger	Scroll Mouseover vertical bearbeitet <style type="text/css"> #divUpControl{ float:left; width:320; z-index:1; } #divDownControl{ width:320; z-index:1; } #divContainer{ float:left; height:110; width:400; overflow:hidden; clip:rect(0,320,240,0); visibility:hidden} #divContent{position:absolute; } </style> <script language="JavaScript">// begin absolutely positioned scrollable area object scripts /* Extension developed by David G. Miles (z3 roadster bmw floor mat at z3roadster.net) Original Scrollable Area code developed by Thomas Brattli To add more shock to your site, visit www.DHTML Shock.com */ function verifyCompatibleBrowser(){ this.ver=navigator.appVersion this.dom=document.getElementById?1:0 this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0; this.ie4=(document.all && !this.dom)?1:0; this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0; this.ns4=(document.layers && !this.dom)?1: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.e l.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.x>-this.scrollHeight+objContainer.clipHeight){ this.MoveArea(this.x-move,0) if(loop) setTimeout(this.obj+".down("+move+")",speed) } } function MoveAreaUp(move){ if(this.x<0){ this.MoveArea(this.x-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> <body bgcolor="999999" onLoad="InitialiseScrollableArea()"> <!-- begin absolutely positioned scrollable area object--> <div id="divUpControl"> <a href="javascript:;" onMouseOver="PerformScroll(-7)" onMouseOut="CeaseScroll()">[scroll left]</a> </div> <div id="divDownControl"> <a href="javascript:;" onMouseOver="PerformScroll(7)" onMouseOut="CeaseScroll()">[scroll right]</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 -->

10.06.2009, 21:56
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	@ -x: Da passiert bei mir goar nix. Nicht mal der Content wird angezeigt. Das andere ist ganz neckisch. Noch schöner wäre, wenn man die Scrolleiste anzeigen könnte. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. -- Geändert von nikosch (10.06.2009 um 22:01 Uhr).