| Autor |
Nachricht |
STAN_MAN
Threadersteller
Dabei seit: 20.02.2011
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 20.02.2011 17:46
Titel CSS: background-image - variabel einstellen? |
  |
|
Hallo User,
möchte mich erst einmal KURZ vorstellen.
Bin der Stan; Absolviere Fachabi - Rechnungslegung & Controlling; Strebe eine Ausbildung als Mediengestalter an...
Naja das reicht fürs erste!
Nun zu meiner Frage, zu meinem Problem!
ich versuche grade einen Zufallsbildergenerator in ein CSS-Design einzubinden, leider vergebens!
Hier meine Vorstellung:
Zufallsgen.:
| Code: | <script>
var image = new Array();
image[1] = 'http://img.webme.com/pic/m/muchloads/background2.jpg';
image[2] = 'http://img.webme.com/pic/m/muchloads/background3.jpg';
image[3] = 'http://img.webme.com/pic/m/muchloads/background4.jpg';
image[4] = 'http://img.webme.com/pic/m/muchloads/background5.jpg';
var num = Math.random();
var ran = Math.floor((image.length - 1) * num) + 1;
document.write('<img src="' + image[ran] + '" border="0" style="width: 200px; height: Xpx" />');
</script> |
CSS-body bereich:
| Code: | | body { background-color:#000000; background-repeat: repeat-x; background-position: 0px -0px; background-image:url(http://muchloads.ucoz.de/load/0-0-0-129-20);} *{ padding: 0; margin: 0 auto; } |
Im CSS-Code habe ich den generator als HTML-Datei eingebunden! Leider ließt dieser anscheinend nur Bilderformate wie jpg, png, bmp, etc. -.-
Hat jemand eine Idee, wie man es realisieren könnte?
Danke im Voraus!
Gruß, Stan
|
|
| |
  |
 |
trashmaster
Dabei seit: 20.01.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 20.02.2011 18:16
Titel
|
|
|
Hi Stan und Willkommen im MGi-Forum!
Ich glaube du hast da etwas zu sehr um die Ecke gedacht. Dein Script stellt zwar ein Bild dar, jedoch ist der Pfad zu diesem Script damit nicht automatisch gleich das Bild. Schließlich erzeugt dein Script nur ein HTML-Tag <img> und liefert nicht die Bilddatei aus, wie man es z.B. mit PHP machen könnte.
Eine andere Rangehensweise wäre z.B. dem <body>-Tag deiner HTML-Datei eine zufällige CSS-Klasse mitzugeben. Je nach Klasse könntest du dann via CSS ein anderes Hintergrundbild zuweisen.
| Code: |
body.image1 { background-image:url(background2.jpg); }
body.image3 { background-image:url(background3.jpg); }
...
|
|
|
| |
|
|
|
Anzeige
|
|
|
STAN_MAN
Threadersteller
Dabei seit: 20.02.2011
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 20.02.2011 18:56
Titel
|
|
|
Hm.
Deine Idee mit den verschiedenen CSS-Klassen klang für mich erst ganz logisch und sehr simple.
Allerdings bin ich damit leider nicht viel weitergekommen! >.<
* Ich arbeite im homepage-baukasten, vlcht. kennst du den anbieter? *
Auf jeden Fall, sah meine variante des CSS-Codes so aus:
| Code: | #extraDiv1 {display: none;}
#extraDiv2 {display: none;}
#extraDiv3 {display: none;}
#extraDiv4 {display: none;}
#extraDiv5 {display: none;}
#extraDiv6 {display: none;}
#pre_header {display: none;}
#post_header {display: none;}
#pre_content {display: none;}
#nav_heading{display: none;}
div.header{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
a{ color:#565656; text-decoration: none; font-size:12px;}
a:hover { color: #4A9AF6; font-size: 12px; text-decoration: none;}
a:link { color: #4A9AF6; font-size: 12px; text-decoration: none;}
a:active { color: #4A9AF6; font-size: 12px; text-decoration: none;}
a:visited { color: #4A9AF6; font-size: 12px; text-decoration: none;}
body { background-color:#000000; background-repeat: repeat-x; background-position: 0px -0px; background-image:url(http://img.webme.com/pic/m/muchloads/background2.jpg);} *{ padding: 0; margin: 0 auto; }
body.image2 { background-image:url(http://img.webme.com/pic/m/muchloads/background3.jpg);}
body.image3 { background-image:url(http://img.webme.com/pic/m/muchloads/background4.jpg);}
body.image4 { background-image:url(http://img.webme.com/pic/m/muchloads/background5.jpg);}
#STAN_MAN { margin: auto; width: none; height: none; background-image:url(..);}
#nav_container{ display:none;} |
Was genau habe ich nicht beachtet bzw. wo habe ich einen Fehler gemacht, dass sich die CSS-Class nicht variiert!?
Gruß, Stan
|
|
| |
|
|
trashmaster
Dabei seit: 20.01.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 20.02.2011 20:20
Titel
|
|
|
Nee den kenne ich nicht 
Vom CSS her ist das schon alles richtig so.
Nun brauchst du nurnoch ein passendes Javascript, welches die Body-Klasse bestimmt.
| Code: | var num = Math.ceil(Math.random() * 4);
document.body.className = "image" + num; |
Diesen Code entweder direkt via <script>-Tag in die HTML-Datei schreiben, oder als externe .js-Datei einbinden.
|
|
| |
|
|
STAN_MAN
Threadersteller
Dabei seit: 20.02.2011
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 22.02.2011 18:58
Titel
|
|
|
Tja, anscheinend muss ich mich jetzt eher mit JS auseinandersetzen, damit ich die Struktur bzw. den strukturierten Aufbau des Codes verstehe! >.<
Sorry, aber wäre vlcht. nett wenn du beim script nochmals für (Anfänger) erklären könntest!?
Weil, ich habe den Code zuerst so, wie du es mir geschickt hast in die HTML einzubinden und aber auch einige Umschreibungen bzw. Zuschreibungen auszuführen, aber höchstwahrscheinlich alles Falsch gewesen ^^
Aber Studieren geht übers Probieren! 
Also,
| Code: | <script>
var num = Math.ceil(Math.random() * 4);
document.body.className = "image" + num;
</script> |
Das war mein erster Versuch! =)
mein zweiter >.<
| Code: | <script>
var body = new Array();
body[1] = 'http://img.webme.com/pic/m/muchloads/background2.jpg';
body[2] = 'http://img.webme.com/pic/m/muchloads/background3.jpg';
body[3] = 'http://img.webme.com/pic/m/muchloads/background4.jpg';
body[4] = 'http://img.webme.com/pic/m/muchloads/background5.jpg';
var num = Math.ceil(Math.random() * 4);
document.body.className = "image" + num;
</script> |
Wenn möglich, wäre auch eine kleine Stellungshilfe bezüglich der jeweiligen Funktionen hilfreich!?
Eine entsprechende Seite mit Selbstlernhilfe wäre super!? 
DANKE IM VORAUS! =)
Gruß, Stan
|
|
| |
|
|
vanilo
Dabei seit: 22.02.2011
Ort: Europa
Alter: -
Geschlecht: 
|
Verfasst Di 22.02.2011 19:25
Titel
|
|
|
Guten Abend! Mir ist der HPBK ein bekanntes Pflaster, da ich dort selber einmal lange Zeit war. Ich hoffe ich habe dein Ansuchen richtig verstanden, dass du das Hintergrundbild der ganzen Webseite dynamisch wechseln willst?
Dieser Thread im Webme-Forum - http://www.homepage-baukasten.de/forum/viewtopic.php?t=128545 - könnte dir vielleicht weiterhelfen. Unten steht ein Script von dem User "philipp7" was dem Fragesteller scheinbar geholfen hat.
Hinweis: Dieses Script benötigt jQuery!
Freundliche Grüße
- vanilo
Zuletzt bearbeitet von vanilo am Di 22.02.2011 19:27, insgesamt 3-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
CSS background-image mit em ?
CSS background-image
background-image & FF
[CSS] alt-tag für background-image?
[CSS] Background-image INE
ie 6 background image problem
|
|
Willkommen auf dem Portal für Mediengestalter
