JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.

Auf Thema antworten

Beitrag: [QUOTE="321mark, post: 7181, member: 434"] Hallo Leute, habe eine sehr allgemeine Frage, aber ich bin mir sicher dass ein paar von euch mir sicher weiterhelfen können. Möchte folgendes realisieren (quasie eine Imagemap): Beim Klick auf einen bestimmten Bereich auf einem Foto möchte ich das ein bestimmtest bild aufpoppt in einer shadowbox. Das Popup realisier ich mit einem Plugin (reagiert auf die class modal). Die Links anzuklicken funktioniert in allen Internet Explorern (der Mouseovereffekt ist mir gar nicht so wichtig) bis auf den Internetexplorer 7. Der zeigt mir zwar das Hintergrundbild an, aber das war es dann auch schon. Ich vermute, es liegt an der CSS Postionsangabe, den bei der position absolute funktionier es im IE 7 wieder. Wie kann ich das schlamassel geschickt lösen. Kann leider keine absoluten Positionsangaben angeben, da das Hintergrundfoto immer auf einer unterschiedlichen Position angezeigt wird Danke für eure Ratschläge Grüße Habe folgende Code in mein Beitrag eingefügt: Beitrag: [CODE]<div id="map_eg"> <li><a class="musik modal" href="/images/geraetehaus/musik.jpg" target="_blank" >Musikanten</a></li> <li><a class="atemschutz modal" href="/images/geraetehaus/at.jpg" target="_blank" >Atemschutz Werkstatt</a></li> <li><a class="toiletten modal" href="/images/geraetehaus/wc.jpg" target="_blank" >Toiletten & Waschräume</a></li> <li><a class="eingangsbereich modal" href="/images/geraetehaus/eingang.jpg" target="_blank" >Eingangsbereich</a></li> <li><a class="werkstatt modal" href="/images/geraetehaus/werkstatt.jpg" target="_blank" >Werkstatt</a></li> <li><a class="durchgang modal" href="/images/geraetehaus/durchgang.jpg" target="_blank" >Durchgang</a></li> <li><a class="einsatzzentrale modal" href="/images/geraetehaus/einsatzzentrale.jpg" target="_blank" >Einsatzzentrale</a></li> <li><a class="lager modal" href="/images/geraetehaus/lager.jpg" target="_blank" >Lager</a></li> <li><a class="fahrzeughalle modal" href="/images/geraetehaus/halle.jpg" target="_blank" >Fahrzeughalle</a></li> <li><a class="schlauchwaschanlage modal" href="/images/geraetehaus/schlauchwaschanlage.jpg" target="_blank" >Schlauchwaschanlage</a></li> <li><a class="schlauchturm modal" href="/images/geraetehaus/schlauchturm.jpg" target="_blank" >Schlauchturm</a></li> </div> <h4 style="text-align: center;">Obergeschoss</h4> <div id="map_og"> <li><a class="lehrmittelraum modal" href="/images/geraetehaus/lehrmittel.jpg" target="_blank" >Lehrmittelraum</a></li> <li><a class="kleiderraum modal" href="/images/geraetehaus/kleider.jpg" target="_blank" >Kleiderraum</a></li> <li><a class="seminarraum modal" href="/images/geraetehaus/seminarraum.jpg" target="_blank" >Seminarraum</a></li> <li><a class="garderobe modal" href="/images/geraetehaus/garderobe.jpg" target="_blank" >Garderobe</a></li> <li><a class="technikraum modal" href="/images/geraetehaus/technik.jpg" target="_blank" >Technikraum</a></li> <li><a class="treppenhaus modal" href="/images/geraetehaus/treppenhaus.jpg" target="_blank" >Treppenhaus</a></li> <li><a class="toilettenog modal" href="/images/geraetehaus/wc_og.jpg" target="_blank" >Toiletten</a></li> <li><a class="bereitschaftsraum modal" href="/images/geraetehaus/bereitschaft.jpg" target="_blank" >Bereitschaftsraum</a></li> </div>[/CODE] CSS: [CODE]/*######################## IMAGEMAPS#######################################*/ /* ---------------------imagemap Erdgeschoss---------------------------------*/ #map_eg { background: url("/images/geraetehaus/ffweg_small.jpg") no-repeat scroll left top #FFFFFF; font-family: arial,helvetica,sans-serif; font-size: 8pt; height: 300px; margin: 0 0 0 40px; padding: 0; width: 660px; } #map_eg li { list-style: none outside none; margin: 0; padding: 0; } #map_eg li a { color: #000000; display: block; position: relative; text-decoration: none; } #map_eg li a span { display: none; } #map_eg li a:hover span { -moz-border-radius: 5px 5px 5px 5px; background-color: #E6E4E4; border: 1px solid #555555; display: block; left: 0; min-width: 100px; padding: 10px; position: relative; text-align: center; top: 100px; } #map_eg a.musik { height: 222px; left: 0; top: 22px; width: 170px; } #map_eg a.atemschutz { height: 45px; left: 170px; top: -200px; width: 63px; } #map_eg a.toiletten { height: 53px; left: 170px; top: -200px; width: 71px; } #map_eg a.eingangsbereich { height: 81px; left: 170px; top: -200px; width: 74px; } #map_eg a.werkstatt { height: 41px; left: 235px; top: -378px; width: 63px; } #map_eg a.durchgang { height: 71px; left: 247px; top: -373px; width: 49px; } #map_eg a.einsatzzentrale { height: 57px; left: 247px; top: -370px; width: 55px; } #map_eg a.lager { height: 44px; left: 301px; top: -547px; width: 249px; } #map_eg a.fahrzeughalle { height: 133px; left: 301px; top: -546px; width: 252px; } #map_eg a.schlauchwaschanlage { height: 203px; left: 553px; top: -725px; width: 63px; } #map_eg a.schlauchturm { height: 58px; left: 553px; top: -721px; width: 64px; } /* ---------------------imagemap Obergeschoss---------------------------------*/ #map_og { background: url("/images/geraetehaus/ffwog_small.jpg") no-repeat scroll left top #FFFFFF; font-family: arial,helvetica,sans-serif; font-size: 8pt; height: 350px; margin: 0 0 0 70px; padding: 0; width: 660px; } #map_og li { list-style: none outside none; margin: 0; padding: 0; } #map_og li a { color: #000000; display: block; position: relative; text-decoration: none; } #map_og li a span { display: none; } #map_og li a:hover span { -moz-border-radius: 5px 5px 5px 5px; background-color: #E6E4E4; border: 1px solid #555555; display: block; left: 0; min-width: 100px; padding: 10px; position: relative; text-align: center; top: 100px; } #map_og a.lehrmittelraum { height: 52px; left: 24px; top: 31px; width: 124px; } #map_og a.kleiderraum { height: 47px; left: 152px; top: -18px; width: 120px; } #map_og a.seminarraum { height: 183px; left: 27px; top: -12px; width: 245px; } #map_og a.garderobe { height: 120px; left: 277px; top: -250px; width: 54px; } #map_og a.technikraum { height: 41px; left: 335px; top: -368px; width: 166px; } #map_og a.treppenhaus { height: 71px; left: 335px; top: -363px; width: 86px; } #map_og a.toilettenog { height: 74px; left: 422px; top: -435px; width: 80px; } #map_og a.bereitschaftsraum { height: 114px; left: 277px; top: -432px; width: 142px;[/CODE] [/QUOTE]

Authentifizierung