Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag03.06.2011 um 09:25 (UTC)    
Titel: Design auf Knopfdruck Farbe ändern lassen?

Hey,
ich weiß das es geht und hab auch vor gefühlten 20 Jahren mal ein Tutorial dazu hier gefunden dieses finde ich jetzt leider nicht wieder auch weiß ich noch das ich damals damit nicht klar gekommen bin, falls einer mehr weiß und mir sowas sogar machen könnte wäre das super!

Fonkh
Beitrag07.06.2011 um 04:40 (UTC)    
Titel:

Hi - im Baukasten - hmmm - es gab mal Headeränderung und so
also am einfachsten, wenn auch am Aufwendigsten ist es mehrere Websites - absolut identisch zu machen nur jede in einer anderen Farbe und dann kann man switchen über kleine verlinkte Farbbuttons.
______________
Ciao Michael
Wenn man keine Ahnung hat, einfach mal fragen!


No Support via PN, E-Mail or Messenger - only here : FORUM


Zuletzt bearbeitet von success4you am 07.06.2011, 05:44, insgesamt einmal bearbeitet
Beitrag07.06.2011 um 12:47 (UTC)    
Titel:

Ich weiß das man es so mchen kannjedoch gefällt es mir nicht gefühlte 20 Webseiten mit anderen Titeln zu haben. Ich hab inzwischen das Tutorial gefunden weiß aber leider nicht was genau ich tun muss. Kann mir jemand helfen?
Hier der Link zum Tutorial:
http://www.homepage-baukasten.de/forum/viewtopic.php?t=107191&highlight=habbomove
______________
Beitrag07.06.2011 um 14:08 (UTC)    
Titel:

Hi -- hier ist ja das eigentliche Tut
http://www.homepage-baukasten.de/forum/viewtopic.php?t=67854
das Problem ist, das das javascript weg ist - alle Buttuns,etc . weg sind - was nicht das Problem wäre die Designs mit Buttons zu füllen
aber das Javascript fehlt und das ist die Grundlage für den Wechsel.

Das ganze hat Christof gemacht - die heissen heute nicht mehr about-pc sondern haben einen Blog gemacht http://www.servaholics.de/

leider sind die damals alle weg, als webme kam - und haben auch ihre Seiten gelöscht oder gelöscht bekommen

aber frage doch da mal an bei servaholics - der hat das script bestimmt noch.
______________
Ciao Michael
Wenn man keine Ahnung hat, einfach mal fragen!


No Support via PN, E-Mail or Messenger - only here : FORUM
Beitrag08.06.2011 um 22:11 (UTC)    
Titel:

Hab mal schnell was geschrieben, ist ungetestet müsste aber gehen.

Zitat:

<script type="text/javascript">
function changeColor() {
document.getElementsByTagName("body")[0].style.backgroundColor="#XXXXXX";
}
</script>


XXXXXX: Hintergrundfarbe nach ausführen des scriptes!


Zuletzt bearbeitet von mynop am 08.06.2011, 23:15, insgesamt einmal bearbeitet
Beitrag09.06.2011 um 17:10 (UTC)    
Titel:

Es soll ja das ganze Design geändert werden nich nur eine farbe Smile
______________
Beitrag09.06.2011 um 18:01 (UTC)    
Titel:

Schau mal im Titel
Zitat:
Design auf Knopfdruck Farbe ändern lassen?


Wenn das ganze Design ändern willst geht das vom Prinzip her genauso!


Zuletzt bearbeitet von mynop am 09.06.2011, 22:13, insgesamt einmal bearbeitet
Beitrag09.06.2011 um 20:45 (UTC)    
Titel:

vom Prinzip her?
Ich bin leider kein Profi im Bereich Java nd der gleichen nichtmal Anfänger würde ich mich nennen deshalb wäre eine genauere Beschreibung wahrscheinlich hilfreich.
______________
Beitrag10.06.2011 um 00:57 (UTC)    
Titel:

Dann versuchen wir es mal (Ich mach es mal ein bischen ausführlicher, sonst dürfte es schwer werden für dich):

Zitat:

function changeCSS()
{
<!-- Hier kommen die Weiteren Anweisungen rein -->
}

Grundgerüst einer jeden Javascript Funktion/Methode. Jenachdem steht zwischen "(" und ")" noch ein Übergabeparameter und am Ende ein Rückgabewert, wird hier allerdings nicht benötigt .

Zitat:

for (var i = 0; i < document.getElementsByTagName("Tag").length; i++)
{
document.getElementsByTagName("p")[i].style.color = "#XXXXXX";
document.getElementsByTagName("p")[i].style.border = "type color Xpx";
document.getElementsByTagName("p")[i].style.backgroundColor = "#XXXXXX";

<!-- WEITERE ATTRIBUTE -->

}

Tag, welcher geändert werden soll
Attribut, welches geändert werden soll
Hiermit werden die CSS-style attribute aller Elemente, vom Typ <TagName> geändert (Im Beispiel die "<p>" tags).
Funktioniert mit jedem beliebigen tag und Css Attribut analog.


So jetzt muss ich zugeben wirds vielleicht doch etwas schwerer. In Javascript gibt es keine Funktion getElementsByClassName, da class ein belegtes keyword ist. Einige Browser unterstützen das zwar, ist allerdings kein Standard.
Ein wirkliches Problem ist es aber auch nicht müssen wir uns die Methode halt selbst schreiben. Wobei wir hier auch wieder etwas unangenehmes haben, Microsoft und sein toller super Browser machen nämlich mal wieder ihr eigenes Ding, dazu aber gleich mehr.
Die folgende Funktion durchsucht den gesamten DOM - Baum oder anderst ausgedrückt, das ganze Html Dokument, nach tags, die class="gesuchteKlasse" haben und gibt all diese Elemente an die aufrufende Funktion zurück.
Zitat:

function getElementsByClassName(classToFind) <===Funktionskopf kennen wir ja schon von vorhin, und siehe da, hier ist ja auch der eben angesprochene Übergabeparameter. In diesem Fall classToFind, wie der Name schon sagt, ist das der Name der gesuchten Klasse.
{ // jetzt legen wir uns die Variablen an, die wir gleich benötigen, das // könnten wir theoretisch auch erst dann machen, wennn wir sie wirklich // brauchen, ich hab mir aber angewöhnt die Variablen am Anfang zu // deklarieren, da in den C Sprachen eine Deklaration nur am Anfang möglich // ist.
var elements;
var located = new Array(); <== Ein Array ist vereinfacht ausgedrückt, ein Objekt in dem mehere gleiche Dinge gespeichert werden
var i;
var j = 0;
var tempstr;

// Jetzt zu der besonderheit von Microsoft. Der IE ermöglicht den zugriff auf alle // Elemente, über document.all. Daher Fragen wir jetzt ob dies möglich ist.
if(document.all)
elements = document.all; <== Wenn es möglich ist speichern wir alle Elemente in der Variablen elements, diese ist also auch ein Array. Ist es nicht möglich, benutzen wir den Zugriff auf die Elemente, den die anderen Browser bieten.
else
elements = document.getElementsByTagName("*");

// So jetzt müssen wir noch schauen welche Elemente zu der gesuchten // Klasse gehören, diese Speichern wir dann in unserem Array located
for(i = 0; i < elements.length; i++)
{
if(elements[i].className.indexOf(class_name) != -1)
{
tempstr = ","+elements[i].className.split(" ").join(",") + " , ";

if(tempstr.indexOf(","+class_name+",") != -1)
{
located[j]=elements[i];
j++;
}
}
}

// Zu guter letzt geben wir jetzt das Array mit den gefundenen Elementen, also // located zurück.
return located;
}

...da wir uns die benötigte Funktion gerade gechrieben haben können wir in unserer eigentlichen funktion changeCSS, diese jetzt wieder analog zu getElementsByTagName aufrufen:
Zitat:

for (var i = 0; i < document.getElementsByClassName("p").length; i++) {
document.getElementsByClassName("a")[i].style.border = "typ color XXpx";
document.getElementsByClassName("a")[i].style.backgroundColor = "#XXXXXX";
document.getElementsByClassName("a")[i].style.color = "#XXXXXX";
document.getElementsByClassName("a")[i].style.fontSize = "XX%";

<!-- WEITERE ATTRIBUTE -->

}

class, welche geändert werden soll
Attribut, welches geändert werden soll
Hiermit werden die CSS-style attribute aller Elemente einer class geändert (Im Beispiel die "class="a"" ).
Funktioniert mit jeder beliebigen class und jedem Css Attribut analog.

Zitat:

document.getElementById("ID_DES_ELEMENTES").style.backgroundColor="#XXXXXX";

<!-- WEITERE ATTRIBUTE -->


Das gleiche wie zuvor, hier werden allerdings nur die Attribute des Elementes mit der id="ID_DES_ELEMENTES" geändert.
Daher auch keine Schleife, eine ID einzigartig ist.

So und zum Schluss mal noch nen kompletten Sourcecode (Ist ungetestet, sollte aber gehen vorrausgesetzt ich hab mich nicht vertippt!):
Zitat:

<script type="text/javascript">
function getElementsByClassName(class_name)
{
var elements;
var located = new Array();
var i;
var j = 0;
var tempstr;

if(document.all)
elements = document.all;
else
elements = document.getElementsByTagName("*");

for(i = 0;i < elements.length; i++)
{
if(elements[i].className.indexOf(class_name) != -1)
{
tempstr = ","+elements[i].className.split(" ").join(",") + " , ";

if(tempstr.indexOf(","+class_name+",") != -1)
{
located[j]=elements[i];
j++;
}
}
}

return located;
}

function changeCSS()
{
var i;

for (i = 0; i < document.getElementsByTagName("Tag").length; i++)
{
document.getElementsByTagName("p")[i].style.color = "#XXXXXX";
document.getElementsByTagName("p")[i].style.border = "type color Xpx";
document.getElementsByTagName("p")[i].style.backgroundColor = "#XXXXXX";

<!-- WEITERE ATTRIBUTE -->

}

for (i = 0; i < document.getElementsByClassName("p").length; i++)
{
document.getElementsByClassName("p")[i].style.border = "typ color XXpx";
document.getElementsByClassName("p")[i].style.backgroundColor = "#XXXXXX";
document.getElementsByClassName("p")[i].style.color = "#XXXXXX";
document.getElementsByClassName("p")[i].style.fontSize = "XX%";

<!-- WEITERE ATTRIBUTE -->

}

document.getElementById("ID_DES_ELEMENTES").style.backgroundColor="#XXXXXX";

<!-- WEITERE ATTRIBUTE -->

}
</script>


So ich hoffe das war halbwegs verständlich, wenn de Fragen hast, kannst mich gerne noch fragen. Ansonsten wünsch ich dir viel spaß damit! Mr. Green[/quote]


Zuletzt bearbeitet von mynop am 10.06.2011, 02:01, insgesamt 2-mal bearbeitet
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de