|
Autor
|
Thema: wechselnde Farben (Website) (6201 mal gelesen)
|
smb
Mitglied
   Beiträge: 1176
Registriert: 02.08.2001 zu viele
|
erstellt am: 16. Nov. 2006 13:55  <-- editieren / zitieren -->   Unities abgeben:          
|
predy
Mitglied
Industriedesigner
Beiträge: 777
Registriert: 05.07.2003 CATIA V5R16 SP3 64Bit
Windows XP Pro X64 Edition
2x Intel Xeon 3.6GHz 4GB RAM
Nvidia Quadro FX 3450/4000 SDI 256MB
|
erstellt am: 16. Nov. 2006 14:00 <-- editieren / zitieren --> Unities abgeben: Nur für smb 
hallo, also ich würde sagen, das würde sich mit hilfe von javascript und verschiedene css-files, die die farbestimmung enthalten, bewerkstelligen lassen. Leider bin ich nicht unbedingt der javascriptcoder, meine fähigkeiten beschränken sich darauf, vorhandene codeschnipsel zu editieren und in eine website einzubinden  Ich werde mal zuhause schauen, ob ich eine paar vernünftige links zum thema finden kann... gruss predy Eine Antwort auf diesen Beitrag verfassen (mit Zitat/Zitat des Beitrags) IP |
tunnelbauer
Ehrenmitglied V.I.P. h.c.
Bauingenieur
Beiträge: 7085
Registriert: 13.01.2004 ich hab eh keine Probleme damit...
|
erstellt am: 16. Nov. 2006 14:17 <-- editieren / zitieren --> Unities abgeben: Nur für smb
|
predy
Mitglied
Industriedesigner
Beiträge: 777
Registriert: 05.07.2003 CATIA V5R16 SP3 64Bit
Windows XP Pro X64 Edition
2x Intel Xeon 3.6GHz 4GB RAM
Nvidia Quadro FX 3450/4000 SDI 256MB
|
erstellt am: 16. Nov. 2006 14:36 <-- editieren / zitieren --> Unities abgeben: Nur für smb
|
Teddibaer
Ehrenmitglied V.I.P. h.c.
Struktur-Experte
Beiträge: 2125
Registriert: 09.02.2004
|
erstellt am: 16. Nov. 2006 14:45 <-- editieren / zitieren --> Unities abgeben: Nur für smb
Hätte noch einen OleOleSuper-PHP-Trick, umständlich wie Sau, aber geht! Hier das Prinzip (Code werde ich nachreichen): Farbe ist nichts anderes als dieses "#ffffff". Ein kleines PHP Fragment liest mittels fopen() eine Datei color.txt zufällig und zeilenweise aus.
Pro Zeile steht ein Farbwert, der dann ausgelesen und in den Quelltext wandert. Bei jedem aktualisieren wird das dann geändert. Auf meiner Homepage bsw. habe ich somit "den dummen Spruch des Tages" eingebunden. Aus einer einfachen Textdatei (in jeder Zeile steht ein Spruch) wird wie oben beschrieben verfahren. Das klappt echt gut. ------------------
Gruß, der Teddibaer Besucht mich doch einmal ... oder ... auch zweimal ... 
-----------------------------------------------------------------
So Sechs wie mir Fünf gibt's kei' Vier, weil mir Drei die Zwei Einzigste' sin'.  [Diese Nachricht wurde von Teddibaer am 16. Nov. 2006 editiert.] Eine Antwort auf diesen Beitrag verfassen (mit Zitat/Zitat des Beitrags) IP |
smb
Mitglied
Beiträge: 1176
Registriert: 02.08.2001 zu viele
|
erstellt am: 17. Nov. 2006 07:37 <-- editieren / zitieren --> Unities abgeben:
|
benwisch
Mitglied
Bautechniker, CAD-Konstrukteur
Beiträge: 375
Registriert: 01.02.2001
|
erstellt am: 17. Nov. 2006 18:26 <-- editieren / zitieren --> Unities abgeben: Nur für smb
Hallo zusammen, Zitat:
ich möchte, dass bei jedem Neuladen meiner Website die Farben
gewechselt werden. Natürlich möchte ich nur einige Farben definieren
und was beim ersten Besuch geladen wird, soll der "Zufall" entscheiden.
Ich habe aber keine Ahnung, auch nicht nach was ich googlen soll.
Bitte um Hilfe
. Wie du bereits gelesen hast, gibt es eine Menge Tipps im Internet, jedoch beschränken sie die meisten nur auf die Hintergrundfarbe des Dokuments. Ich will dir hier an einem sehr einachen Beispiel zeigen, wie man auf bestimmte Html-Elemente zugreifen kann. Also, wir wollen die Hintergrundfarben einer Tabelle die aus 1 Zeile und 3 Spalten besteht zufällig ändern. Dabei sollen nur bestimmte Farben zum Einsatz kommen und falls JavaScript deaktiviert ist, sollen jeweils nur bestimmte Farben aktiv sein. Das HTML-Grundgerüst
Code:
<!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" />
<meta name="generator" content="Adobe GoLive" />
<title>Test Zufalls-Farb-Werte</title>
<style type="text/css" media="screen"><!--
#LinksOben { background-color: #f00000; }
#MitteOben { background-color: #0088b9; }
#RechtsOben { background-color: green; }
--></style>
</head> <body> <table width="500" border="1" cellspacing="2" cellpadding="3">
<tr>
<td id="LinksOben">Farbe Links</td>
<td id="MitteOben">Farbe Mitte</td>
<td id="RechtsOben">Farbe Rechts</td>
</tr>
</table>
</body>
</html>
Alle drei Spalten erhalten über CSS und mittels ID ihre Hintergrundfarbe.Nun schreiben wir ein kleines JavaScript, das so aussehen kann...
Code:
// wir definieren die zul. Farben für die jeweiligen Spalten
// und bedienen uns mit Arrays
var ColorLeft = new Array("#4C0000","#C63939","#CF3030","#D92626","#E21D1D","#EC1313","#F50A0A","#FF0000","#FF0000");
var ColorMiddle = new Array("#00004C","#000066","#000080","#000099","#0000B3","#0000CC","#0000E6","#0000FF","#1A1AFF");
var ColorRight = new Array("#699669","#5AA55A","#4BB44B","#3CC33C","#2DD22D","#1EE11E","#0FF00F","#00FF00","#00FF00");// hier nun die Funktion, die aus Ganzzahlen durch Übergabe jeweils einer Untergrenze
// und einer Obergrenze eine zufällige Ganzzahl zurückgibt
function GetRandomNumber (LowerLimit,UpperLimit)
{
var tmp = UpperLimit - LowerLimit;
return (Math.round(LowerLimit + Math.random()* tmp));
} // Nun erzeugen wir den "zufälligen" Farbwert durch
// Bestimmung einer zuf. Position im Array-Vektor
// dabei gilt: der erste Vektor im Array ist 0 !!
var RndNewColorLeft = ColorLeft[GetRandomNumber(0,8)];
var RndNewColorMiddle = ColorMiddle[GetRandomNumber(0,8)];
var RndNewColorRight = ColorRight[GetRandomNumber(0,8)]; // setzen der neuen Farbwerte
document.getElementById("LinksOben").style.backgroundColor = RndNewColorLeft;
document.getElementById("MitteOben").style.backgroundColor = RndNewColorMiddle;
document.getElementById("RechtsOben").style.backgroundColor = RndNewColorRight;
Peng, das wars!
Wichtig hierbei ist, daß man im JavaScript richtig notiert, also aus der CSS-Eigenschaft background-color wird in JS backgroundColor. Der Bindestrich entfällt, das zweite Wort wird angehängt und der erste Buchstabe dabei groß geschrieben.
Des weiteren muß das setzen der Werte, also document.getElementById... nach dem erstellen der Tabelle erfolgen, da sonst das Objekt backgroundColor für JS nicht vorhanden ist! Das sind dann die klassischen Fehlermeldungen wie "XY has no properties".
Sollte nun JS deaktiviert sein, wird der Farbwert im CSS gesetzt und das Script im Bodybereich wird einfach ignoriert. Hier nochmal der vollständige Code (ohne Kommentare) zum copy and pasten :)
Code:
<!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" />
<meta name="generator" content="Adobe GoLive" />
<title>Test Zufalls-Farb-Werte</title>
<style type="text/css" media="screen"><!--
#LinksOben { background-color: #f00000; }
#MitteOben { background-color: #0088b9; }
#RechtsOben { background-color: green; }
--></style>
</head> <body>
<table width="500" border="1" cellspacing="2" cellpadding="3">
<tr>
<td id="LinksOben">Farbe Links</td>
<td id="MitteOben">Farbe Mitte</td>
<td id="RechtsOben">Farbe Rechts</td>
</tr>
</table>
<script type="text/javascript"><!--
var ColorLeft = new Array("#4C0000","#C63939","#CF3030","#D92626","#E21D1D","#EC1313","#F50A0A","#FF0000","#FF0000");
var ColorMiddle = new Array("#00004C","#000066","#000080","#000099","#0000B3","#0000CC","#0000E6","#0000FF","#1A1AFF");
var ColorRight = new Array("#699669","#5AA55A","#4BB44B","#3CC33C","#2DD22D","#1EE11E","#0FF00F","#00FF00","#00FF00"); function GetRandomNumber (LowerLimit,UpperLimit)
{
var tmp = UpperLimit - LowerLimit;
return (Math.round(LowerLimit + Math.random()* tmp));
} var RndNewColorLeft = ColorLeft[GetRandomNumber(0,8)];
var RndNewColorMiddle = ColorMiddle[GetRandomNumber(0,8)];
var RndNewColorRight = ColorRight[GetRandomNumber(0,8)]; document.getElementById("LinksOben").style.backgroundColor = RndNewColorLeft;
document.getElementById("MitteOben").style.backgroundColor = RndNewColorMiddle;
document.getElementById("RechtsOben").style.backgroundColor = RndNewColorRight; //-->
</script>
</body> </html>
Zum Thema Zufallszahlen und Generierung solcher Zahlen in einem bestimmten Bereich, kann sich gerne meinen Beitrag über Zufallszahlen in AutoLISP durchlesen --> *KLICK*
Vorsicht, etwas schwere Kost ------------------
CADmaro.de Eine Antwort auf diesen Beitrag verfassen (mit Zitat/Zitat des Beitrags) IP |
predy
Mitglied
Industriedesigner
Beiträge: 777
Registriert: 05.07.2003 CATIA V5R16 SP3 64Bit
Windows XP Pro X64 Edition
2x Intel Xeon 3.6GHz 4GB RAM
Nvidia Quadro FX 3450/4000 SDI 256MB
|
erstellt am: 17. Nov. 2006 23:45 <-- editieren / zitieren --> Unities abgeben: Nur für smb
jemand, der sich so viel arbeit macht und so direkt hilft, der verdient mehr als zehn punkte  ich kanns zwar im moment nicht brauchen, aber es ist gut zu wissen, dass man solche nützliche codeschnipsel zur hand hat, wenn man sie braucht. gruss predy
Eine Antwort auf diesen Beitrag verfassen (mit Zitat/Zitat des Beitrags) IP |
| Anzeige.:
Anzeige: (Infos zum Werbeplatz >>)
 |
Foren auf CAD.de (alle Foren)
| 
