1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  2. Unsere jährliche Weihnachts-Banner-Aktion hat begonnen! Wir freuen uns auf viele, viele kreative Vorschläge.
    Mehr dazu könnt Ihr hier nachlesen: Weihnachtsbanner 2016

    Information ausblenden

Hoverbox im Safari/Firefox...

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von Moriarty, 09.10.07.

  1. Moriarty

    Moriarty Pommerscher Krummstiel

    Dabei seit:
    17.05.04
    Beiträge:
    3.032
    Hi Leute!

    Ich habe für einen Freund und seine Forschungen eine Webseite erstellt:
    http://www.haussperlingsforschung.de

    Um die Bilder etwas anschaulicher zu machen, haben wir Hoverbox verwendet:
    http://sonspring.com/journal/hoverbox-image-gallery

    Jetzt funktioniert die ganze Sache NUR im Internet Explorer... Die Beispiele auf der Hoverbox-Homepage gehen aber auch im FF/Safari, also MUSS es eigentlich ja funzen...

    Ich habe die Sache schon 1000x angeschaut, aber finde den Fehler nicht...
    Hier ein Screenshot vom IE, wie es bei Mouseover aussehen soll...

    [​IMG]

    Oftmals sieht man ja den Wald vor lauter Bäumen nicht... Vielleicht hat ja einer kurz Zeit und schaut mal, ob ich was offensichtliches übersehen habe...

    Gruß
    Dennis


    ...und schonmal vieeelen Dank!!!
     
  2. zeno

    zeno Lane's Prinz Albert

    Dabei seit:
    05.11.05
    Beiträge:
    4.898
    Versuch mal den Doctype auf XHTML zu setzen..
    Und werf den sinnlosen p-Tag in der Hooverbox Liste raus ;)
     
    #2 zeno, 09.10.07
    Zuletzt bearbeitet: 09.10.07
  3. Messerjokke79

    Messerjokke79 Eifeler Rambour

    Dabei seit:
    21.07.06
    Beiträge:
    600
    du kannst doch beim CSS auch einfach sowas angeben:

    img.vogel { width:20px; height:20px}
    img.vogel:hover { width:40px; height:40px}
     
  4. Nogger

    Nogger Damasonrenette

    Dabei seit:
    05.11.05
    Beiträge:
    494
    Ich glaube dir nicht, dass es im Internet Explorer funktioniert. Die Seite enthält garkein Javascript außer einem Counter.
     
  5. Nathea

    Nathea Admin
    AT Administration

    Dabei seit:
    29.08.04
    Beiträge:
    13.547
    @Nogger: Es funktioniert. Sogar auf dem älteren 6-er IE.
     
  6. creative7even

    creative7even Jerseymac

    Dabei seit:
    23.02.05
    Beiträge:
    454
    wie auch immer. IE läuft ja nicht ganz rund. In der Tat wird der hover Effekt nur mit CSS erzielt.

    probier mal den Quellcode der Hoverbilder zu ändern:

    alt:
    Code:
    ...
    <li>
      <a href="#">
        <img src="img/bild_003.jpg"/>
      </a>
      <p>
        <a href="#">
          <img class="preview" alt="Haussperlingsmännchen mit Futter" src="img/bild_003_gr.jpg"/>
        </a>
      </p>
    </li>
    ...
    
    neu:
    Code:
    ...
    <li>
      <a href="#">
        <img src="img/bild_003.jpg"/>
        <img class="preview" alt="Haussperlingsmännchen mit Futter" src="img/bild_003_gr.jpg"/>
      </a>
    </li>
    ...
    
    also den p-Tag weg, und die beiden Bilder (also Thumbnail und hover-Version) innerhalb den a-Tag setzen.
     
  7. Moriarty

    Moriarty Pommerscher Krummstiel

    Dabei seit:
    17.05.04
    Beiträge:
    3.032
    @nogger: ja nee, is klar, deshalb frag ich auch und bastele womöglich in photoshop nen screenshot zusammen? Warum überhaupt lügen, bei einer Sache, die so einfach nachzuprüfen ist? Was Du ja offenbar nicht gemacht hast... ;)

    @rest:
    Der Hovereffekt soll in der Tat durch CSS erzeugt werden. Auf der Hoverbox-Seite ist ein Anwendungsbeispiel, dort funktioniert es mit allen Browsern. Der Quelltext scheint mir auf den ersten Blick identisch zu sein - in der Anwendung, nicht wortwörtlich - und ich finde den Fehler nicht. Beide Bilder im <a>-Tag klappt nicht. Im CSS lediglich das selbe Bild mit "height" und "width" skalieren ist auch nicht sauber... Sollte es nur an der XHTML-Deklaration liegen? Werde das mal ausprobieren...

    Uff, wenn die Seiten XHTML sein sollen, müssen die auch so noch etwas überarbeitet werden... Alle Tags korrekt schliessen, etc... Ist eine Hilfe unter Freunden gewesen, daher habe ich mich jetzt nicht sooo reingekniet wie in "kommerzielle" Aufträge... Wär nur schade, wenn ich das Problem nicht lösen kann, denn im Internet Explorer macht die Seite echt was her...
     
  8. zeno

    zeno Lane's Prinz Albert

    Dabei seit:
    05.11.05
    Beiträge:
    4.898
    xhtml hab ich nur auf der seite raugelesen, hab ich nicht getestet, aber der doofe p tag muss mindestens raus damits läuft ;)
     
  9. Moriarty

    Moriarty Pommerscher Krummstiel

    Dabei seit:
    17.05.04
    Beiträge:
    3.032
    ...wobei der IE sich am <p> nicht zu stören scheint...

    Werds morgen mal mit XHTML probieren und berichten! ...Und das <p> natürlich trotzdem raushauen... ;)
     
  10. creative7even

    creative7even Jerseymac

    Dabei seit:
    23.02.05
    Beiträge:
    454
    doktype ist egal - sollte nur valide sein - ansonsten hat der browser probleme beim rendern.
    nochmal: beide bilder innerhalb des einen a-tags, ein bild ohne klasse (das thumbnail), das 2te mit der klasse "preview" (das hoverbild/größere bild). p-tag raus (für was soll der gut sein?) nur so kanns funktionieren.
    geht alleine aus dem css hervor:

    Code:
      /* preview bild wird by default ausgeblendet */
    .hoverbox a .preview {
      display:none;
    }
    /* beim mouseover event des a tags wird das bild mit der klasse "preview" auf display
    block gesetzt und ein wenig herumpositioniert.  liegt somit über dem thumbnail */
    .hoverbox a:hover .preview {
      border:1px solid #606060;  
      display:block;
      left:-60px;
      position:absolute; 
      top:-90px;
      z-index:1;
    }
    

    lg c7.
     
  11. Nogger

    Nogger Damasonrenette

    Dabei seit:
    05.11.05
    Beiträge:
    494
    Entschuldige, ich hatte das mit einer anderen, javascriptbasierten Lösung verwechselt. Und nein, ich habe in der tat nicht meine altertümliche Windowskiste dafür entstaubt :) Nur gemutmaßt, du hättest in der Zwischenzeit wild Sachen geändert.

    Kurios, dass inzwischen "benutze :hover im Stylesheet"-Lösungen schmissige Namen bekommen. Ich muss mal eine Seite zu "benutze ein link Element, um eine andere Seite aufzurufen" online stellen. Pagechangebox oder so ;)
     
  12. Moriarty

    Moriarty Pommerscher Krummstiel

    Dabei seit:
    17.05.04
    Beiträge:
    3.032
    ;) Scheint in der Tat der Zeitgeist zu sein... Du hast Recht - Hoverbox ist lediglich ein Stylesheet, für alle, die zu faul sind, diese Lösung selbst zu schreiben...
     

Diese Seite empfehlen