Design per Link verändern u. Funktion für Iframe-Steuerung?
0 
rfb
0 Felix Riesterer
Design per Link verändern u. Funktion für Iframe-Steuerung?
Hiho,
ich habe meine Homepage fast fertig, mir fehlt jedoch eine Funktion zum Wechseln des Designs.
Es gibt zwei <a>-Elemente, klickt man auf einen dieser, wird der Name des "class" in alle <td>-Tags geändert.
Beispiel:
- Klickt man auf "Design 1" (<a>) -> so wird vom ersten <td>-Tag die class="design1_head" durch class="designmodern_head" ersetzt.
Dies würde dann bei allen <td>-Tags passieren (Class "design1_body" durch "designmodern_body", Class "design1_menue" durch "designmodern_menue" usw...).
- Klickt man auf "Design Modern" (<a>) -> so wird genau das selbe gemacht, jedoch ändern sich die Namen von "designmodern_..." in "design1_..." zurück.
__________
Falls dies wichtig sein könnte:
<html>
<head>
<style="text/css"
design1_head {
background-image: url('design1_head.png');
}
designmodern_head {
background-image: url('designmodern_head.png');
}
</style>
</head>
<body>
<table>
<tr> ...
<td class="design1_head"> </tr>
<tr> ...
<td class="design1_body"> ...
...
und so weiter
...
</tr>
</table
</body>
</html>
__________
So und dann hätte ich noch eine Frage, ob es eine Funktion gibt, bei Öffnung eines PopUps deren <iframe>-Inhalt zu bestimmen, also bei gewählten Link <a> meinetwegen die Seite "beispiel1" <iframe> im PopUp zu laden.
Würde mich über Antworten freuen.
vielen Dank im voraus,
CJ
-
Moin
ganz ehrlich:
im ersten Abschnitt vermisse ich überhaupt eine Frage.
und den zweiten versteh' ich nicht.Gruß
rfb -
Lieber Chris,
mir fehlt jedoch eine Funktion zum Wechseln des Designs.
das ist zwar ne nette Spielerei, aber ich denke nicht, dass Dir diese Funktion wirklich "fehlt"!
Es gibt zwei <a>-Elemente, klickt man auf einen dieser, wird der Name des "class" in alle <td>-Tags geändert.
Dieses Vorgehen ist extrem umständlich und sinnfrei!
Beispiel:
<html>
<head>
<style="text/css"design1_head {
background-image: url('design1_head.png');
}designmodern_head {
background-image: url('designmodern_head.png');
}</style>
</head>Ja, so geht das wirklich nicht. Aber so wird es gehen:
1.) lagere Dein Stylesheet in eine externe Datei aus!
2.) lege für diverse Styles diverse CSS-Dateien an! (z.B. default.css, modern.css, etc.)
3.) Style-Wechsel gelingt mit Javascript-gesteuerter Änderung des href-Attributs im link-Element, das Dein Stylesheet einbindet.Noch Fragen?
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
Hiho,
... Aber so wird es gehen:
1.) lagere Dein Stylesheet in eine externe Datei aus!
2.) lege für diverse Styles diverse CSS-Dateien an! (z.B. default.css, modern.css, etc.)
3.) Style-Wechsel gelingt mit Javascript-gesteuerter Änderung des href-Attributs im link-Element, das Dein Stylesheet einbindet.Noch Fragen?
Liebe Grüße aus Ellwangen,
Felix Riesterer.
aha... das würde heißen, das ich in jede CSS-Datei diesen Teil
<style>
...
</style>reinschreiben müsste, um anschließend mit <a href="default.css"> diesen laden zu können?
Müsste irgendwas an der Hauptseite verändert werden? Oder kann ich das ganze an einem Beispiel sehen?
-
Lieber Chris,
aha... das würde heißen, das ich in jede CSS-Datei diesen Teil
<style>
...
</style>http://de.selfhtml.org/css/formate/einbinden.htm... Jetzt mach endlich mal!
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
Vielen Dank für die Antwort, genau so eine Seite hab ich auf SELFHTML gesucht ... aber bis eben noch nicht gefunden.
Danke,
Chris J.-
hiho,
Noch Fragen?
Liebe Grüße aus Ellwangen,
Felix Riesterer.
ja, leider
3.) Style-Wechsel gelingt mit Javascript-gesteuerter Änderung des href-Attributs im link-Element, das Dein Stylesheet einbindet.
ich hab bereits zwei CSS-Daten angelegt, wie beschrieben und im <head> sind auch
<link rel="stylesheet" type="text/css" href="design1.css" />
<link rel="stylesheet" type="text/css" href="designmodern.css" />eingetragen.
Nun sagtest du, dass man mit einem <a>-Tag, welcher einen Attribut zum Javascript enthält, eines der beiden Designs aus den <link> laden kann.
Hab jetzt auch schon seit mehreren Stunden in SELFHTML und Foren durchforstet aber nichts gefunden.Und von Javascript habe ich soviel Ahnung wie ein Maulwurf vom Formationsspringen.
Ich wäre sehr verbunden, wenn du mir ein Ansatz auf der Lösung des Problemes geben würdest.
Danke,
Chris J.-
Moin
ich hab bereits zwei CSS-Daten angelegt, wie beschrieben und im <head> sind auch
<link rel="stylesheet" type="text/css" href="design1.css" />
<link rel="stylesheet" type="text/css" href="designmodern.css" />eingetragen.
da gehört aber nur eine hin, die andere soll ja erst mittels javaScript nachgeladen werden.
Nun sagtest du, dass man mit einem <a>-Tag, welcher einen Attribut zum Javascript enthält, eines der beiden Designs aus den <link> laden kann.
Hab jetzt auch schon seit mehreren Stunden in SELFHTML und Foren durchforstet aber nichts gefunden.im head:
<link rel="stylesheet" type="text/css" href="design1.css" id="css"/><script type="text/javascript">
function csswechsel(stil) {
document.getElementbyId("css").href=stil;
}
<script>im body der Link
<a href="javascript:csswechsel('designmodern.css')">andrer Stil</a>
Gruß
rfb-
Moin
sorry, Tippfehler, es muss
document.getElementById("css").href=stil;
lauten
Gruß
rfb
-
-
Lieber Chris,
wie rfb Dir schon ausführlich beschrieben hat, ist die Lösung folgende (siehe Thema meines Postings).
Du hast im Kopf der Datei Dein Stylesheet stehen. Das ist ein <link/>-Element, welches per href-Attribut Dein Stylesheet einbindet. Dieses <link/>-Element nehmen wir uns nun per Javascript zur Brust und ändern den Wert, den es in seinem href-Attribut stehen hat.
Dazu gibt es zwei Möglichkeiten, von denen rfb bereits eine ausführlich erklärt hat:
-
Wir geben dem link-Element eine ID, über die wir es mit Javascript _direkt_ ansprechen können. Diese Variante empfiehlt sich vor allem dann, wenn Du noch mehr Stylesheets (z.B. für Printmedien) einbindest.
-
Wenn es nur ein einziges Stylesheet gibt, dann kann man per Javascript auch alle <link/>-Elemente einzeln abklappern und prüfen, ob sie ein Stylesheet einbinden (man kann ein <link/>-Element ja auch für etwas anderes verwenden!), um dann im entsprechenden Fall (es hat ein rel-Attribut mit dem Wert "stylesheet") den href-Wert zu manipulieren.
Die Lösung von rfb sieht nur eine einmalige Änderung (ohne Zurück) des Stylesheets vor. Wenn Du aber eine echte Auswahl an Styles anbieten möchtest, dann wäre eine Dropdown-Liste mit der Auswahl der Styles ganz praktisch.
<form name="styleswitcher" id="styleswitcher" onsubmit="return styleUmschalten()"> <p>Style <select name="styleauswahl" id="styleauswahl" size="1"> <option value="default.css">Standard</option> <option value="modern.css">modern</option> <option value="crazy.css">abgefahren</option> </select> <input type="submit" name="umschalter" id="umschalter" value="einstellen" /> </p> </form>Du brauchst jetzt nur noch eine Javascript-Funktion namens "styleUmschalten" (siehe onsubmit-Attribut im <form>-Element!) schreiben, die Dir die momentan ausgewählte Option Deines Select-Feldes ermittelt, und dann Dein <link/>-Element mit dem entsprechenden href-Wert befüllt.
Wie Du diese Funktion schreibst, findest Du im Javascript-Bereich von SELFHTML. Du wirst folgende Funktionen und Eigenschaften brauchen:
document.getElementById()
document.getElementsByTagName()
selectedIndex (eines select-Feldes)
HTML-Element.valueViel Spaß beim Dazulernen! Es lohnt sich wirklich! Bei Fragen kommst Du wieder hierher. :-)
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
-
-
-
-
-