Mit Radiobutton die css manipulieren.

CreativPur · 19. April 2017

Hi,

ich habe folgende Frage..

Ich habe 2 PHP-Seiten.
Eine Eingabe-Seite, wo ich Bilder wahlweise für den Header der Ausgabe-Seite zur Auswahl anklicken möchte.

Diesen Bildern sind jeweils 2 Links zugeordnet.. Siehe Bild

Ich möchte nur eine HTML-Seite erstellen, wo aufgrund der Auswahl "Vorschau" eine andere "style.css" ausgewählt wird. Somit bekommt jedes Bild eine eigene style.css..
style1.css
style2.css
usw....

Eingabeseite:

HTML:

<div class="container">
    <h4 style="color:green;">Design wählen</h4>
    <hr />
    <div class="col-lg-12 col-sm-12">
    <div class="row">
        <div class="col-lg-4 col-sm-12" style="background-color: #EFF4F4; padding:20px 20px 20px 20px; border-radius:10px;">
            Info
        </div>
        <div class="col-lg-8 col-sm-12">
            <h4 style="color:green;"><u>Treffe eine Design-Auswahl für Deine Bewerbungshomepage</u></h4>
            <div class="row">
                <div class="col-lg-3 col-sm-12" align="center">
                    <img src="templates/muster_design/img/design1.jpg" width="192" height="128"><br />
                    <span style="font-size:10px; color:blue;">
                        <a href="templates/muster_design/web_muster/muster_webseite1.php" target="_blank"><span class="glyphicon glyphicon-eye-open"></span>&nbsp;Vorschau</a>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <a href="#" target="_blank"><span class="glyphicon glyphicon-check"></span>&nbsp;Übernehmen</a>
                    </span>
                </div>
                <div class="hidden-lg" style="height:20px;"></div>
                <div class="col-lg-3 col-sm-12" align="center">
                    <img src="templates/muster_design/img/design2.jpg" width="192" height="128"><br />
                    <span style="font-size:10px; color:blue;">
                        <a href="templates/muster_design/web_muster/muster_webseite2.php" target="_blank"><span class="glyphicon glyphicon-eye-open"></span>&nbsp;Vorschau</a>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <a href="#" target="_blank"><span class="glyphicon glyphicon-check"></span>&nbsp;Übernehmen</a>
                    </span>
                </div>
            </div>
        </div>   
    </div>
    </div>
</div>

Ausgabeseite:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Testseite</title>

<!-- Style verändern -->
<link href="style1.css" rel="stylesheet">

</head>
<body>
    <section id="hero">
    <div class="hero-container">
      <div class="wow fadeIn">
<!-- Mit der Class "hero-logo" wird  das Bild in der css bestimmt. -->
        <div class="hero-logo">
          <h1><em>Musterseite</em></h1>
        </div>
       
        Text und Inhalt
                 
        </div>
      </div>
    </div>
  </section>
</body>
</html>

Wie kann ich es anstellen dass ich den LINK "Vorschau" so erstelle, dass z.B style2.css aufgerufen wird ?

SpiceLab · 19. April 2017

Mit der Formatierungssprache CSS (ursprüngliche Wahl des Forums) ist dein Vorhaben technisch nicht umsetzbar - dafür bedarf es schon einer Scriptsprache.

Je nachdem, in welcher Disziplin du deine Stärken hast:

JS (clientseitig): http://www.thestyleworks.de/tut-art/style_switcher_1.shtml - Auswahl alternativer CSS-Dateien
JS (clientseitig): http://www.thestyleworks.de/tut-art/style_switcher_2.shtml - Voreinstellung/alternative Formatierung in einer CSS-Datei enthalten/wählbar
PHP (serverseitig): http://www.ohne-css.gehts-gar.net/0048.php - Auswahl alternativer CSS-Dateien

Hinweis:

Bin mir nicht sicher, ob das erste und dritte "0815-Standard-Anwendung"-Beispiel zu 100% deckungsgleich mit deinem beschriebenen speziellen Anwendungsfall ist. In diesem Fall dann bitte als grundsätzlichen "Technischer Leitfaden" verstehen, alternative CSS-Dateien in eine Seite zu laden

Falls Link #1 u. #3 tatsächlich für dich ausscheiden, könnte style_switcher_2 für dich von Interesse sein, weil im JS-Code u.a. CSS-Klassennamen angelegt/ausgewählt werden können, die anstelle der CSS-Dateien zum Einsatz kämen.

Siehe das zugehörige "Basic"-Demo bzgl. dieser Technik:

Mit dem Suchbegriff styleswitcher finden sich aber noch weitere (alternative) Quellen im Netz, darunter z.B. auch jQuery-Plugins (falls eher von Interesse als natives JS, weil schon im Einsatz).

[edit]TippEx[/edit]

Mit Radiobutton die css manipulieren.

CreativPur

Erfahrenes Mitglied

SpiceLab

ZENmechanic

Neue Beiträge