Hoverbox im Safari/Firefox...

[Moriarty]

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...

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!!!

 

[zeno]

Versuch mal den Doctype auf XHTML zu setzen..
Und werf den sinnlosen p-Tag in der Hooverbox Liste raus

 

[Messerjokke79]

du kannst doch beim CSS auch einfach sowas angeben:

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

 

[Nogger]

Ich glaube dir nicht, dass es im Internet Explorer funktioniert. Die Seite enthält garkein Javascript außer einem Counter.

 

[Nathea]

@Nogger: Es funktioniert. Sogar auf dem älteren 6-er IE.

 

[creative7even]

@Nogger: Es funktioniert. Sogar auf dem älteren 6-er IE.

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:

...
<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:

...
<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.

 

[Moriarty]

@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...

 

[zeno]

xhtml hab ich nur auf der seite raugelesen, hab ich nicht getestet, aber der doofe p tag muss mindestens raus damits läuft

 

[Moriarty]

...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...

 

[creative7even]

...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...

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:

  /* 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.

 

[Nogger]

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

 

[Moriarty]

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

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...