CSS-Layer - dynamisch verändern

Computer: Software & Programmierung HTML & CSS
#1

Moin

Folgendes Problem:

Ich bin dabei eine HP für einen Bekannten zu gestalten.
Den Hintergrund habe ich mittels CSS-Layer gestaltet - also ein Polygon welches an sich nur aus dem Rahmen des Layers besteht. Der Effekt ist, dass man ein simples Bild erhält ohne eine Hintergund-Grafik einfügen zu müssen.

Nun wollte ich diesen Hintegrund dynmaisch gestalten, so dass, wenn man auf einen internen Link klickt, sich das Polygon in seinen Dimensionen verändert.

Meine Idee dazu war zwei unterschiedliche CSS-Layer hintereinander anzuordnen und das jeweils gewünschte mittels „z-index“ hervorzuheben. Der Effekt wäre eben der, dass der Eindruck entstehen würde, das Polygon verändere sich wenn man einen Link klickt.

Ein Problem ist, das der Layer (das Polygon) sich über die ganze Seite erstreckt, weil es eben ein Hintergrund sein soll.

Ich habe zwar in SelfHTML eine Erklärung zu ähnlichen Problemen gefunden, aber konnte mir daraus keinen Reim machen bzw. es auf mein Problem übertragen.

Um es zusammenzufassen:
Wie kann man den z-index eines Layers dynamisch verändern?
Es sollte (laut SelfHTML) mit DOM gehen … ?!

Hier noch eine URL zum Thema CSS-Layer (Bilder etc.)

http://www.infimum.dk/HTML/slantinfo.html

Thx

Jim

#2

Moin

Folgendes Problem:

Nun wollte ich diesen Hintegrund dynmaisch gestalten, so dass,
wenn man auf einen internen Link klickt, sich das Polygon in
seinen Dimensionen verändert.
Um es zusammenzufassen:
Wie kann man den z-index eines Layers dynamisch verändern?
Es sollte (laut SelfHTML) mit DOM gehen … ?!

Hi Jim,
so richtig kann ich mir die Seite die du gemacht hast zwar nicht vorstellen, aber anhand deines Links habe ich eine grobe Vorstellung. Ich habe eine Beispielseite geschrieben, wie man mittels DOM Anspsprache die zIndex Eigenschaft zweier Elemente zufällig bestimmen kann… eigentlich nicht wirklich schwierig.
Allerdings halte ich es für geeigneter den zindex deiner Elemente serverseitig per Zufall zu bestimmen, also mit PHP, JSP oder so. Einfach auf jeder Seite für die Hintergründe die CSS Auszeichnungen erstellen und per Zufall denem oder jenem den höheren zIndex zuweisen. Serverseitig stellst du sicher, dass auch Besucher mit abgeschaltetem JavaScript oder ollen Browsern die Zufallsfunktion bewundern dürfen.
Nun ja es geht aber eben auch per JavaScript. Der Einfachkeit halber mein vereinfachtes Beispiel nachfolgend… Gruß DP

<!–
function wechseln()
{
zufall=Math.round(Math.random());
if(zufall==1)
{
document.getElementById(„div01“).style.zIndex=1;
document.getElementById(„div02“).style.zIndex=2;
document.anzeige.info.value=„Rot vorne“;
}
else
{
document.getElementById(„div01“).style.zIndex=2;
document.getElementById(„div02“).style.zIndex=1;
document.anzeige.info.value=„Grün vorne“;
}
}
//–>

<!–
.colors {border-color:#003300 #005500 #007700 #009900;}
.colors2 {border-color:#220000 #550000 #770000 #990000;}
.borderdraw {line-height:0px;width:0px;height:0px;border-style:solid;}
p,h2 {clear:left;}
–>

[Zufall ZIndex](javascript:wechseln())

#3

Moin

Vielen Dank für das Script!

Es kommt dem was ich will sehr nahe. Die Funktion beinhaltet genau das was ich wollte, … abgesehen von dem Zufallsprinzip.
Vielmehr sollte es so sein, dass bei jedem Klick definitiv der z-index gewechselt wird und nicht per Zufall.

Ich werde versuchen mit Hilfe von SelfHTML das zu ändern. Wenn deiner einer jedoch eine Idee hat wie man das ändert, so wäre ich natürlich nochmals sehr dankbar; da meiner einer nicht großartig in Javascript/Jscript involviert ist.

Wenn es von Interesse ist kann ich die betreffende HTML Seite zur Anschauung online bringen … eben zum besseren Verständniss meines Problems?!

Nichtsdestotrotz … nochmals vielen Dank

Jim

#4

Es kommt dem was ich will sehr nahe. Die Funktion beinhaltet
genau das was ich wollte, … abgesehen von dem
Zufallsprinzip.
Vielmehr sollte es so sein, dass bei jedem Klick definitiv der
z-index gewechselt wird und nicht per Zufall.

Mh, da gibt es bestimmt wieder 1000 Möglichkeiten. In einem Frameset kannst du dir eine JavaScript Variable in einem statischen Frame legen, die sich den aktuellen Hintergrund merkt, oder man benutzt einen cookie oder ähnlich.

Wenn es von Interesse ist kann ich die betreffende HTML Seite
zur Anschauung online bringen … eben zum besseren
Verständniss meines Problems?!

Ja will deine Polygone mal sehen…:smile:
Außerdem versteht man Probleme auch besser, wenn man die Dinge sieht.
Gruß DP

#5

Moin

Die Sache ist bestimmt viel einfacher als von mir beschrieben. Aus dem Grund hier die betroffene HTML Seite.

http://meanjim.piranho.de/test3.html

Ich habe ihm Quelltext die einzelnen Elemente beschrieben, ganz einfach der Übersichtlichkeit wegen.

Wie schon erwähnt sollte das Javascript eben nicht per Zufall den z-index ändern, sondern per Klick respektive Mouseover.

Als Anmerkung:
Das ganze befindet sich noch im Anfangsstadium, ergo ist das momentane Layout nur provisorisch um die Machbarkeit des geistigen Kontruktes zu überprüfen. Aber im großen und ganzen soll das Endprodukt auf dieser Testseite aufbauen.

Und falls jemanden einfällt warum die CSS-Befehle zum ändern der Scrollbalken nur teilweise bis gar nicht funktionieren, scheut euch nicht mir eine Erklärung dafür zu geben … ich wäre äußerst dankbar.

Thx a lot

Jim

#6

CSS-Layer - dynamisch verändern
Hi Jim,
achso jetzt versteh ich das besser. Also du musst dir einfach eine Variable anlegen, die sich den aktuellen zindex merkt. Dieser wird dann in der funktion wechseln benutzt und der aktuelle Hintergrund gesetzt.
Der JavaScript Bereich säh dann z.B. so aus:

<!–
aktuelleposition=3;
function wechseln()
{

if(aktuelleposition==1)
{
document.getElementById(„div01“).style.zIndex=3;
aktuelleposition=3;
}
else
{
document.getElementById(„div01“).style.zIndex=1;
aktuelleposition=1;
}
}
//–>

Wenn du die Variable über mehrere HTMl Seiten „behalten“ willst, müsstest du sie nur in einen anderen (z.B. nicht sichtbaren) Frame auslagern und sie von dort aus immer abfragen.
Dein CSS Problem: Wenn du hexadezimale Farbwerte vergibst, musst du in CSS auch die führende Raute angeben… also statt:
scrollbar-Highlight-Color:cccccc;
muss es heißen:
scrollbar-Highlight-Color:#cccccc;
usw.
Im übrigen klappt die Formatierung der Scrollleisten nur im Internet Explorer.
Ach ja, die am Ende der Seite hinzugefügten externen JavaScriptdateien, die Werbepopups erzeugen, enthalten vermutlich Fehler. Ich weiß nicht ob du die von Hand oder die bei deiner Seite automatisch eingetragen wurden.
Weiterhin viel Erfolg
Gruß DP

#7

Moin

Vielen Dank für das neue Script.
Ich habe das aber Problem selbst lösen können; zumindest hoffe ich das.

<!–
function wechseln1()
{
document.getElementById(„div01“).style.zIndex=3;
}
//–>

<!–
function wechseln2()
{
document.getElementById(„div01“).style.zIndex=1;
}
//–>

Ich habe ganz einfach zwei Scripte gemacht. Das erste wird per Mouseover angesprochen und das zweite per Mouseout. Im Browser wird genau der gewünscht Effekt erzielt. Allerdings weiß ich nicht ob das auch andere Browser ausser dem IE6 so akzeptieren respektive ausführen.

Auf die Lösung mit dem Scrollbalken bin ich ebenfalls noch selbst gekommen (oh Wunder); bedingt durch vergleiche von Musterbeispielen wo eben das Rautenzeichen bei Hex-Angaben vorhanden war.
Die Rautenzeichen habe ich sonst immer weggelassen, da ich diese CSS-Defintion meistens auslaggere und in einer reinen CSS-Datei keine Rautenzeichen benötigt werden.
Dummer Fehler - aber kann passieren.

Die Sache mit dem fehlerhaften Javascript ist tatsächlich nicht mein Verdienst, sondern diese werdem vom Server in den Quelltext geschrieben. Wahrscheinlich für die Popup-Werbung - ich weiß es nicht.
Bisher kam allerdings nur die Fehlermeldung, das das Script(e) fehlerhaft ist; es hatte auch bei anderen HP´s noch keine Auswirkungen gezeigt. Ich müßte mal den Anbieter auf diesen Fehler darauf aufmerksam machen.

Hier noch mal eine weitere Version des Projektes zur Anschauung.

http://meanjim.piranho.de/teststart.html

Mal eine OT-Frage.
Ich habe gelesen, dass es nicht möglich sei innerhalb von CSS-Layern HTML-Dateien dynamisch zu verändern, den Layer quasi wie einen iframe zu behandeln und HTML-Seiten per Mouseklick hereinzuladen. Ist dem wirklich so?
Es würden sich vor allem auf dieser HP sehr viele Vorteile bieten wenn das technisch machbar wäre.
Und noch was. Stimmt es außerdem, dass der Netscape-Browser keine iframes darstellt?

Ich will dich nicht mit sovielen Fragen belästigen, nur da deiner einer eh schon das hier liest bietet es sich für meiner einer an dir noch obigen Fragen zu stellen … u know?! :smile:

Thx a lot

Jim

#8

Allerdings weiß ich
nicht ob das auch andere Browser ausser dem IE6 so akzeptieren
respektive ausführen.

Hi Jim,
hab gerade mal geschaut, im Mozilla/Netscape7.1 sind deine Polygone nicht zu sehen. Liegt wahrscheinlich an dem div-Tag, in den du deine zwei polygon-divs reingepackt hast Den mein ich:

…

Der Internet Explorer ist sehr gnädig in seiner css Interpretation. Vermutlich sieht es selbst wenn du den oben genannten Tag rausnimmst in Mozilla nicht so aus wie im IE.

Mal eine OT-Frage.
Ich habe gelesen, dass es nicht möglich sei innerhalb von
CSS-Layern HTML-Dateien dynamisch zu verändern, den Layer
quasi wie einen iframe zu behandeln und HTML-Seiten per
Mouseklick hereinzuladen. Ist dem wirklich so?

Du meinst deine div Tags? div tags sind nichts anderes als HTML Blockelemente. Du kannst mit JavaScript zwar mittlerweile Inhalte verändern, aber ich vermute HTML Dateien in div Tags laden ist
nicht drin.

Es würden sich vor allem auf dieser HP sehr viele Vorteile
bieten wenn das technisch machbar wäre.
Und noch was. Stimmt es außerdem, dass der Netscape-Browser
keine iframes darstellt?

Der Netscape Browser unterstützt seit der Version 6 iframes,
IE ab Version 3. Wenn du also nicht gerade für Netscape 4 kompatibel arbeiten willst (Und bei deinem massigen CSS Einsatz willst du das nicht, glaub mir) kannst du IFrames verwenden. Viel Erfolg weiterhin, gruß DP.