Hi alle zusammen!
Ich bin neu hier und möchte mich kurz vorstellen.
Mein Name ist Jack, bin 23 Jahre alt und ich studiere im 7. Semester Online Medien. Gestern habe ich mit der Vorbereitung meiner Thesis begonnen und bin gleich auf ein Problem gestossen, doch dazu etwas später mehr...
Zu meinen Vorkenntnissen:
In der Schule haben wir die Programmiersprachen C++ und Java oberflächlich behandelt, jedoch leider kein Javascript und dieser Umstand bereitet mir Probleme. Ich würde behaupten, ohne arrogant klingen zu wollen, dass ein grundsätzlich Verständnis vorhanden ist d.h. Übergabeparameter, Objektorientierung, Schleifen, if else Abfragen etc.
Meine Thesis:
Sie beinhaltet die Bereiche AV- Produktion, Webtechnologien(HTML 5, CSS3 und Javascript + jQuery) und Marketing d.h. ein Musikstück wird produziert, dazu ein Musikvideo gedreht, eine Homepage(ohne Onlineshop!) erstellt und über Social-Networks Marketing für die Band betrieben.
Mein Ziel:
Eine Website in dieser Art:
http://www.acer.de/ac/de/DE/content/home
So genug über mich![Wink ;) ;)](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/1f609.png)
Ich habe folgendes Problem:
Wenn ich folgende Scripts verwende tritt ein Darstellungsfehler auf d.h. die Hintergrundbilder werden NICHT zu 100% auf dem Bildschrim dargestellt (zufälliger HG-Wechsel und Fade-Effekt funktioniert).
HTML-Datei:
Javascript-Datei:
Wo ist der Fehler?
Ich hoffe ihr könnt mir helfen.
Lg Jack
Ich bin neu hier und möchte mich kurz vorstellen.
Mein Name ist Jack, bin 23 Jahre alt und ich studiere im 7. Semester Online Medien. Gestern habe ich mit der Vorbereitung meiner Thesis begonnen und bin gleich auf ein Problem gestossen, doch dazu etwas später mehr...
Zu meinen Vorkenntnissen:
In der Schule haben wir die Programmiersprachen C++ und Java oberflächlich behandelt, jedoch leider kein Javascript und dieser Umstand bereitet mir Probleme. Ich würde behaupten, ohne arrogant klingen zu wollen, dass ein grundsätzlich Verständnis vorhanden ist d.h. Übergabeparameter, Objektorientierung, Schleifen, if else Abfragen etc.
Meine Thesis:
Sie beinhaltet die Bereiche AV- Produktion, Webtechnologien(HTML 5, CSS3 und Javascript + jQuery) und Marketing d.h. ein Musikstück wird produziert, dazu ein Musikvideo gedreht, eine Homepage(ohne Onlineshop!) erstellt und über Social-Networks Marketing für die Band betrieben.
Mein Ziel:
Eine Website in dieser Art:
http://www.acer.de/ac/de/DE/content/home
So genug über mich
![Wink ;) ;)](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/1f609.png)
Ich habe folgendes Problem:
Wenn ich folgende Scripts verwende tritt ein Darstellungsfehler auf d.h. die Hintergrundbilder werden NICHT zu 100% auf dem Bildschrim dargestellt (zufälliger HG-Wechsel und Fade-Effekt funktioniert).
HTML-Datei:
Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>www.tutorials.de</title>
<script type="text/javascript" src="javascript/bgImg.js"></script>
<script src="javascript/bgImg.js"></script> <!-- bgImg zufälliger Bildwechsel mit fade in -->
<style type="text/css">
* { margin: 0;
padding: 0;}
/* Höhen- und Breitenanpassung zu 100%; Scrollbar ausblenden */
body, html{ width: 100%;
height: 100%;
overflow: hidden;}
/* BG-Image auf unterste Ebene anordnen */
#bgImg{ position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: 0;
z-index: 1;}
/* Body-Dummy absolut über BG-Image legen; Scrollbar bei Bedarf einblenden */
#bodyDiv{ position: absolute;
top: 0;
left: 0;
z-index: 2;
overflow: auto;
width: 100%;
height: 100%;
text-align: center;}
</style>
</head>
<body>
<div id="bgImg">
<div id="bodyDiv">
</div>
</body>
</html>
Javascript-Datei:
Code:
function bgImg()
{
var checkInterval = null,
bgImgInterval = null,
currentImage = -1;
zufall=0;
images = new Array
(
'pictures/hintergrund.jpg',
'pictures/a.jpg',
'pictures/b.jpg'
// Diese Bilder sind die standard Windows XP Bilder
);
loadingImages = new Array();
this.run = function()
{
checkInterval = window.setInterval('this.checkIfLoaded();', 100);
for(i = 0;i < images.length;i++)
{
image = images[i];
loadingImages.push(new Image);
loadingImages[i].src = image;
}
}
this.checkIfLoaded = function()
{
allLoaded = true;
for(i = 0;i < loadingImages.length;i++)
{
loadingImage = loadingImages[i];
if(!loadingImage.complete)
allLoaded = false;
}
if(allLoaded)
{
window.clearInterval(checkInterval);
this.startbgImg();
window.setInterval('this.startbgImg();', 8000); // Die Funktion für das Bilder wechseln alle 8 Sekunden ausführen
}
}
this.startbgImg = function()
{
this.showImage();
if(currentImage == (loadingImages.length - 1))
currentImage = 0;
else
{
zufall = 0 + 2*(Math.random()); // zufäliger Bildwechsel
currentImage = Math.round(zufall);
}
element = document.getElementById('bgImg');
element.style.height = loadingImages[currentImage].height + 'px';
element.style.width = loadingImages[currentImage].width + 'px';
element.style.backgroundImage = 'url(' + loadingImages[currentImage].src + ')';
window.setTimeout('this.hideImage();', 7800); // Das Bild in 7,8 Sekunden ausblenden
}
this.hideImage = function()
{
element = document.getElementById('bgImg');
for(i = 0;i <= 100;i++)
window.setTimeout('element.style.filter = "Alpha(opacity=' + (100 - i) + ')"; element.style.MozOpacity = ' + (1 - i / 100) + '; element.style.opacity = ' + (1 - i / 100) + ';', i * 2);
// Von 0 bis 100 (Prozent)
// Das i * 2 dient dazu, dass das Ausblenden nicht zu schnell geht
}
this.showImage = function()
{
element = document.getElementById('bgImg');
for(i = 0;i <= 100;i++)
window.setTimeout('element.style.filter = "Alpha(opacity=' + i + ')"; element.style.MozOpacity = ' + i / 100 + '; element.style.opacity = ' + i / 100 + ';', i * 2);
}
this.run();
}
window.onload = function()
{
bgImg();
}
Ich hoffe ihr könnt mir helfen.
Lg Jack