nicht angemeldet
Hintergrundbilder dynamisch wechseln
0 
Gernot Back
0 0 Gernot Back
0 0 Gernot Back
0
0
Hintergrundbilder dynamisch wechseln
Hallo zusammen,
ich bastle gerade an einen Script, dass mir die Hintergundbilder dynamisch wechseln soll, komme aber nicht mehr weiter bzw. finde meinen Fehler nich.
Kann mir jemand Tipps geben?
<script language="JavaScript">
<!--
var number_of_pics=2;
var counter=0;
var pic=new Array();
for(i=0;i<number_of_pics;i++)
{
pic[i]=new Image();
}
pic[0].src="./bild1.jpg";
pic[1].src="./bild2.jpg";
function rotateIt(){
document.getElementsByTagName('body')[0].background = pic[counter].src;
// document.background_bild.src=pic[counter].src;
counter++;
if ( counter > number_of_pics-1 )
{
counter=0;
}
setTimeout("rotateIt()",4000);
}
}
// End Hiding -->
</script>
<script LANGUAGE="JavaScript">
<!--
rotateIt();
// -->
</script>
Vielen Dank für Eure Mithilfe
Grüße
-
Hallo Fabienne,
<script language="JavaScript">
Type-Attribut fehlt
var number_of_pics=2;
kannst du mit der Eigenschaft length aus dem Array von Hintergrundbildern auslesen, das du dir anlegst, ist dann dynamischer und leichter zu pflegen, wenn du mal mehr Bilder haben willst.
function rotateIt(){
document.getElementsByTagName('body')[0].background = pic[counter].src;
Warum nicht einfach: document.body.style.backgroundImage = 'url(' + pic[counter].src + ')';
counter++;
if ( counter > number_of_pics-1 )
{
counter=0;
}Geht eleganter mit einer Modulo-Operation (%)
setTimeout("rotateIt()",4000);
}
}// End Hiding -->
</script>
<script LANGUAGE="JavaScript">
<!--
rotateIt();
// -->
</script>Ich vermute, du hast zwei Scriptblöcke, weil der zweite erst am Ende des Dokuments steht. Besser initialisierst du die Bildrotationsfunktion mit dem Eventhandler "onload".
Gruß Gernot
-
Hallo Gernot,
die Hinweise sind gut. Vielen Dank!
Aber mein Script funktioniert immer noch nicht.Irgendwo liegt ein Hund begraben.
Grüße
-
Hallo Fabienne,
Irgendwo liegt ein Hund begraben.
pic[0].src="./bild1.jpg";
Stimmen denn die Pfade? Wo liegt dein Root-Verzeichnis? Testest du möglicherweise nur lokal?
Gruß Gernot
-
ReHi!
Stimmen denn die Pfade? Wo liegt dein Root-Verzeichnis? Testest du möglicherweise nur lokal?
Nö, bin online.
Pfade stimmen und Dateien sind auch vorhanden.Grübel.....
-
Hallo Fabienne,
Stimmen denn die Pfade? Wo liegt dein Root-Verzeichnis? Testest du möglicherweise nur lokal?
"./" habe ich wohl selbst gerade verwechselt mit "/". "./" benutze ich nie, da es ja wohl sowieso nichts anderes macht, als wenn man es weglässt.
Pfade stimmen und Dateien sind auch vorhanden.
Groß- und Kleinschreibung beachtet?
Sonst gib uns mal den Link zu deiner Testseite.
Gruß Gernot
-
Hallo zusammen,
anbei das komplette Script:<html>
<head>
<title>Test</title>
<style type="text/css">body,td,font,p,tr,table,span
{
font-family: Arial,Helvetica,sans-serif;
font-size: 10;
font-weight: normal;
color: #000000;
text-decoration: none;
}.headline
{
font-family: Arial,Helvetica,sans-serif;
font-size: 15.px;
font-weight: normal;
color: #000000;
text-decoration: none;
}a:link
{
font-family: Arial,Helvetica,sans-serif;
font-size: 10;
font-weight: normal;
color: #000000;
text-decoration: underline;
}a:visited
{
font-family: Arial,Helvetica,sans-serif;
font-size: 10;
font-weight: normal;
color: #000000;
text-decoration: underline;
}a:hover
{
font-family: Arial,Helvetica,sans-serif;
font-size: 10;
font-weight: normal;
color: #000000;
text-decoration: underline;
}</style>
</head>
<body bgcolor="#FFFFFF" onload="rotateIt()" background="movies/1149272030_HFqzeYv8Z4_1.jpg">
<TABLE cellpadding="5" cellspacing="0" border="0" width="100%" height="100%">
<tr><td valign=center align="center" width="100%" height="100%"><script language="JavaScript">
<!--function HintergrundbildWechseln(Hintergrundbild)
{
document.getElementsByTagName('body')[0].background = Hintergrundbild;
}var number_of_pics=2;
var counter=0;
var pic=new Array();for(i=0;i<number_of_pics;i++)
{
pic[i]=new Image();
}
pic[0].src='movies/1149272030_HFqzeYv8Z4_1.jpg';
pic[1].src='movies/1149272030_HFqzeYv8Z4_3.jpg';function rotateIt(){
document.body.style.backgroundImage = 'url(' + pic[counter].src + ')';
// document.getElementsByTagName('body')[0].background = pic[counter].src;
// document.background_bild.src=pic[counter].src;counter++;
if ( counter > number_of_pics-1 )
{
counter=0;
}setTimeout("rotateIt()",4000);
}
}// End Hiding -->
</script>
<script LANGUAGE="JavaScript">
<!-- Hide JavaScript from Java-Impaired Browsers
//rotateIt();
// End Hiding -->
</script><TABLE cellpadding="5" cellspacing="0" border="0" width="300">
<tr><td valign=center colspan="2" align="center"><span class="headline">Testfilm</span></td></tr><tr>
<td valign=center>
<OBJECT ID="MediaPlayer" width="320" height="300" classid ="CLSID: 6BF52A52-394A-11d3-B153-00C04F79FAA6"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715"
standby="Windows Media Player Componenten werden geladen..."
type="application/x-oleobject">
<param name="FileName" value="catinfan.wmv">
<param name="URL" value="/movies/1149272030_HFqzeYv8Z4_isdn.wmv">
<param name="background" value="#ffffff">
<PARAM NAME="uiMode" VALUE="Mini">
<PARAM NAME="AutoStart" VALUE="true">
<param name="ShowStatusBar" value="true">
<PARAM NAME="ShowControls" VALUE=1>
<PARAM NAME="ShowDisplay" VALUE=0>
<PARAM NAME="stretchToFit" VALUE=1>
<PARAM NAME="DisplaySize" VALUE=1>
<param name="VOLUME" value="80">
<EMBED type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/"
src="/movies/1149272030_HFqzeYv8Z4_isdn.wmv"
Name="MediaPlayer"
uiMode="Mini"
AutoStart=1 ShowStatusBar=1 ShowControls=1
ShowDisplay=0
displaysize=1
stretchToFit=1
volume=80
width="320" height="300"></EMBED>
</OBJECT>
</td>
<td valign=top align=left nowrap></td>
</tr>
<tr><td colspan="2" align="center"><!--catinfan.wmv--><a target="wiewowas.info_video" href="/?load&version=dsl&id=1149272030_HFqzeYv8Z4&PHPSESSID=29f1bdfe62cc061b2b680e535ec9814c">DSL</a></td></tr>
<tr><td colspan="2" align="center"></td></tr>
</table></td></tr>
</table></body></html>
Viele Grüße und besten Dank für Eure Arbeit am Sonntag!
-
Hallo Fabienne,
probier es mal so, ich habe es aber nicht getestet:
<!-- Hintergrundfarbe und -bild fuer den Body am besten nur im Stylesheet definieren --> </style> <script type="text/javascript"> [code lang=javascript] var counter=0; var picPaths = new Array('movies/1149272030_HFqzeYv8Z4_1.jpg', 'movies/1149272030_HFqzeYv8Z4_3.jpg' ); var pic = new Array (); function init() { for(i=0; i<picPaths.length; i++) { pic[i] = new Image(); pic[i].src = picPaths[i]; } rotateIt(); } function rotateIt(){ counter++; counter %= picPaths.length; document.body.style.backgroundImage = 'url(' + picPaths[counter] + ')'; window.setTimeout("rotateIt()", 4000); } window.onload = init;</script>
</head>
<body>
<!-- hier dein Seiteninhalt -->
</body>
</html>
[/code]Gruß Gernot
-
Hallo Gernot,
super! Vielen Dank! Es klappt jetzt!
Grüße
-
-
-
-
Hi,
Grübel.....
*Wo* steht Dein Script?
freundliche Grüße
Ingo
-
-
-
-