Antworten auf deine Fragen:
Neues Thema erstellen

[Javascript] Links-Rechts Scollen Mouseover

C

captainthriller

Aktives Mitglied

Hallo zusammen,

ich habe einen interessanten Script gefunden, den ich evtl. anwenden möchte aber natürlich erst mal ausprobieren möchte.
Da ich aber nicht besonders fortgeschritten bin in sachen javascript, möchte ich hier einmal nachfragen ob jemand weiss, wie folgender Script umgebaut werden muss:
(Bereits einen Vorschlag im 2. Beitrag - aber ich weiss nicht wie man diesen schnipsel richtig einbaut)



Freue mich über jegliche Hilfe.

Gruß, T.Hoffmann
 

L

lykx1

Noch nicht viel geschrieben

AW: [Javascript] Links-Rechts Scollen Mouseover

Einfach die Codeschnipsel in den Script-Teil der HTML packen (wie das geht siehst du im 1. Posting). Dann auf den beiden "Pfeilen" (die das Scrollen beginnen lassen) einfach ein "onmouseover" legen und dabei die Funktionen left() und right() aufrufen (je nach dem in welche Richtung der Pfeil zeigt). Auf beide zusätzlich ein "Onmouseout" mit pause().

Dabei dann natürlich beachten das du das Script anpasst oder deine DIVS auch ims und holder nennst.
 
C

captainthriller

Aktives Mitglied

AW: [Javascript] Links-Rechts Scollen Mouseover

Ich habe es mal versucht aber es klappt nicht ... ich weiss aber auch nicht ob ich alles richtig gemacht habe...

Code: 
<script type="text/javascript">

/******************************************
* Scrollable content script II- © Dynamic Drive ([url=http://www.dynamicdrive.com]Dynamic Drive DHTML(dynamic html) & JavaScript code library[/url])
* Visit [url=http://www.dynamicdrive.com/]Dynamic Drive DHTML(dynamic html) & JavaScript code library[/url] for full source code
* This notice must stay intact for use
******************************************/

iens6=document.all||document.getElementById
ns4=document.layers

//specify speed of scroll (greater=faster)
var speed=5

if (iens6){
document.write('<div id="holder" style="position:relative;width:175px;height:160px;border:1px solid black;overflow:hidden">')
document.write('<div id="ims" style="position:absolute;width:240px;left:0;top:0">')
}
</script>

<ilayer name="nscontainer" width=175 height=160 clip="0,0,175,160">
<layer name="nscontent" width=240 height=160 visibility=hidden>

<!--INSERT CONTENT HERE-->
<p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML is the
combination of HTML, JavaScript, and CSS</font></p>
<p><font size="2" face="Arial">- DOM stands for Document Object Model</font></p>
<p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML allows
content on a page to change on the fly, without reloading the page</font></p>
<p><font size="2" face="Arial">- CSS allows for the separation between content
definition and formatting</font></p>
<p><font size="2" face="Arial">- CSS stands for Cascading style sheet</font></p>
<p><font size="2" face="Arial">- </font><font size="2" face="Arial"><a href="http://www.dynamicdrive.com">Dynamic
Drive</a> provides free, cut and paste DHTML scripts</font></p>
<!--END CONTENT-->

</layer>
</ilayer>

<script language="JavaScript1.2">
if (iens6)
document.write('</div></div>')
</script>

<table width="175px"><td><p align="right">
<a href="#" onMouseover="left()" onMouseout="pause()">left</a>  <a href="#" onMouseover="right()" onMouseout="pause()">right</a></p></td>
</table>

<script language="JavaScript1.2">
if (iens6){
var crossobj=document.getElementById? document.getElementById("ims") : document.all.content
var contentheight=crossobj.offsetHeight
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentheight=crossobj.clip.height
}

function right(){
if(!document.getElementById("ims").style.marginLeft){ marg = 0; } else {
marg = parseInt(document.getElementById("ims").style.marginLeft); }
marg -= 1;
if(parseInt(width+marg)>parseInt(document.getElementById("holder").style.width)){
document.getElementById("ims").style.marginLeft = marg; }
tout = setTimeout("right()",0);
}
function left(){
if(!document.getElementById("ims").style.marginLeft){ marg = 0; } else {
marg = parseInt(document.getElementById("ims").style.marginLeft); }
if(marg < 0){
marg += 1;
document.getElementById("ims").style.marginLeft = marg;
tout = setTimeout("left()",0);
}

}function pause(){
clearTimeout(tout)
}

function getcontent_height(){
if (iens6)
contentheight=crossobj.offsetHeight
else if (ns4)
document.nscontainer.document.nscontent.visibility="show"
}
window.onload=getcontent_height
</script>
 
L

lykx1

Noch nicht viel geschrieben

AW: [Javascript] Links-Rechts Scollen Mouseover

Für den ersten Versuch kannst du ja den SchnickSchnack erst mal weglassen.

Code: 
<html>
<script>

function right(){
if(!document.getElementById("ims").style.marginLeft){ marg = 0; } else {
marg = parseInt(document.getElementById("ims").style.marginLeft); }
marg -= 1;
if(parseInt(width+marg)>parseInt(document.getElementById("holder").style.width)){
document.getElementById("ims").style.marginLeft = marg; }
tout = setTimeout("right()",0);
}

function left(){
if(!document.getElementById("ims").style.marginLeft){ marg = 0; } else {
marg = parseInt(document.getElementById("ims").style.marginLeft); }
if(marg < 0){
marg += 1;
document.getElementById("ims").style.marginLeft = marg;
tout = setTimeout("left()",0);
}

}function pause(){
clearTimeout(tout)
}

</script>

<body>
<div id="holder" style="position:relative;width:175px;height:160px;border:1px solid black;overflow:hidden">
<div id="ims" style="position:absolute;width:170px;left:0;top:0">
Hier kommt der Inhalt der gescrollt werden soll rein.
</div>
</div>

<div onmouseover='links()' onmouseout='pause()'>links</div>
<div onmouseover='rechts()' onmouseout='pause()'>rechts</div>

</body>
</html>
 
C

captainthriller

Aktives Mitglied

AW: [Javascript] Links-Rechts Scollen Mouseover

Ja sieht schon kürzer aus ... aber wenn du deinen Quelltext als HTML abspeicherst tut sich trotzdem nichts! (auch nicht, wenn man die breite vom div id="ims" erhöht) ;)
 
L

lykx1

Noch nicht viel geschrieben

AW: [Javascript] Links-Rechts Scollen Mouseover

Das ist der Mist mit den kopierten Sachen. Alles muss man selber machen :)
Ist nicht sonderlich schön, aber bei mir funktioniert es.

Code: 
<html>
<script>
var marg = 0;

function ori() {
tu = setInterval("r()",1);
}

function ole() {
tu = setInterval("l()",1);
}

function r() {
if (marg <150) marg = marg+1;
set();
}

function l() {
if (marg>0) marg = marg-1;
set();
}

function set() {
document.getElementById("ims").style.marginLeft = marg;
}

function pause() {
window.clearInterval(tu);
}

</script>

<body>
<div id="holder" style="position:relative; width:475px; height:20px; border:1px solid black; overflow:hidden">
<div id="ims" style="position:absolute; width:370px; height:15px; left:0; top:0">
Hier kommt der Inhalt der gescrollt werden soll rein.
</div>
</div>

<div onmouseover='ole()' onmouseout='pause()'>links</div>
<div onmouseover='ori()' onmouseout='pause()'>rechts</div>

</body>
</html>
 
C

captainthriller

Aktives Mitglied

AW: [Javascript] Links-Rechts Scollen Mouseover

Vielen Dank für die Hilfe ... sieht schonmal sehr gut aus ... leider bräuchte ich es nur so, dass ich Bilder im Div habe (kann man ja einfach einsetzen für den Text, das ist nicht das Problem) und dann das erste links haben möchte und dann nach rechts scrollen ...
wenn ich es selbst nicht umgebastelt kriege, könnte ich dich nochmal in anspruch nehmen? ;)

Damit du mich nicht falsch verstehst: Es soll in etwa so aussehen (natürlich nur mit Bildern im DIV) aber halt ohne Iframe und die unterschiedliche geschwindigkeit ist auch nicht wichtig. und es sollen natürlich normale buttons zum drüber fahren mit der maus werden und muss nicht unbedingt im div geschehen.. http://www.fotokonserve.de/sub_test/


_________________________________
EDIT...

habe es einigermaßen hinbekommen ... muss nur ein bisschen mit den größen spielen ... ist zwar so nicht sehr konfortabel aber der script ist schön klein und es funktioniert fürs erste. vielen dank!


Code: 
<html>
<script>
var marg = 0;

function ori() {
tu = setInterval("r()",1);
}

function ole() {
tu = setInterval("l()",1);
}

function r() {
if (marg <1250) marg = marg+2;
set();
}

function l() {
if (marg>0) marg = marg-2;
set();
}

function set() {
document.getElementById("ims").style.marginLeft = -marg;
}

function pause() {
window.clearInterval(tu);
}

</script>

<body>
<a href="#" onmouseover="ole()" onmouseout="pause()">LEFT</a>
<a href="#" onmouseover="ori()" onmouseout="pause()">RIGHT</a>
<div id="holder" style="position:relative; width:600px; height:500px; border:1px solid black; overflow:hidden">
<div id="ims" style="position:absolute; width:1600px; height:500px; left:0; top:0; margin-left:0">
<table border="0" cellpadding="0" cellspacing="0" width="1600">
	<tr>
		<td><img src="http://www.psd-tutorials.de/modules/Forum/images/an01.jpg" alt="" style="float:left;" /></td>
		<td><img src="http://www.psd-tutorials.de/modules/Forum/images/da01.jpg" alt="" style="float:left;" /></td>
		<td><img src="http://www.psd-tutorials.de/modules/Forum/images/jo01.jpg" alt="" style="float:left;" /></td>
		<td><img src="http://www.psd-tutorials.de/modules/Forum/images/jo02.jpg" alt="" style="float:left;" /></td>
		<td><img src="http://www.psd-tutorials.de/modules/Forum/images/mo01.jpg" alt="" style="float:left;" /></td>
		<td><img src="http://www.psd-tutorials.de/modules/Forum/images/mo02.jpg" alt="" style="float:left;" /></td>
		<td><img src="http://www.psd-tutorials.de/modules/Forum/images/st01.jpg" alt="" style="float:left;" /></td>
	</tr>
<table>
</div>
</div>

</body>
</html>
 
Zuletzt bearbeitet:
L

lykx1

Noch nicht viel geschrieben

AW: [Javascript] Links-Rechts Scollen Mouseover

Kein Problem, bin auch immer froh wenn was funktioniert :D
Sieht doch auch schon mal ganz gut, immer bisschen rumspielen, dabei lernt man das meiste.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 233 (Mitglieder: 7, Gäste: 226)
Robots: 1.110

Statistik des Forums

Themen
118.565
Beiträge
1.538.067
Mitglieder
67.488
Neuestes Mitglied
Andrew56524
Oben