• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Image abhänig von Webstile laden

I

Industriemeister

Mitglied
Ich erstelle gerade einen weiteren Webstile.
An einer Stelle wird ein Logo geladen.
Nun muss ich dies abhängig vom gewählten Webstile ändern so wie ich auch Texte über class einfach tausche.

Doch wie mache ich das bei

Code: 
<img src="Images/fsk18_logo.gif" alt="Die Serie ist aktuell.....

es kann leider kein Hintergrund sein.
 
Werbung:
mit einer PHP Abfrage. Jenachdem welcher Stile aktiv ist ( kannste ja mit php rausfinden, sofern du den stil nicht über reines js machst )das jeweilige Bild ausgeben.
 
Ja mit PHP.

Ansatz: Auswahlfeld der Sprachen. Dann auswerten mit PHP mit Hilfe von IF zb

PHP: 
if($stil == 'ostern')
{
    include('osterstil.php');
}
elseif($stil == 'weihnachten')
{
    include('weihnachtsstil.php');
}
else
{
    include('standardstil.php');
}

und die styles werden dann mit variablen gefüllt ,die dann einfach ausgibst
zb
$logo = "<img src="Images/fsk18_logo.gif" alt="Die Serie ist aktuell....." />;
//.....

Ich hoffe ich konnte helfen :)
 
Werbung:
T4k3C4r3 schrieb:
Ja mit PHP.

Ansatz: Auswahlfeld der Sprachen. Dann auswerten mit PHP mit Hilfe von IF zb

PHP: 
if($stil == 'ostern')
{
    include('osterstil.php');
}
elseif($stil == 'weihnachten')
{
    include('weihnachtsstil.php');
}
else
{
    include('standardstil.php');
}

und die styles werden dann mit variablen gefüllt ,die dann einfach ausgibst
zb
$logo = "<img src="Images/fsk18_logo.gif" alt="Die Serie ist aktuell....." />;
//.....

Ich hoffe ich konnte helfen :)
Zum Vergrößern anklicken....

php verwende ich ja schon.
das ist ja mal ein ansatz.

Schön und gut... aber

Code: 
<link rel="preferred stylesheet" title="Blub (orginal)" href="css/blub.css" type="text/css" />
<link rel="alternate stylesheet" title="Düster (black)" href="css/black.css" type="text/css" />
so mache ich den Webstil wählbar
Aber wie kann ich den ausgewählten Stil mit php abfragen?
$stil scheint ja keine Standard Parameter oder Konstante zu sein.
Oder täusche ich mich da?
 
Zuletzt bearbeitet:
Hallo Industriemeister,

du musst ja irgendwo im Code eine Abfrage haben, welcher Stil/Style ausgewählt werden soll. Wie überprüfst du das denn?

LG Marius
 
Also ich habe diese Zeilen
Code: 
<link rel="preferred stylesheet" title="Heisse-Fantasien (orginal)" href="css/heisse-fantasien-style.css" type="text/css" />
<link rel="alternate stylesheet" title="Honor to JC (black)" href="css/heisse-fantasien-style-black.css" type="text/css" />

<!-- verschiebt #inhalt und ändert Ideebox -->
<!--[if IE]> <style type="text/css">@import url(css/heisse-fantasien-style-ie.css);</style><![endif]-->
<link rel="stylesheet" href="css/headnavi.css" type="text/css" />
<link rel="stylesheet" href="css/sidenavi.css" type="text/css" />

<script type="text/javascript" src="script/styleswitcher.js"></script>

und mit javascript kenne ich mich nicht so aus. Ich weis das ich damit das gewähte speichere für den erneuten Besuch.
Vielleicht könnt ihr mir ja weiterhelfen

styleswitcher.js
Code: 
 function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}

 function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}

 function getPreferredStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
       && a.getAttribute("rel").indexOf("alt") == -1
       && a.getAttribute("title")
       ) return a.getAttribute("title");
  }
  return null;
}

 function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

 function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

 window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}

 window.onunload = function(e) {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}

 var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
 
Werbung:
@Icy

Ich vermute Du meinst die Stelle an der an der gespeichert wird welches Webstile gewählt wurde.
Diesen gespeicherten Wert müsste ich wohl abfragen wenn ich Dich richtig verstehe.
Doch weis ich nicht nach welchem ich fragen muss

ich habe es schon mit
if (style)..... und if (title).....
Zum Vergrößern anklicken....
probiert. Doch das hatte keine Wirkung.
Also wonach muss ich abfragen. Und wie frage ich nach einem Wert aus des script?
 
Für die if-Abfrage würde ich den Namen des Stylesheets im Head durch Variable ersetzen und je nach geladenem Stil unterschiedliche $_GET Parameter an die URL anhängen.
 
Kann ich den Wert der Scriptfunktion (wo gespeichert wird welches geladen wird) nicht direkt abfragen?
Oder im script den Wert an PHP übergeben?
Ohne das mit einer weiteren Post / Get übergabe zu machen?
Denn dann müsste ich bei allen Links eine Schleife einbauen und ggf. den Prameter mit übergeben.
 
Zuletzt bearbeitet:
Werbung:
Tronjer schrieb:
Für die if-Abfrage würde ich den Namen des Stylesheets im Head durch Variable ersetzen und je nach geladenem Stil unterschiedliche $_GET Parameter an die URL anhängen.
Zum Vergrößern anklicken....

wie meinst Du das mit dem Head... und so?
geht das überhaupt? greift dann nicht das javascript in leere wenn ich da was verändere?
Könnet ich nicht aus dem Scrip den wert des gewählten stylesheet an eine Konstante (zb. wie bei einer Browserweiche) übergeben?
 
Zuletzt bearbeitet:
Ich habe ja geschrieben das ich nicht auf Hintergrundbilder zurück greifen kann.
Aber ich habe gerade was gelesen.

<style type="text/css">
<!--
#rechts {
float:right;
width: 234px;
height: 123px;
margin-left: 20px;
border:1px solid red;
}
-->
</style>

<img id="rechts" src="bilder/html-kurs-logo.gif" />
Zum Vergrößern anklicken....

Und nun stellt sich mir die Frage ob ich auch die Pfadangabe in die css-datei auslagern kann.
Ich bin nämlich davon ausgegangen das img-tags nicht mit css definiert werden können.
Dann wäre das ganze kein Thema mehr denn die css-datei wird ja entsprechend der Auswahl geladen. Und könnte somit einfach auf eine unterschiedliche Adresse zurück greifen.

ich dachte mir das so
css-datei
Code: 
.fsk-logo { image: url('../Images/fsk18_logo_grau.gif');
         }

und so dann aufrufen
html-datei bzw. php-Datei
Code: 
<img class="fsk-logo">
 
Zuletzt bearbeitet:
Werbung:
schade... das wäre auch zu schön und leicht gewesen.
Aber das backgrund-image und List-style-image geht hatte ich einfach mal gefragt.

Nun muss ich zugeben das ich nicht weis wie ich die Verbindung zwischen php zum javascript hinbekomme.
Ich möchte nicht so gern mit der url verknüpfen. Da ich dann bei jedem link der irgendwie auf eine Seite mit dem Logo verweist. Diesen Parameter einbauen muss.

Bei der Browserweiche habe ich mal eine Konstante verwendet.
kann ich da was machen?
Oder eine übergabe ohne die Url?
 
PHP und JavaScript haben erstmal nichts miteinander zu tun. Das eine (PHP) läuft serverseitig, das andere clientseitig, also im Browser. Mit PHP kann man JavaScript-Code erzeugen der dann an den Browser ausgeliefert wird, mit JavaScript aber keinen PHP-Code.

Du könntest ein JavaScript schreiben, welches beim Laden der Seite diese nach der betreffenden URL durchsucht. Z.B. so:

Code: 
function setLinks() {
 var links = document.getElementsById("a");
 for( var i=0;i<links.length;i++ ) {
  if( links[i].href == "linkziel.php" )
  {
    links[i].className = "icon";
  }
 }
}

Dadurch wird bei allen Links die zu linkziel.php führen die Klasse icon gesetzt. Sähe dann also im HTML-Code des Browsers so aus:

HTML: 
<a href="linkziel.php" class="icon">

Die o.g. Funktion müsstest Du im onload-Eventhandler einbauen, damit sie beim Laden der Seite aufgerufen wird, und ggfs. an deine Wünsche anpassen. Ggfs. kannst Du auch nur nach einem Bestandteil in der URL suchen um die Klasse zu setzen.
 
Ich habe das jetzt nicht ausprobiert, aber über PHP sollte sich das komplette Stylesheet austauschen lassen, anstatt nur einer einzelnen Klasse.

PHP: 
$my_stylesheet = $_GET['style'] == 'default' ? 'default.css' : 'alternate.css'
HTML: 
<link rel="stylesheet" href="<?php echo $my_stylesheet; ?>" type="text/css" />
 
Werbung:
threadi schrieb:
PHP und JavaScript haben erstmal nichts miteinander zu tun. Das eine (PHP) läuft serverseitig, das andere clientseitig, also im Browser. Mit PHP kann man JavaScript-Code erzeugen der dann an den Browser ausgeliefert wird, mit JavaScript aber keinen PHP-Code.

Du könntest ein JavaScript schreiben, welches beim Laden der Seite diese nach der betreffenden URL durchsucht. Z.B. so:

Code: 
function setLinks() {
 var links = document.getElementsById("a");
 for( var i=0;i<links.length;i++ ) {
  if( links[i].href == "linkziel.php" )
  {
    links[i].className = "icon";
  }
 }
}

Dadurch wird bei allen Links die zu linkziel.php führen die Klasse icon gesetzt. Sähe dann also im HTML-Code des Browsers so aus:

HTML: 
<a href="linkziel.php" class="icon">

Die o.g. Funktion müsstest Du im onload-Eventhandler einbauen, damit sie beim Laden der Seite aufgerufen wird, und ggfs. an deine Wünsche anpassen. Ggfs. kannst Du auch nur nach einem Bestandteil in der URL suchen um die Klasse zu setzen.
Zum Vergrößern anklicken....

Mein Problem ist das mehr als eine Seite gibt in der das Logo vorkommt.
Und dann jeweils von dem gewählten Stylesheet unterschiedlich ausgegeben werden müsste.
bsp: bei der einen stylesheet-Variante wird das Logo rot, bei der anderen grau.
Es ist aber jeweils die selbe Seite mit unterschiedlichen Farben.
 
Tronjer schrieb:
Ich habe das jetzt nicht ausprobiert, aber über PHP sollte sich das komplette Stylesheet austauschen lassen, anstatt nur einer einzelnen Klasse.

PHP: 
$my_stylesheet = $_GET['style'] == 'default' ? 'default.css' : 'alternate.css'
HTML: 
<link rel="stylesheet" href="<?php echo $my_stylesheet; ?>" type="text/css" />
Zum Vergrößern anklicken....

wenn ich Dich richtig verstanden habe.
Das tue ich ja mit den stylesheets die ausgewäht werden.
Ich greife dann (wie weiter oben) beschrieben auf einer der zwei varianten zu.
In denen ich alle style angaben für css ausgelagert habe.
 
Im Detail

erst mal vielen Dank für die Hilfe bisher.
Aber ich denke ich beschreibe mal ausführlicher wie ich im Moment so vorgehe.

im Index.php lade ich die stylesheets bzw. biete sie an
Code: 
<link rel="preferred stylesheet" title="Heisse-Fantasien (orginal)" href="css/heisse-fantasien-style.css" type="text/css" />
<link rel="alternate stylesheet" title="Honor to JC (black)" href="css/heisse-fantasien-style-black.css" type="text/css" />

mit der Navigation wird dann auf die Seite verwiesen die den Inhalt läd.
PHP: 
     echo '<a class="menuitem" href="index.php?Bereich=fantasien&Inhalt=serien" title="&Ouml;ffnet die Aufstellung der Serien" class="icon" >Serien</a>';


und in dem Inhalt steht dann
PHP: 
                                      // Entscheidung FSK18 ja/ Nein
                       if ($row->Serie_FSK18 == "Einige")     //   --> mit Text "Teilweise" und Logo
                       {
                       echo 'Serie teilweise <img src="'.$LINK.'Images/fsk18_logo.gif" alt="Die Serie ist aktuell ', $row->FSK18, ' als FSK18 eingestufft" border="1" width="58" height="17"><br />';
                       }
                       elseif ($row->Serie_FSK18 == "Alle")   //   --> mit Text "Vollständig" und Logo
                       {
                       echo 'Serie vollständig <img src="'.$LINK.'Images/fsk18_logo.gif" alt="Die Serie ist aktuell ', $row->FSK18, ' als FSK18 eingestufft" border="1" width="58" height="17"><br />';
                       }
                       else
                       {
                       echo '</p><br />';
                       }

                       echo 'Hallo Frank 1<img class="icon">2';

die letzte Zeile hatte ich eingebaut zu testen. Damit ich nicht gleich in die eigentliche Schleife eingreife.

an welcher Stelle müsste ich den
class="icon">
Zum Vergrößern anklicken....

einbauen

und kann ich in
function setLinks() { var links = document.getElementsById("a"); for( var i=0;i<links.length;i++ ) { if( links.href == "linkziel.php" ) { links.className = "icon"; } } }
Zum Vergrößern anklicken....


mehr als ein if einbauen?

zur class: den Pfad zum eigentlichen gif würde ich dann wie gewohnt in der css-datei angeben? Oder wo würde das sein?
 
Werbung:
threadi schrieb:
PHP und JavaScript haben erstmal nichts miteinander zu tun. Das eine (PHP) läuft serverseitig, das andere clientseitig, also im Browser. Mit PHP kann man JavaScript-Code erzeugen der dann an den Browser ausgeliefert wird, mit JavaScript aber keinen PHP-Code.

Du könntest ein JavaScript schreiben, welches beim Laden der Seite diese nach der betreffenden URL durchsucht. Z.B. so:

Code: 
function setLinks() {
 var links = document.getElementsById("a");
 for( var i=0;i<links.length;i++ ) {
  if( links[i].href == "linkziel.php" )
  {
    links[i].className = "icon";
  }
 }
}

gibt es auch eine funktion mit der ich eine Variabel setzen kann.
diese Variabel könnte ich dann direkt in dem Link verwenden.
Und im Head über eine if Anweisung bestimmen welchen Logo-Pfad der Variabel zugewiesen wird.

Nur weis ich eben nicht wie ich diese Variabel von dem Wechsel-Javascript an PHP übergeben kann.
Zum Vergrößern anklicken....
 
Ich glaube Du bist etwas zu tief in der Materie und hast etwas den Überblick verloren ;)

Du hast also z.B. diese Ausgabe in einer PHP-Datei:

PHP: 
echo 'Hallo Frank 1<span class="icon">&nbsp;</span>2';

Im Browser kommt an:
HTML: 
Hallo Frank 1<span class="icon">&nbsp;</span>2

Das kannst Du dann per CSS stylen:
Code: 
.icon {
 background-image: url(bild.gif);
 background-repeat: no-repeat;
}

Soviel zum einfachen Weg.

Was Du in der PHP-Datei aktuell stehen hast, lässt sich auch vereinfachen. Also statt

PHP: 
if ($row->Serie_FSK18 == "Einige")     //   --> mit Text "Teilweise" und Logo
                       {
                       echo 'Serie teilweise <img src="'.$LINK.'Images/fsk18_logo.gif" alt="Die Serie ist aktuell ', $row->FSK18, ' als FSK18 eingestufft" border="1" width="58" height="17"><br />';
                       }
                       elseif ($row->Serie_FSK18 == "Alle")   //   --> mit Text "Vollständig" und Logo
                       {
                       echo 'Serie vollständig <img src="'.$LINK.'Images/fsk18_logo.gif" alt="Die Serie ist aktuell ', $row->FSK18, ' als FSK18 eingestufft" border="1" width="58" height="17"><br />';
                       }
                       else
                       {
                       echo '</p><br />';
                       }

schreibst Du
PHP: 
if ($row->Serie_FSK18 == "Einige")     //   --> mit Text "Teilweise" und Logo
{
 echo 'Serie teilweise <span class="icon icon_fsk18" title="Die Serie ist aktuell als FSK18 eingestufft">&nbsp;</span>';
                       }
                       elseif ($row->Serie_FSK18 == "Alle")   //   --> mit Text "Vollständig" und Logo
                       {
 echo 'Serie vollständig <span class="icon icon_fsk18" title="Die Serie ist aktuell als FSK18 eingestufft">&nbsp;</span>';
                       }
                       else
                       {
                       echo '</p><br />';
                       }

Und dann nur noch das Logo per CSS-Klasse einfügen:

Code: 
.icon {
 background-image: url(bild.gif);
 background-repeat: no-repeat;
}

.icon_fsk18 {
 background-image: url(Images/fsk18_logo.gif);
}

Und noch zu den anderen Teilfragen von dir:
Natürlich kannst Du die von mir geschriebene JavaScript-Funktion um beliebige weitere Bedingungen ergänzen. Ich weiß nur mittlerweile nicht mehr was das für einen Sinn und Zweck für dich hätte.

Kannst Du die Seite nicht mal zeigen? Dann könnte man vlt. sehen was Du meinst?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben