[gelöst] Javascript einbinden
Eingetragen von ahoek (570)am 05.06.2010 - 19:56 Uhr in
Hallo,
auf einer Webseite habe ich einige lustige Javascripts entdeckt.
Zum Beispiel dieses unten, bei dem Augen dem Mauszeiger folgen.
Was muss ich tun, um den Code in die Seite einzubinden.
Am besten wäre eine Erklärung, die bei Adam und Eva beginnt.
Ich habe jetzt den gesamten Nachmittag damit vertan. Ohne Ergebnis.
Hoffe mir kann jemand helfen.....
<!-- Script-Anfang -->
<!-- www-java 24.net - DIE Javascript - Ressource -->
<!-- Diesen Code musst Du in den -head- einbauen -->
<script language="JavaScript">
<!-- Pre load images
pic0=new Image();
pic0.src="eye.gif";
pic1=new Image();
pic1.src="pupils.gif";
//-->
</script>
<!-- Diesen Code musst Du in den -body- einbauen -->
<form name="frm">
<input name="bx" type=checkbox onClick="javascript:OnOff(this)">
</form>
<script language="JavaScript">
<!-- Eyes by Kurt Grigg - http://www.btinterne t.com/~kurt.grigg/javascript
var n4=(document.layers);
var n6=(document.getElementById&&!document.all);
var ie=(document.all);
var O=(navigator.appName.indexOf("Opera") != -1)?true:false;
var _d=(n4||ie)?'document.':'document.getElementById("';
var _a=(n4||n6)?'':'all.';
var _r=(n6)?'")':'';
var _s=(n4)?'':'.style';
if (n4){
document.write('<layer name="eyeball" top=0 left=0 width="69" height="34"><img src="eye.gif" width="69" height="34"></layer>');
document.write('<layer name="pupil1" top=0 left=0 width="13" height="13"><img src="pupils.gif" width="13" height="13"></layer>');
document.write('<layer name="pupil2" top:0 left=0 width="13" height="13"><img src="pupils.gif" width="13" height="13"></layer>');
}
else{
if (ie)
document.write('<div id="ic" style="position:absolute;top:0;left:0"><div style="position:relative">');
document.write('<div id="eyeball" style="position:absolute;top:100px;left:100px;width:69px;height:34px"><img src="eye.gif" width="69" height="34"></div>');
document.write('<div id="pupil1" style="position:absolute;top:0px;left:0px;width:12px;height:13px"><img src="pupils.gif" width="13" height="13"></div>');
document.write('<div id="pupil2" style="position:absolute;top:0px;left:0px;width:12px;height:13px"><img src="pupils.gif" width="13" height="13"></div>');
if (ie)
document.write('</div></div>');
}
var ym=0;
var xm=0;
if (n4||n6){
window.captureEvents(Event.MOUSEMOVE);
function mouseNS(e){
ym = e.pageY-window.pageYOffset;
xm = e.pageX;
}
if (n4)window.onMouseMove=mouseNS;
if (n6)document.onmousemove=mouseNS;
}
if (ie||O){
function mouseIEO(){
ym = (ie)?event.clientY:event.clientY-window.pageYOffset;
xm = event.clientX;
}
document.onmousemove=mouseIEO;
}
var etemp=eval(_d+_a+"eyeball"+_r+_s);
var p1temp=eval(_d+_a+"pupil1"+_r+_s);
var p2temp=eval(_d+_a+"pupil2"+_r+_s);
dy=0;
dx=0;
fy=0;
fx=0;
angle1=0;
angle2=0;
d1=0;
d2=0;
function makefollow(){
sy=(!ie)?window.pageYOffset:0;
wy=(ie)?document.body.clientHeight:window.innerHeight;
wx=(ie)?document.body.clientWidth:window.innerWidth;
//Keep eyes on screen. Netscape 6 plays up otherwise!
var chy=Math.floor(fy-50);
if (chy <= 0) chy = 0;
if (chy >= wy-50) chy = wy-50;
var chx=Math.floor(fx-34);
if (chx <= 0) chx = 0;
if (chx >= wx-69) chx = wx-69;
etemp.top=chy+sy;
etemp.left=chx;
//eyeball1 centre.
c1y=parseInt(etemp.top)+17;
c1x=parseInt(etemp.left)+17;
//eyeball2 centre.
c2y=parseInt(etemp.top)+17;
c2x=parseInt(etemp.left)+52;
dy1 = ym+sy - c1y;
dx1 = xm - c1x;
d1 = Math.sqrt(dy1*dy1 + dx1*dx1);
dy2 = ym+sy - c2y;
dx2 = xm - c2x;
d2 = Math.sqrt(dy2*dy2 + dx2*dx2);
ay1 = ym+sy - c1y;
ax1 = xm - c1x;
angle1 = Math.atan2(ay1,ax1)*180/Math.PI;
ay2 = ym+sy - c2y;
ax2 = xm - c2x;
angle2 = Math.atan2(ay2,ax2)*180/Math.PI;
dv=1.7;
p1temp.top=(d1 < 17)?(c1y-6+d1/dv*Math.sin(angle1*Math.PI/180)):(c1y-6+10*Math.sin(angle1*Math.PI/180));
p1temp.left=(d1 < 17)?(c1x-6+d1/dv*Math.cos(angle1*Math.PI/180)):(c1x-6+10*Math.cos(angle1*Math.PI/180));
p2temp.top=(d2 < 17)?(c2y-6+d2/dv*Math.sin(angle2*Math.PI/180)):(c2y-6+10*Math.sin(angle2*Math.PI/180));
p2temp.left=(d2 < 17)?(c2x-6+d2/dv*Math.cos(angle2*Math.PI/180)):(c2x-6+10*Math.cos(angle2*Math.PI/180));
}
function move(){
if (ie)ic.style.top=document.body.scrollTop;
dy=fy+=(ym-fy)*0.10;
dx=fx+=(xm-fx)*0.10;
makefollow();
setTimeout('move()',50);
}
function OnOff(v){
if (ie) v.blur();
state=(document.frm.bx.checked)?(n4)?'hide':'hidden':(n4)?'show':'visible';
etemp.visibility=state;
p1temp.visibility=state;
p2temp.visibility=state;
}
window.onload=move;
//-->
</script>
<!-- Script-Ende -->
<!-- www-java 24.net - DIE Javascript - Ressource -->- Anmelden oder Registrieren um Kommentare zu schreiben
drupal_add_js() ist Dein Freund
am 05.06.2010 - 21:11 Uhr
Hallo,
habe keine Zeit für biblische Mythen:
http://api.drupal.org/api/function/drupal_add_js/6
In "Drupal-Entwickler-Handbuch", gibt es z.B. auch eine gute Schritt-für-Schritt-Anleitung. Für eine direkte Einbindung per Template gab es in ja Deinen anderen Thread ein paar Tipps: http://www.drupalcenter.de/node/28008
Viele Grüße,
Carsten
Leider kann ich mit dem
am 05.06.2010 - 21:19 Uhr
Leider kann ich mit dem englischen Link nichts anfangen.
Die Tipps die im anderen Thread kamen funktionieren leider nicht.
Ich kann in die page.tpl.php eintragen was ich will, da zeigt sich nichts bei mir auf der Seite.
Theme Registry neu aufbauen
am 05.06.2010 - 22:05 Uhr
OK, mein Link führt zur Drupal-API und hat mit Modul-Entwicklung zu tun. Aber wenn man mit Code irgendeiner Art hantieren möchte, sollte man vor APIs nicht zurück schrecken. Und das Drupal-Entwicklerhandbuch (auf Deutsch) habe ich Dir ja auch dazu empfohlen: http://www.addison-wesley.de/main/main.asp?page=ebooks/bookdetails&produ...
Bezüglich der page.tpl.php mußt Du einerseits die "richtige" nehmen in dem aktiven Template, das Du für den Fall nutzt. Zusätzlich muss nach Änderungen in Template-Dateien die Theme-Registry neu aufgebaut werden, wofür es diverse Möglichkeiten gibt, z.B. hat das Modul "admin_menu" dafür einen praktischen Eintrag.
Danke für die Antwort. Sag
am 05.06.2010 - 22:45 Uhr
Danke für die Antwort.
Sag mir bitte noch eins...
Muss ich den gesamten oben abgebildeten Code in die page.tpl.php eintragen?
Ich habe herum gelesen dass man die js auch als Datei speichern kann und dann aus page.tpl.php aufrufen kann.
Wenn ja, ergeben sich daraus zwei neue Fragen.
Wie muss diese js Datei aussehen?
Was muss ich ins Template schreiben?
Edit:
Was gibt es außer dem Admin-Menü sonst noch für Möglichkeiten?
Nochmal Edit:
Auch im Admin-Menü sehe ich keinen Eintrag, der mir das Aufbauen der Theme-Registry ermöglicht....
In der Admin-Menü Leiste
am 06.06.2010 - 19:55 Uhr
In der Admin-Menü Leiste unter dem Icon links ist bei mir der erste Eintrag "Flush all Caches" und wenn ich auf dem Eintrag nach rechts rübergehe, dann kann ich die Theme-Registry geziehlt auswählen. (Alles Löschen tuts natürlich auch).
Beste Grüße
Werner
Danke Dir Werner! Ich hatte
am 07.06.2010 - 10:37 Uhr
Danke Dir Werner!
Ich hatte das nur für ein Icon gehalten....
Kannst Du mir bitte nochmal sagen, welchen Teil des Codes ich an welchen Teil der page.tpl.php speichern muss?
Oder lag das nur an der Themeregistry?
Push! Wirklich niemand hier,
am 07.06.2010 - 12:39 Uhr
Push!
Wirklich niemand hier, der mir das kurz sagen kann?
Das steht doch in Code oben.
am 07.06.2010 - 15:15 Uhr
Das steht doch in Code oben. Den Bereich für den Head von . . . . . . . in den Bereich der page.tpl.php Datei, die mit . . . . . eingerahmt ist. Den großen Bock (wieder komplett . . . . . . . ) in den Teil der page.tpl.php Datei, wo die Variable $footer ausgegeben wird (etwa die nächste Zeile dahinter).
Beste Grüße
Werner
Inzwischen weiß ich das
am 07.06.2010 - 15:25 Uhr
Inzwischen weiß ich das deroben abgebildete Code unter Drupal nicht läuft.
Ich hatte eigentlich nichts falsch gemacht...
Noch mal ein anderes Beispiel mit dem ich auch nicht klar komme.
http://www.serie3.info/s3slider/
Das will ich in eine Kundenseite einbinden.
Was ich bisher getan habe.
1. Drupal jquery_plugin installiert.
2. Von der oben genannten Webseite diese Datei: Full version (with examples) (Ganz am Ende) heruntergeladen und entpackt
3. Die beiden Dateien aus dem js-Ordner in das jquery_Plugin auf den Server geladen
Jetzt komme ich nicht weiter...
Was muss ich machen, dass das Script in einem Block ausgegeben wird?
Wäre wirklich gut, wenn mir jemand helfen könnte. Ich probiere mir seit Stunden einen Wolf....
Und wieder ist ein Tag ins
am 07.06.2010 - 18:52 Uhr
Und wieder ist ein Tag ins Land gegangen...und ich stehe ohne Ergebnis da.
Ich schaffe es einfach nicht eine einfache Slideshow in einen Block zu tun und zum Laufen zu bekommen...
Kennt jemand ein Script, das einfach zu verbauen ist, nicht zu lange lädt und das vielleicht noch ein paar schicke Überblendungen mitbringt?
views_slideshow
am 07.06.2010 - 19:14 Uhr
Es gibt diverse Modul, die (auch in Blöcken) Slideshows zur Verfügung stellen.
Unter Anderem [do:views_slideshow Views slideshow], [do:views_rotator Views Rotator] und die anderen unter "related projects" gelisteten Modul.
Damit ist das ganz einfach.
Stefan
Hallo Stefan, Views Slideshow
am 07.06.2010 - 19:28 Uhr
Hallo Stefan,
Views Slideshow hatte ich heute auch schon am Wickel.
Ich komme mit Views nicht klar. Trotz Lesen des Handbuchs. das ist leider nur ein Link zu einem englischen Tutorial. Das könnte für mich auch chinesisch sein....
Gibt es für den rotator eine deutsche Anleitung?
Video
am 07.06.2010 - 21:49 Uhr
Dieses Video ist zwar in englisch, jedoch sollten die Bilder ziemlich selbsterklärend sein.
Ansonsten hilft auch die goldene Drupal-Regel: einfach mal herumprobieren und ein wenig mit spielen ...
Hallo Stefan, der Tipp war
am 08.06.2010 - 14:47 Uhr
Hallo Stefan,
der Tipp war gut!
ich habe mich bisher wiederholt an Views gewagt und bin immer wieder kläglich gescheitert.
Jetzt habe ich zumindest schon mal den Block fertig und es werden auch Bilder aus dem Files-Ordner eingelesen.
Allerdings sehe ich diese zur Zeit nur als Links und nicht als Slideshow. Schau mal hier www.eurodent24.com (Link wird nachher wieder gelöscht).
Das Video war nur bedingt zu gebrauchen, da er zur Erklärung der Slideshow bereits vorher erstellte Views clont und nur noch ein paar kleine Einstellungen ändert.
Wie die Views davor erstellt wurden, wird nicht erklärt. Für einen Anfänger wie mich sind das dann nur böhmische Wälder.....
Kannst Du mir nach kurzem Draufschauen sagen, was ich falsch mache?
Ich würde auch gern den Ordner definieren aus dem die Bilder ausgelesen werden. Ausserdem würde ich gern das "Bilder" abschalten.
Edit:
Ich hänge noch ein paar Screenshots von den Einstellungen mit an...
Alles was ich wissen muss
am 08.06.2010 - 16:48 Uhr
Alles was ich wissen muss steht ja in der Hilfe!!!
Nur für den Fall, dass
am 11.06.2010 - 15:28 Uhr
Nur für den Fall, dass nochmal jemand dieses Problem hat...
Bei Views bin ich zum mindestens 20 Mal gescheitert.
Die einzelnen Anleitungen setzen oft großes Fachwissen voraus und sind für Anfänger in Sachen Views nicht immer geeignet.
Ich werde wohl noch ein bisschen warten müssen, bis die Könner einfachere Tuts ins Netz stellen....
Also habe ich ein paar tage investiert und mich mit Javascript auseinander gesetzt.
Die Kiste ist nicht wirklich schwer zu wuppen.
Ich hatte bei meinen Versuchen nur immer das Pech an Scripte zu geraten die sich mit Drupal beißen.
Die besten Scripte die in der Regel auch laufen findet man unter plugins.jquery.com
Ein gutes und für den Anfänger einfaches Script für eine Slideshow findet Ihr hier.
Dateien auf den Server laden
den entsprechenden Teil des Scripts in die page.tpl.php des jeweiligen Themes zwischen
<head> und </head>platzierenden Div-Container an die entsprechende Stelle der Webseite packen
Bilder bearbeiten und auf den Server laden
bei dem verlinkten Script in der be_slide.js die Pfade anpassen und enjoy...