[TYPO3-german] Jede Auflösung eigene CSS Klasse für body-Tag

Thu Jan 31 23:38:13 CET 2008

Hallo

OK, also wie gesagt, selber habe ich sowas (Auflösungsabhängige CSS
Styles) noch nicht gemacht, aber mein Ansatz wäre vielleicht (unabhängig
von Typo3):

Per css halt body { background: url("default.jpg"); } setzen, also ein
Standardbild, falls der Client kein JS hat.
Dann per JavaScript Auflösung abfragen, und je nachdem halt das
Hintergrundbild setzen.

Ich habe mal schnell ein ganz bisschen JavaScript zusammengeschmiert,
wenn ich JSEclipse glauben kann, sollte das (nur) mit Netscape 4
aufwärts funktionieren, also hier im Firefox geht's.

So sieht's aus:

//Datei: js/resolution.js
function res() {
	if(window.outerWidth > 1024) {
		document.getElementsByTagName("body")[0].style.backgroundImage =
"url(1024.png)";
	}	
}

passendes HTML dazu:

<?xml version="1.0" encoding="UTF-8" ?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<script type="text/javascript" src="js/resolution.js"></script>
</head>
<body onload="res()" style="background: url(default.jpg);">
<p>

 </p>
</body>
</html>

Funktioniert hier einwandfrei. Abhängig von der Browserfenstergröße wird
das Bild 1024.png oder default.png angezeigt.
Zu tun wäre da:
Ob outerWidth nun das richtige ist, oder ob innerWidth besser ist oder
was auch immer weiß ich nicht genau. Ausprobieren ;)
Achja, und IE fähig gemacht werden muss das auch.
Nun, und das dann halt auch noch in Typo3 bzw TypoScript hauen.

Hilft dir das? :)
Auf Wunsch schick ich hier auch gern gezippt die 4 Dateien per PM.

Gruß
Elmar

-- 
Gerade läuft: Breed - "The Lucky Ones" - Breed