zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Hintergrundgrafik per Auflösungsabhänigkeit dynamisch ändern?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.11.2010, 12:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.10.2010
Beiträge: 18
hajo808 befindet sich auf einem aufstrebenden Ast
Standard Hintergrundgrafik per Auflösungsabhänigkeit dynamisch ändern?

Hallo!

Ich versuche folgendes umzusetzen:

Ein Besucher mit einer Auflösung von 1024x768 bekommt beim Besuch der Seite eine Hintergrundgrafik mit dieser Auflösung (1024x76.
Ein weiterer Besucher mit einer höheren Auflösung als 1024x768 aber kleiner als 1680x1050 bekommen das nächst höhere, 2. Bild und alle mit einer Auflösung von mehr als 1680x1050 bekommen dann das 3. und letzte Bild.

Folgendes habe ich in die index.html gepackt.

Code:
<script language="javascript">
var scr_width = screen.width;
var scr_height = screen.height;
if (scr_width <= 768)
	document.write(scr_width + " x " + scr_height); 

if (scr_width > 768 && screen.width < 1024)
	document.write(scr_width + " x " + scr_height);

if (scr_width == 1024)
	document.write(scr_width + " 0 " + scr_height);
	
if (scr_width == 1024)	
	document.write('<link rel="stylesheet" href="css/style.css" type=0"text/css">');
		
document.write(scr_width + " x " + scr_height); 
</script>

<script language="javascript">
var scr_width = screen.width;
var scr_height = screen.height;
if (scr_width <= 600)
	document.write(scr_width + " x " + scr_height); 

if (scr_width > 600 && screen.width < 1280)
	document.write(scr_width + " x " + scr_height);

if (scr_width == 1280)
	document.write(scr_width + " 0 " + scr_height);
	
if (scr_width == 1280)	
	document.write('<link rel="stylesheet" href="css/style1.css" type=0"text/css">');
		
document.write(scr_width + " x " + scr_height); 
</script>

<script language="javascript">
var scr_width = screen.width;
var scr_height = screen.height;
if (scr_width <= 960)
	document.write(scr_width + " x " + scr_height); 

if (scr_width > 960 && screen.width < 1280)
	document.write(scr_width + " x " + scr_height);

if (scr_width == 1280)
	document.write(scr_width + " 0 " + scr_height);
	
if (scr_width == 1280)	
	document.write('<link rel="stylesheet" href="css/style2.css" type=0"text/css">');
		
document.write(scr_width + " x " + scr_height); 
</script>
In den jeweiligen css Dateien wurden dann die vorbereiteten Hintergrundgrafiken angegeben.

Also ich es dann getestet habe, greift nur das erste Bild. Stelle ich die Auflösung höher, bleibt trotzdem das erste Bild.
Weiss jemand wie ich den Ablauf korrekt gestalte?

Gr
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.11.2010, 12:34
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Warum? Die größe des Monitors ist doch unabhängig davon, wie groß das Browserfenster ist. Je größer die Auflösung umso wahrscheinlicher, ist es dass das Fenster eher kleiner ist, da Leute mit grossen Monitoren (resp. Auflösung) gerne mehrere Anwendungen nebeneinander offen haben.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.11.2010, 12:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.10.2010
Beiträge: 18
hajo808 befindet sich auf einem aufstrebenden Ast
Standard

Die css Anweisung für den Body lautet wie folgt.

background-color: white;
background-image: url(../images/1280x600.jpg);
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed;

Wenn ich das Bild für eine Auflösung über 2000px optimiere, sehen User mit einer Auflösung von 1024x768 nur den Himmel anstatt noch ein bischen Landschaft. (Bild mit Himmel und Landschaft).
Sobald ich das Bild kleiner mache, sehen die Leute mit größer Auflösung zwar auch das Bild, der Rest bleibt aber weiss bzw. die Farbe die vergeben wurde.
Gr
Mit Zitat antworten
  #4 (permalink)  
Alt 11.11.2010, 17:22
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Hallo

Du willst ein 100% Hintergrundbild bei allen Monitor Auflösungen?
Dazu braucht man kein js. Schau mal hier:
Scaling Fake BG Image

Gruß Manfred
Mit Zitat antworten
  #5 (permalink)  
Alt 11.11.2010, 17:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.10.2010
Beiträge: 18
hajo808 befindet sich auf einem aufstrebenden Ast
Standard

Hallo!

Ja da bin ich auch schon drüber gestolpert. Gefällt mir aber nicht wirklich. Schon alleine das mit der Skalierung.

Edit:

Ich habe es nun mit einer window.outerHeight Abfrage hinbekomen.

Gr

Geändert von hajo808 (12.11.2010 um 12:01 Uhr)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Probleme mit HTML-Mail (CSS-definierte Hintergrundgrafik fehlt) suppenelse CSS 3 17.09.2010 16:17
Hintergrundgrafik und flexible Spaltenbreite Teaser CSS 1 27.11.2009 15:52
Per Ajax ein JS Array aus Datenbank befüllen zur weiterverwendung per JS stravid Javascript & Ajax 30 24.11.2008 13:52
mod_rewrite Performance bei vielen Regeln fox Serveradministration und serverseitige Scripte 7 25.09.2008 02:02
Ist absoluter container mit Höhe der ganzen Seite möglich? amroth.calaelen CSS 8 15.06.2006 15:57


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:06 Uhr.