✔ Javascript mit php einbinden

D

Devil87

Mitglied
Guten Tag zusammenn,

ich habe mir von einer Seite den Code für einen Panorama-scroll-Skript kopiert,
solange ich den Javascript in keinem php Code einbinde (inlcude 'javascript.js')
oder mit <script language="JavaScript" src="js/panorama.js" type="text/javascript"></script>
funktioniert der ganze Script nicht, sobald ich den aber in einer normalen html Datei so einfüge

<script language="JavaScript" src="js/panorama.js" type="text/javascript"></script>

funktioniert das. hier sind die Scripte:

panorama.js
Code: 
/***************************************************************************************
Copyright (C) 2001 ab_ditto
This script is made by and copyrighted to ab_ditto at back.to/ab or ab_ditto@hotmail.com
This may be used freely as long as this msg is intact!
***************************************************************************************
excepted from this copyright is the (seperatly marked) NN6 "scrollbarkiller" by Eddie Traversa
***************************************************************************************/
//*****parameters to set*****
impad='js/er_geschoss.jpg';  //the path to your panorama-pic
//if you have troubles with NN & large pics try using a .gif instead of a .jpg
imwid=500; //the width of your pic
imhei=49; //the height of your pic
poslef=200; //the left position of the panorama on your page
postop=150; //the top position of the panorama on your page
panwid=600; //the width of the shown area
panhei=150; //the height of the shown area
//if it differs from the image-height, the image gets scaled in length and height
//*****additional parameters*****
buttl='js/left.gif'; //path to the left-button (if you use your own pics)
buttr='js/right.gif'; //path to the right-button (if you use your own pics)
buttw=20; //width of one button
butth=15; //height of a button
speed=50; //timeout between moves; set it lower to increase speed
move=5; // movement at one step in pixel
//*****nothing more to do, have fun :)
tim=0;noscroll=true;
imw=imwid*panhei/imhei;imh=panhei;imstart=panwid/2-imw*1.5;
jumpa=panwid/2-imw*2.5;jumpwida=imw-move;
jumpb=panwid/2-imw/2;jumpwidb=imw+move;
conwid=buttw+(5*1);contop=postop+(imh*1)+(10*1);
conlefa=poslef+(panwid/2)-conwid;conlefb=poslef+(panwid/2);

function sr(){
	if(!noscroll){
	now=parseFloat(document.getElementById("pano").style.left);
  if (now<=jumpa){now+=jumpwida;} else{now-=move;}
  document.getElementById("pano").style.left=now;
	tim=setTimeout("sr()",speed);}}

function sl(){
	if(!noscroll){
	now=parseFloat(document.getElementById("pano").style.left);
  if (now>=jumpb){now-=jumpwidb;} else{now+=move;}
  document.getElementById("pano").style.left=now;
	tim=setTimeout("sl()",speed);}}

function stop(){clearTimeout(tim); noscroll=true}
//***************************************************************************************
//NN6 "scrollbarkiller" by Eddie Traversa
if (document.getElementById && !document.all){document.write('<div id="kill-scrollbars" style="position:relative">');}
//***************************************************************************************
document.write("<div id='panorama'>");
document.write("<div id='pano' style='position:absolute; left:"+imstart+"px; top:0px; width:"+imw*3+"px; height:"+imh+"px; z-index:2; visibility:visible;'>");
document.write("<table><tr><td nowrap><img src='"+impad+"' width="+imw+"px height="+imh+"px><img src='"+impad+"' width="+imw+"px height="+imh+"px><img src='"+impad+"' width="+imw+"px height="+imh+"px></td></tr></table>");
document.write("</div></div>");
document.write("<div id='left'><a href='javascript://' onmouseover='noscroll=false; sl()' onmouseout='stop()'><img src='"+buttl+"' width="+buttw+"px height="+butth+"px border='0';></a></div>");
document.write("<div id='right'><a href='javascript://' onmouseover='noscroll=false; sr()' onmouseout='stop()'><img src='"+buttr+"' width="+buttw+"px height="+butth+"px border='0';></a></div>");
document.write("<style>");
document.write("body { margin-left:0; margin-right:0; margin-top:0; margin-bottom:0;overflow:hidden;}");
document.write("#panorama {position:absolute; left:"+poslef+"px; top:"+postop+"px; width:"+panwid+"px; height:"+panhei+"px; z-index:1; clip:rect(0px,"+panwid+"px,"+panhei+"px,0px); overflow:hidden;}");
document.write("#left {position:absolute; left:"+conlefa+"px; top:"+contop+"px; width:"+conwid+"px; z-index:1; text-align:right;}");
document.write("#right {position:absolute; left:"+conlefb+"px; top:"+contop+"px; width:"+conwid+"px; z-index:1; text-align:left;}");
document.write("</style>");
panorama_ausgabe.php
Code: 
<?php 
echo "Unser Jugendzentrum";
echo "<script language='JavaScript' src='js/panorama.js' type='text/javascript'></script>";
?>

so sieht es momentan aus :
http://rzsud.rz.funpic.de/index.php?select=unserhaus
 
Zuletzt bearbeitet:
Hi,

wenn ich es richtig überblicke, greifst du auf die Variablen von panorama.js zu (z.B. imwid), bevor das JavaScript eingebunden wurde.

Änder mal die Position des Einbindens - z.B.
Code: 
<div id="main2">
<script language='JavaScript' src='js/panorama.js' type='text/javascript'></script>
<script type='text/javascript'>
speed=50; //timeout between moves; set it lower to increase speed
// ...
Ciao
Quaese
 
Die Javascript Datei beinhaltet genau das gleiche, was zwischen den script tags steht.
Das eine ist der Originale Code und dann einmal der veränderte von mir, wo auch alle Variablen beinhaltet sind wie im der .js Datei.
 
Hi,

was zwischen den Script-Tags steht, beinhaltet nicht das gleiche, wie die Datei - die ersten Variablen sind dort nicht definiert.

Aber das ist auch nicht das eigentliche Problem. Du greifst in den Funktionen sr und sl auf ein Element mit der ID pano zu. Ein solches Element existiert in deinem Dokument jedoch nicht.

Um das Script zum Laufen zu bringen, musst du für jede Panoramaansicht eine ID vergeben. Diese übergibst du in den mouseover- bzw. mouseout-Events an die jeweilige Funktion.

Die Funktionen müssen natürlich dahingehend angepasst werden, dass sie mit variablen IDs umgehen können.

Angepasstes Script:
Code: 
<script type="text/javascript">
//*****parameters to set*****
impad='pic11.jpg'; //the path to your panorama-pic
//if you have troubles with NN & large pics try using a .gif instead of a .jpg
imwid=500; //the width of your pic
imhei=49; //the height of your pic
poslef=200; //the left position of the panorama on your page
postop=150; //the top position of the panorama on your page
panwid=600; //the width of the shown area
panhei=150; //the height of the shown area
//if it differs from the image-height, the image gets scaled in length and height
//*****additional parameters*****
buttl='left.gif'; //path to the left-button (if you use your own pics)
buttr='right.gif'; //path to the right-button (if you use your own pics)
buttw=20; //width of one button
butth=15; //height of a button
speed=50; //timeout between moves; set it lower to increase speed
move=5; // movement at one step in pixel
//*****nothing more to do, have fun :)
tim=0;noscroll=true;
imw=imwid*panhei/imhei;imh=panhei;imstart=panwid/2-imw*1.5;
jumpa=panwid/2-imw*2.5;jumpwida=imw-move;
jumpb=panwid/2-imw/2;jumpwidb=imw+move;
conwid=buttw+(5*1);contop=postop+(imh*1)+(10*1);
conlefa=poslef+(panwid/2)-conwid;conlefb=poslef+(panwid/2);

function sr(strID){
	if(!noscroll){
	now=parseFloat(document.getElementById(strID).style.left);
  if (now<=jumpa){now+=jumpwida;} else{now-=move;}
  document.getElementById(strID).style.left=now+"px";
	tim=setTimeout("sr('"+strID+"')",speed);}}

function sl(strID){
	if(!noscroll){
	now=parseFloat(document.getElementById(strID).style.left);
  if (now>=jumpb){now-=jumpwidb;} else{now+=move;}
  document.getElementById(strID).style.left=now+"px";
	tim=setTimeout("sl('"+strID+"')",speed);}}

function stop(){clearTimeout(tim); noscroll=true}
//***************************************************************************************
//NN6 "scrollbarkiller" by Eddie Traversa
if (document.getElementById && !document.all){document.write('<div id="kill-scrollbars" style="position:relative">');}
</script>
Exemplarisch die erste Panoramansicht mit den notwendigen Änderungen:
Code: 
<h3>Erdgeschoss</h3>
<div class='panorama'>
  <div class='pano' id="pano1" style='position:relative; left:20px; top:0px; visibility:visible;'>
    <table>
      <tr><td nowrap='nowrap'><img src='images/pan/er_geschoss.jpg' alt='' /><img src='images/pan/er_geschoss.jpg' alt=''/><img src='images/pan/er_geschoss.jpg' alt=''/></td></tr>
    </table>
  </div>
</div>
<div class='left'><a href='javascript://' onmouseover='noscroll=false; sl("pano1")' onmouseout='stop()'><img src='js/left.gif' width='20' alt='Links'/></a></div>
<div class='right'><a href='javascript://' onmouseover='noscroll=false; sr("pano1")' onmouseout='stop()'><img src='js/right.gif' width='20' alt='Rechts'/></a></div>
Vielleicht hilft dir das weiter.

Ciao
Quaese
 
Hammer danke funktioniert genau wie es soll, aber wo steht im javascript was von der id=pano1 ? ich finde nehmlich nichts damit,
danke es läuft prima mit allen bildern, ich versteh das mit der id zwar nicht aber es läuft prima mit allen bildern, wenn ich die id änder pro div ^^ danke @ Quaese
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück