Verlinkte div box funktioniert im InternetExplorer nicht!?

    Hallo,

    gerade arbeite ich an einem kleinen Internetauftritt: http://xxxxx.bplaced.net/website/index.html

    auf dieser Seite habe ich mehrere Fotos angeordnet, die man verschieben kann und dessen Bildunterschrift ein Hyperlink darstellt. Foto und Hyperlink sind in einer div box.

    Nach mehreren Tests habe ich die Objekte "Poster" und "Street Art" so editiert, dass man das Bild nur an den oberen 20px des Bildes verschieben kann und der Rest des Bildes durch eine darübergelegte div box als Hyperlink dient.

    In Firefox funktioniert das optimal. Beim Internet Explorer funktioniert der Hyperlink auf dem Bild leider nicht. Ist es möglich den Code so umzuschreiben, dass die Seite sowohl im Firefox als auch im Internet Explorer funktioniert?


    Vielen Dank!
    Michael

    ps: stört euch nicht an dem unaufgeräumten Code - die Seite ist noch in der Entstehungsphase.

    /edit:
    der Text im Grün war vorher, aber es geht auch einfacher...
    1. die höhe/breite beim Poster stimmen nicht so ganz
    2. das wäre das <div> für den Link beim Poster:

    HTML
    <div style="position: absolute; left: 0px; top: 20px; width: 100px; height: 80px; background: blue; opacity: 0.0; filter: Alpha(opacity=0);"> </div>

    Statt eines Bildes, reicht ein background + opacity (erste angabe für alle browser, 2te angabe extra für den IE...)

    Nimm ein transparentes Bild und stell es als Background des Divs das als link dienen soll, hab das ganze mal getestet - mit einem background-color tuts im IE, sollte also helfen... Wirst allerdings noch ein IE PNG fix brauchen, einfach googlen ;)

    2 Mal editiert, zuletzt von Grevas (8. Oktober 2009 um 00:14)

    Vielen Dank für Deine schnelle Hilfe. Habe jetzt einfach ein transparentes .gif als Hintergrund verwendet. Allerdings gibts noch ein kleines Problem: Im Internet Explorer wird über der DivBox mit dem transparenten Hintergrund trotz des funktionierenden Hyperlinks keine Hand sondern nur ein normaler Mauszeiger angezeigt. Wie bekomme ich den Hyperlink durch eine Hand als Mauszeiger gekennzeichnet? Oder macht es einen Unterschied, wenn ich eine .png als Hintergrund verwende?

    so, habe beide Möglichkeiten ausprobiert. Beides funktioniert! Danke hierfür!

    Einen Schönheitsfehler gibt´s allerdings noch: Bei beiden Möglichkeiten (Poster - opacity; Street Art - transparentes.gif) erscheint über der verlinkten Fläche keine Hand als Mauszeiger. Kann man das noch hinbekommen?

    hier die aktualisierte seite:
    http://xxxxx.bplaced.net/website/index.html

    Einmal editiert, zuletzt von mxxxx (8. Oktober 2009 um 00:31)

    Nimm doch einfach ein a-tag und setze ein bild in diesen rein.
    Bsp:

    Code
    <a href="" title=""><img alt=""></a>

    Einmal editiert, zuletzt von thilda (12. Oktober 2009 um 13:31)

    Nicht ganz... ihr legt immer ein Div über das Bild. Warum verlinkt ihr es nicht gleich komplett. Ein extra Container darüber zu stülpen der dann ein Link-attribut hat ist in meinen Augen zu viel des guten.

    Weil es eben nicht komplett verlinkt werden soll? Und ob ich ein <img> drüber leg oder ein div ist vom prinzip her egal, mit nem background gehts aber einfacher. Meinetwegen kann er auch ein <a> tag als block definieren und den dann benutzen, letztendlich banane...