Neue Antwort erstellen

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

Neu erstellte Beiträge unterliegen der Moderation und werden erst sichtbar, wenn sie durch einen Moderator geprüft und freigeschaltet wurden.

Die letzte Antwort auf dieses Thema liegt mehr als 365 Tage zurück. Das Thema ist womöglich bereits veraltet. Bitte erstellen Sie ggf. ein neues Thema.

Informationen
Sicherheitsabfrage („reCAPTCHA“)
Nachricht
  • :)
  • :(
  • ;)
  • :P
  • ^^
  • :D
  • ;(
  • X(
  • :*
  • :|
  • 8o
  • =O
  • <X
  • ||
  • :/
  • :S
  • X/
  • 8)
  • ?(
  • :huh:
  • :rolleyes:
  • :love:
  • 8|
  • :cursing:
  • :thumbdown:
  • :thumbsup:
  • :thumbup:
  • :sleeping:
  • :whistling:
  • :devil:
  • :saint:
  • <3
  • :!:
  • :?:
Maximale Anzahl an Dateianhängen: 10
Maximale Dateigröße: 1 MB
Erlaubte Dateiendungen: bmp, gif, jpeg, jpg, pdf, png, txt, zip
Internet-Adressen werden automatisch erkannt und umgewandelt.
Smiley-Code wird in Ihrer Nachricht automatisch als Smiley-Grafik dargestellt.
Sie können BBCodes zur Formatierung Ihrer Nachricht nutzen.

Vorherige Beiträge 34

  • Sauron

    derkeller.cwsurf.de/galerie.htm

    Ok... Für den Bildwechsel habe ich nun das passende Java-Script.

    Den Vorhang habe ich per CSS genau über dem Bild positioniert, was nun doch kein HG-Bild, sondern ein normales < img >-Element ist, was auch per CSS positioniert ist.

    Der Vorhang ist das Link, was den Bildwechsel auslöst.
    Dummerweise startet die Animation aber nur einmal, direkt nach dem Laden, aber nicht mehr, wenn das nächste Bild aktualisiert wird, da die Seite ja nicht mehr neu geladen wird.

    Kann man irgendwie festlegen, dass die Gif-Animation bei Klick neu gestartet wird?

  • Sauron

    Sooo.... Die Automatisierung für die Hervorhebung gebe ich auf. Erstens geht das weit über meine php-Kenntnisse hinaus, zweitens ist es auch nicht so ein großer Aufwand, das für jede Seite einzufügen. Das wird ja so bleiben.

    Jetzt bin ich dabei, die Galerie-Seite mit Inhalt zu füllen.

    Dafür würde ich gerne das eigentliche Bild als Hintergrund nehmen und im Vordergrund so eine Art Vorhang als animierte gif-Datei platzieren. Das würde dann ungefähr so aussehen:
    [Blockierte Grafik: http://img265.imageshack.us/img265/520/beispielwt1.gif]
    (Nur mit besserer Bildquali, weil das HG-Bild mehr als 256 Farben haben kann. Und es würde sich dann auch nicht mehr wiederholen.)

    Mit einem Klick auf's Bild (eigentlich auf den Vorhang, das sieht man aber nicht), soll dann das Hintergrundbild, also das eigentliche Bild, gewechselt werden.

    Mal schauen, ob ich das mit 'nem Javascript hinkriege.

    Habt ihr Tipps?

  • Sauron

    Ok, das macht Sinn...

    Werd ich gleich mal korrigieren...

    -- Edit --

    So, ich habe es korrigiert. Leider bringt's nicht viel.
    Bei den beiden schon verlinkten Menüpunkten merkt man, dass die div-Box jetzt so groß ist, wie das Bild wäre, allerdings ist von dem Bild nichts zu sehen...

    menu.htm:

    Quellcode

    1. <a href=index.htm><div id="derkeller">Keller</div></a>
    2. <a href=uebermich.htm><div id="uebermich">Uebermich</div></a>
    3. <div id="erschein">Erscheinungen</div>


    style.css:

    Quellcode

    1. #derkeller { position: absolute; top: 0px; left: 0px; width: 260px; height: 40px; border-style: none; outline-style: none; background-image: url("bilder/derkeller_0.gif"); }
    2. #derkeller:hover { background-image: url(bilder/derkeller_1.gif); }
    3. #uebermich { position: absolute; top: 57px; left: 4px; width: 83px; height: 16px; border-style: none; outline-style: none; background-image: url("bilder/uebermich_0.gif"); }
    4. #uebermich:hover { background-image: url(bilder/uebermich_1.gif); }
    5. #erschein { position: absolute; top: 95px; left: 10px; width: 123px; height: 14px; border-style: none; outline-style: none; background-image: url(bilder/erschein_0.gif); }
    6. #erschein:hover { background-image: url(bilder/erschein_1.gif); }


    --- Edit 2 ---

    Gut, ich habe den nächsten Fehler selbst entdeckt. Wie man oben sehen kann, habe ich in der CSS-Datei die Bilder im Ordner "bilder/" zugewiesen. Dumm nur, dass der Ordner in Wirklichkeit "Bilder/" heißt... -.-
    In Firefox funzt es jetzt, nur im MS Internet Explorer funktioniert der hover-Effekt nicht... Sowohl css als auch java.
    Außerdem hakt bei css die Darstellung noch extrem...

    ---- Edit 3 ----

    So, ich hab's jetzt tatsächlich hinbekommen, glaube ich. (Immernoch nur auf der Galerie-Seite und dort noch nicht alle Menüpunkte verlinkt.)
    Aber der Internet Explorer gehört verboten.
    Da funzt ja nix! auch aufm Mac. Nur die Darstellung ist nicht so beschissen wie bei mir zu hause. Dafür funktionieren die Links nicht. -.-

    Ich habe jetzt in der html-Datei von der Galerie-Seite im Head folgenden Text eingefügt, damit das Link "Galerie" als aktuell besuchte Seite hervorgehoben wird:

    Quellcode

    1. <style type="text/css">
    2. #galerie { background-image: url(Bilder/galerie_2.gif); }
    3. </style>


    Kann man das auch mit php automatisieren? Wenn ja, wie?

  • Three of Five

    den fehler kenn ich auch
    problem ist das die div box nur so groß wie deren inhalt ist (hintergrundbild zählt nicht)
    du musst die box also wenigsten noch mit min-width und min-height aufspannen, sonst ist die box nur 0px mal 0px groß und du siehst nix

  • Sauron

    Ich weiß. Müsste inzwischen behoben sein.
    Die Frage war auch nicht mehr auf deinen Fehler bezogen.

    Ich krieg's übrigens nicht hin, dass für die einzelnen div-tags Hintergrundbilder angezeigt werden. (siehe ->Galerie)

    Das ist der relevante Quelltext: (nur für den Menüpunkt "Über mich")

    CSS-Datei:

    Quellcode

    1. #uebermich { position: absolute; top: 57px; left: 4px; border-style: none; outline-style: none; background-image: url("bilder/uebermich_0.gif"); }
    2. #uebermich:hover { background-image: url(bilder/uebermich_1.gif); }


    menu.htm:

    Quellcode

    1. <a href=uebermich.htm><div id="uebermich">Uebermich</div></a>

  • Sauron

    Immernoch?

    Dateiinterne CSS-Definitionen überlagern Definitionen in externen css-Dateien, oder?
    Denn wenn nicht, wüsste ich nicht, wie ich die einzeln hervorgehobenen Menü-Punkte je nach aktueller Seite realisieren sollte.

  • Three of Five

    Schwerer Fehler
    Das Dokument konnte nicht validiert werden da keine Dokumententypdeklaration gefunden wurde.
    Bitte fügen Sie eine gültige Deklaration ins Dokument ein und wiederholen die Validierung.
    Eine Liste von gültigen [X]HTML-Deklarationen finden Sie hier

    tztztz ;)

  • Sauron

    Ok, auf der Galerie-Seite habe ich das jetzt mal schnell umgesetzt, allerdings noch mit der alten mouseover-Funktion.
    Und es funktioniert.

    Die Sache mit dem HG-bild werde ich wohl so akzeptieren müssen... Habe auf pausenhof.de mal nen Thread gemacht, da hat mir der eine Ober-Admin nur gesagt, dass das mit meinen Mitteln wohl nicht geht und er Flash benutzen würde.

    Ich werde dann mal versuchen, das Menü neu aufzubauen.

  • Cypher

    du machst deine ganz normalen seiten und anstelle des menüs schreibst du "<?php include("menu.html"); ?>. Dann wird einfach der inhalt aus datei menu.html an die entsprechende stelle geschrieben, bevor das ergebnis an den browser gesendet wird.

    z.b. eine normale seite deiner website

    PHP-Quellcode

    1. <html>
    2. <head>
    3. </head>
    4. <body>
    5. </body>
    6. <?php include("menu.html"); ?>
    7. <!-- normaler content -->
    8. </html>

    und die menu.html

    Quellcode

    1. <div id="menu">
    2. <div><a href="#">Menuitem 1</a></div>
    3. <div><a href="#">Menuitem 2</a></div>
    4. ...
    5. </div>