• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hintergrundbilder nach Tageszeit

N

Newermaint

Neues Mitglied
Hallo zusammen,

ich habe lange nach einem Programm gesucht, mit dem es möglich ist unter Windows 7 wechselnde Hintergrundbilder einzustellen, wobei ich gerne einstellen möchte, welches Bild zu welcher Tageszeit zu sehen sein soll. Die meisten Programme können das Bild entweder nur beim Systemneustart, an einem neuen Tag oder in bestimmten Zeitintervallen wechseln. Jedoch nicht nicht zu festgelegten Uhrzeiten.
Daher kam ich auf die Idee eine html-Datei zu schreiben, die mir die Hintergrundbilder so anzeigt, wie ich es möchte. Diese wollte ich dann als Hintergrunddatei auf meinen Desktop laden (Auch wenn das jetzt unter Win7 nicht mehr leicht ist, aber das ist eine andere Frage^^).

Hier erstmal soweit mein Script:
---------------------------------------
<html>
<body> blabla </body>

<script type="text/javascript">

var datum = new Date();
var zeit = datum.getHours();
if (5 <= zeit < 8 ) {
document.body.style.backgroundImage = 'url("morgens.jpg")';
}
else if (8 <= zeit < 12) {
document.body.style.backgroundImage = 'url("vormittags.jpg")';
}
else if (12 <= zeit < 14) {
document.body.style.backgroundImage = 'url("mittags.jpg")';
}
else if (14 <= zeit < 17) {
document.body.style.backgroundImage = 'url("nachmittags.jpg")';
}
else if (17 <= zeit < 21) {
document.body.style.backgroundImage = 'url("abends.jpg")';
}
else {
document.body.style.backgroundImage = 'url("nachts.jpg")';
}

</script>
</html>
--------------------------------------------

Leider habe ich damit noch einige Probleme:
1. Mir wird leider zu jeder Tageszeit das erste Bild (morgens.jpg) angezeigt. Habe ich mich da mit den Klammern verwurschtelt?

2. Die Bilder sind bei mir leider alle verschieden groß und werden auch in original-Größe angezeigt.
Da habe ich dieses Script hier gefunden, welches sich jedoch nur auf ein Bild und auch auf die Fenstergröße des verwendeten Browsers bezieht, denke ich. Zudem bin ich kein Fachmann und verstehe leider überhaupt nicht, was dort gemacht wurde:
-------------------------------------
<html><head>
<title>Bildgröße ändern</title>
<script type="text/javascript">
<!--

function Fensterweite()
{
if (window.innerWidth) return window.innerWidth;
else if (document.body && document.body.offsetWidth) return document.body.offsetWidth;
else return 0;
}

function Fensterhoehe()
{
if (window.innerHeight) return window.innerWidth;
else if (document.body && document.body.offsetHeight) return document.body.offsetHeight;
else return 0;
}

/*Überwachung von Netscape initialisieren*/
if(!window.alteWeite && window.innerWidth)
{
window.onresize = neuAufbau;
Weite = Fensterweite();
Hoehe = Fensterhoehe();
}

function neuAufbau()
{
if (Weite != Fensterweite() || Hoehe != Fensterhoehe())
window.history.go(0);
}

//-->
</script>
</head>
<body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0">
<script type="text/javascript">
<!--
/*Überwachung von MS Internet Explorer initialisieren*/
if(!window.Weite && document.body && document.body.offsetWidth)
{
window.onresize = neuAufbau;
Weite = Fensterweite() -50;
Hoehe = Fensterhoehe() -50;
}
//-->
</script>
<script language="Javascript">
<!--
document.write("<img src=dein Bild hier width= "+Weite +" height= "+Hoehe +">");

//-->
</script>

</body></html>
-------------------------------------------------

Weiß jemand hier, wie ich es schaffen könnte, mir das richtige Bild anzeigen zu lassen,
sowie das jeweils aktuell angezeigte Bild in den Bildschirm einzupassen? Meine Auflösung ist 1366x768.

Ich bin dankbar für jede Hilfe!
icon7.gif


Beste Grüße,
Newermaint
 
Solche Vergleiche

Code: 
if (5 <= zeit < 8 ) {

kennt JavaScript meines Erachtens nicht. Du wirst also, wenn Du diese Datei in einem normalen Browser lädst mit Sicherheit eine JavaScript-Fehlermeldung erhalten. Deshalb wird es "woanders" dann auch nicht funktionieren.

Ändere diese Bedingungen also ab, z.B. zu

Code: 
if (5 <= zeit && zeit < 8 ) {

Moderation: Verschoben von HTML zu JavaScript.
 
Vielen Dank schonmal für den Hinweis, threadi. Das wird es gewesen sein.
Eine Fehlermeldung habe ich zwar nicht erhalten, jedoch wurde immer, wie beschrieben, das erste Bild angezeigt.
Ich habe den Fehler korrigiert und jetzt wird zumindest das richtige Bild zur richtigen Zeit angezeigt.

Bleibt leider nur noch die Frage, wie sich die Bilder am besten anpassen lassen. Vielleicht werde ich mir an dieser Stelle die Mühe machen und jedes Bild in Paint passend zuschneiden und abspeichern.
Falls allerdings jemand eine Idee hat, bin ich dennoch dankbar dafür.
Eine theoretische Idee habe ich, jedoch kann ich dies aufgrund mangelnder Kenntnis der Programmiersprache nicht in einen Code bringen:
Bild: Höhe H, Breit B
Ist das Bild im Vergleich zum Bildschirm zu breit oder zu schmal? :
Seitenverhältnis vergleichen: 1633/768 größer oder kleiner als B/H.
1.
Bild ist zu breit: B/H > 1633/768
Das Bild hat die Höhe H. Die Bildschirmhöhe sind 768 Pixel.
Das Bild sollte dann (mit gleichem Verhältnis) gestreckt oder gestaucht werden, damit es 768 Pixel hoch ist (Faktor: 768/H).
Das Bild ist dann breiter als 1633 Pixel.
Dann muss von der Mitte (der Breite) aus ein 1633 Pixel breiter Ausschnitt gewählt werden. Links und rechts wird dann also B'-1633/2 abgeschnitten. B' ist die Breite nach dem Strecken/Stauchen.
ODER
2. Bild is zu schmal: B/H < 1633/768
Das Bild hat die Breite B. Die Bildschirmbreite sind 1633 Pixel.
Das Bild sollte dann (mit gleichem Verhältnis) gestreck oder gestaucht werden, damit es 1633 Pixel breit ist (Faktor: 1633/B). Das Bild ist dann höher als 768 Pixel.
Dann muss von der Mitte (der Höhe) aus ein 768 breiter Ausschnitt gewählt werden. Oben und unten wird dann also H'-768/2 abgeschnitten. H' ist die Breite nach dem Strecken/Stauchen.

Würde mir jemand helfen, das umzusetzen?
 
Dafür gäbe es zwei Möglichkeiten. Media Queries in HTML5 oder die Methoden offsetWidth und offsetHeight in JavaScript.
 
Dass es sogar ganze 2 Methoden gibt, klingt schonmal sehr viel versprechend.
Leider kenne ich weder die eine noch die andere. Da ich Java-Script verwendet habe, wäre mir die zweite vielleicht lieber. Kannst du mir sagen, wie ich diese am besten einbinden kann?
 
Googeln musst du schon selber. ;)

Media Queries dienen dazu, je nach Auflösung unterschiedliche Stylesheets einzubinden, und mit den genannten JS-Methoden lässt sich die Größe des Viewports ermitteln.
 
Hey,
ich habe inzwischen nach den JavaScript Methoden gesucht und auch etwas dazu gefunden, jedoch steige ich da irgendwie nicht ganz durch. Das, was ich über Java weiß, ist leider nur das, was mein Gehirn seit der Schulzeit noch nicht von selbst ausgmistet hat. Was genau macht die Funktion? Ist es nicht irgendwie dasselbe wie Bild.width?
Kann ich nicht sagen, dass die neue Breite eines Bildes gleich der alten, multipliziert mit einem Faktor, sein soll?
Und was würde dann genau mit dem Bild passieren.

<script type="text/javascript">
Bild = new Image();
Bild.src = "Bild1.jpg";
Bild.width = Bild.width*0,8;
Bild.height = Bild.height*0.8;
document.body.style.backgroundImage = Bild;
</script>

Das hier funktioniert leider nicht. Aber rein theoretisch: Würde durch den Faktor 0,8 das Bild in Höhe und Breite gestaucht werden? Und wie kann ich danach anzeigen lassen?

Ich weiß, dass mir offensichtlich die Grundlagen fehlen, aber ich wäre dir dankbar für deine Geduld.
 
Bei deinem o.g. Code wird ein Bild-HTML-Element erzeugt. Und das weißt Du dann einem Hintergrund zu - geht natürlich nicht. Korrekt wäre die Zuweisung zum HTML-Code, z.B. so:

Code: 
document.body.appendChild(Bild);
 
Ok, das ist ebenfalls gut zu wissen.
HTML: 
document.body.style.backgroundImage = 'url("bild.jpg")';
funktioniert aber. Worin liegt der unterschied?

Und zu meiner Frage von oben: Wird das Bild durch das ändern von Width und Height gleichmäßig gestaucht oder wird etwas abgeschnitten?
 
Hey, leider bin ich mit
HTML: 
document.body.appendChild(Bild)
nicht weiter gekommen.

Ich habe aber noch ein bisschen gesucht und ausprobiert und bin dabei jetzt soweit gekommen:

HTML: 
<html>
<head>
<title> Wallpaper </title>
<script type="text/javascript">
function BildNachZeit() {
  var datum = new Date();
  var zeit = datum.getHours();
  if (5 <= zeit && zeit < 8 ) {
       document.getElementById("Bild").src = "img1.jpg";
       document.getElementById("Bild").title = "Bild 1";
       return;
  }
  else if (8 <= zeit && zeit < 12 ) {
       document.getElementById("Bild").src = "img2.jpg";
       document.getElementById("Bild").title = "Bild 2";
       return;
  }
  else if (12 <= zeit && zeit < 15 ) {
       document.getElementById("Bild").src = "img3.jpg";
       document.getElementById("Bild").title = "Bild 3";
       return;
  }
  else if (15 <= zeit && zeit < 18 ) {
       document.getElementById("Bild").src = "img4.jpg";
       document.getElementById("Bild").title = "Bild 4";
       return;
  }
  else if (18 <= zeit && zeit < 22 ) {
       document.getElementById("Bild").src = "img5.jpg";
       document.getElementById("Bild").title = "Bild 5";
       return;
  }
  else {
       document.getElementById("Bild").src = "img6.jpg";
       document.getElementById("Bild").title = "Bild 6";
       return;
  }
}
</script>
</head>
<body>
  <img id="Bild" src="img1.jpg" width="800"  alt="Bild 1" title="Bild 1"><br>
  <a href="javascript:BildNachZeit()">aktuelles Bild</a>
</body>
</html>

Ein Klick auf "aktuelles Bild" zeigt mir dann das richtige Bild an.

Was jetzt noch fehlt wäre folgendes:

1. Mit width=... kann ich ja die genaue Breite des Bildes angeben. Dabei wird auch die Höhe proportional gestreckt. Dann ist das Bild aber höher als mein Bildschirm. Kann man die Position, an der Bild angezeigt werden soll, verändern? zB ausgehend von einer Ecke in x- bzw y-Richtung verschieben? Dann würde ich das Bild soweit nach oben bzw unten verschieben, dass man genau den mittigen Ausschnitt der Höhe zu sehen bekommt.

2. Das Klicken auf den Link möchte ich gern ersetzen. Das Fenster sollte sich am besten selbst aktualisieren, allerdings nichts die ganze Zeit, sondern nur alle 5min oder so. Kann man dafür eine einfache Schleife verwenden, und eine Art pause-funktion einbauen?
Und diese Schleife müsste sich dann auch im <body> Bereich befinden, da ich dort die Funktion BildNachZeit() aufrufe, oder?
 
Code: 
setInterval(function(){
   BildNachZeit()
},300000);

ruft die Funktion alle 5 min. auf. Was den anderen Teil der Frage betrifft, würde ich mal über background-images nachdenken und denen CSS-Klassen zuweisen.

Eine jQuery Abfrage könnte dann in etwa so aussehen:

Code: 
var pic = "image";

for (i=1; i < 7; i++) {
    if($("#Bild").attr("src", pic + i)) {
        $("#Bild").addClass(pic + i);
    }
}
 
Hey, vielen Dank für die Antworten.
Wie genau müsste ich denn diese setIntervall-Funktion einbauen?
Mein Befehl zum Anzeigen des Bildes befindet sich ja im Body-Teil und nicht im Script-Teil.

Was das Verschieben der Grafik angeht, verstehe ich leider nicht genau, was du oben geschrieben hast.
Ich habe dazu nach weiterer Suche diesen kleinen Teil gefunden:
HTML: 
<body>
  <div style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 0px; top: -100px" id="Ebene1">
  <img id="Bild" src="Bild1.jpg" width="1366" border="0"></div>
  <a href="javascript:BildNachZeit()">neues Bild</a>
</body>

Mit top:-100px verschiebe ich das Bild 100Pixel nach oben. Jedoch ist das in diesem Fall nur eine fixe Zahl.
Kann ich statt der -100 auch eine Variable dort einsetzen, der ich vorher einen Wert zugeordnet habe?
HTML: 
var S = -((Bild.width)/1366*(Bild.height)-768)/2
Dann würde es sicher funktionieren, denke ich.
 
Zuletzt bearbeitet:
Natürlich lässt sich alles weiter abstrahieren, aber ich verstehe nicht, warum du es dir so umständlich machst. Bei nur sechs Bildern kennst du doch deren Größen. Du könntest dafür sechs CSS-Klassen schreiben, oder falls du Inline-CSS bevorzugst, die Funktion css() verwenden. Wirf auch die Werte für width und height aus dem img tag. Die werden nur benötigt, falls die Darstellung von der Original-Bildgröße abweichen soll.

.css() – jQuery API

Wären es jetzt 60 oder 600 Bilder, würde es sicherlich Sinn machen, die Breite des Divs zu ermitteln und darauf basierend dynamische Werte für top und left zu erzeugen.

Für den Aufruf der Funktionen setInterval() oder setTimeout() gibt es mehrere Möglichkeiten. Du könntest dein JS am Fuß der Seite platzieren, oder etwas wie

Code: 
$(document).ready(function() {
    setInterval(
        ..........
    );
})

schreiben.

Und binde jQuery ein. Das liefert viele Funktionen für dynamisches Styling und ist bequemer als das sperrige vanilla JS.
 
Hey,
den ersten Abschnitt verstehe ich noch so einigermaßen, wobei ich von css und jQuery keinen Schimmer habe und mich auch da erst länger einlesen müsste.
Ich habe mir den Link nämlich mal angeschaut und stehe vor einem großen Neuland.
Wenn das Einsetzen einer Variable an der Stelle möglich ist, würde ich das gern machen. Leider nur hat es nicht Funktioniert, so, wie ich es versucht habe. Eventuell liegen da einfach ein paar Syntax-Fehler vor?

Ab dem Teil unterhald des ersten Absatzes verstehe ich leider kaum noch ein Wort, tut mir Leid :roll:
Normalerweise bin ich kein Freund von vorgekauten Lösungen, aber wenn du mir eventuell den Teil mit der Intervall-Funktion kurzerhand in das vorhandene Script einbauen könntest, wäre ich dir sehr dankbar.

Das hier das Script, wie ich es im Moment habe:
HTML: 
<html>
<head>
<title> Wallpaper </title>
<script type="text/javascript">
function BildNachZeit() {
  var datum = new Date();
  var zeit = datum.getHours();
  if (5 <= zeit && zeit < 8 ) {
       document.getElementById("Bild").src = "See.jpg";
       document.getElementById("Bild").title = "Bild 1";
       return;
  }
  else if (8 <= zeit && zeit < 12 ) {
       document.getElementById("Bild").src = "mittag.jpg";
       document.getElementById("Bild").title = "Bild 2";
       return;
  }
  else if (12 <= zeit && zeit < 15 ) {
       document.getElementById("Bild").src = "welle.jpg";
       document.getElementById("Bild").title = "Bild 3";
       return;
  }
  else if (15 <= zeit && zeit < 18 ) {
       document.getElementById("Bild").src = "waterfall.jpg";
       document.getElementById("Bild").title = "Bild 4";
       return;
  }
  else if (18 <= zeit && zeit < 22 ) {
       document.getElementById("Bild").src = "Fluss.jpg";
       document.getElementById("Bild").title = "Bild 5";
       return;
  }
  else {
       document.getElementById("Bild").src = "Sternenhimmel.jpg";
       document.getElementById("Bild").title = "Bild 6";
       return;
  }
}
</script>
</head>
<body>
  <div style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 0px; top: -100px" id="Ebene1">
  <img id="Bild" src="See.jpg" width="1366" border="0"></div>
  <a href="javascript:BildNachZeit()">neues Bild</a>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben