• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Div überreinander mit onClick im IExplorer

Status
Für weitere Antworten geschlossen.

atmel

Neues Mitglied
Hallo.
Habe ein Problem mit IExplorer.

Habe zwei div Elemente übereinender. Ein großes div mit Bild im Hintergrund und mehrer kleine div über dem großen Bild.

<div style"position:absolute; z-index:-1; width:100%; height:100%;" onClick="location.href='MainFrame.php'"><img id='backimg' src='hintergrund.png''></div>

<div style="position:absolute; top:0px; left:0px; width:10px; height:10px;" onClick="iCheck();">1</div>
<div style="position:absolute; top:40px; left:40px; width:10px; height:10px;" onClick="iCheck();">2</div>

Wenn ich die kleinen anklicke soll die Javascript Funktion iCheck aufgerufen werden. Drücke ich in das Hintergrundbild soll MainFrame.php ausgeführt werden.

Im Firefox funktioniert es prima. Im IExplorer wird immer MainFrame.php ausgeführt.

Hat einer von euch eine Idee warum das im IExplorer nicht funktioniert?

Vielen Dank.

BYE
Thomas
 
Sorry, hier der code:
HTML:
<html>
<head>
<style type="text/css">
#backimg{position:absolute; z-index:-1; width:80%; height:80%;}
</style>
<script language='JavaScript'>
<!--
  function SetInfo(infostr)
  {
    window.document.getElementById('Info').innerHTML = infostr; 
  }
  //-->
</script>
</head>
<body>

<img id='backimg' src='myimage.png' alt='background'>

<div id="Info" style="position:absolute; border-style:inset; top:5px; left:5px;">Start</div>
<div id="2" style="position:absolute; border-style:inset; top:5px; left:295px; width:130px; height:180px;" onClick="SetInfo('2DIV');">Test</div> 
<div id="3" style="position:absolute; border-style:inset; top:5px; left:425px; width:210px; height:180px;" onClick="SetInfo('3DIV');">Hallo</div> 

</html>
Drücke ich ins div->id=2 dann soll im Info div "2Div" stehen und wenn ich ins div->id=3 drücke soll "3Div" stehen.

Im Firefox alles prima. Im IExplorer funktioniert es nicht.
Vorweg das image kann ich nicht als background einfügen.


Hat einer eine Idee wie es auch im IExplorer funktioniert.

Danke

BYE
Thomas
 
Sorry, hier der code:
HTML:
<div id="2" style="position:absolute; border-style:inset; top:5px; left:295px; width:130px; height:180px;" onClick="SetInfo('2DIV');">Test</div> 
<div id="3" style="position:absolute; border-style:inset; top:5px; left:425px; width:210px; height:180px;" onClick="SetInfo('3DIV');">Hallo</div> 

</html>
Drücke ich ins div->id=2 dann soll im Info div "2Div" stehen und wenn ich ins div->id=3 drücke soll "3Div" stehen.

Im Firefox alles prima. Im IExplorer funktioniert es nicht.
Vorweg das image kann ich nicht als background einfügen.


Hat einer eine Idee wie es auch im IExplorer funktioniert.

Danke

BYE
Thomas

Manche browser haben mit der Groß- und Kleinschreibung. Schreibe mal bitte "onclick" anstatt "onClick". Generell werden Event-Handler klein geschrieben. Probier es mal aus. sehe sonst keinen Fehler auf dem ersten Blick :)
 
Hallo.

Erstmal danke für eure Ideen. Dan mit der Kleinschreibung hat nicht geklappt.

Teste momentan mit IExplorer 6.0.
Kann es evtl daran liegen?
Würde ungern den IExplorer updaten wollen.

BYE
Thomas
 
Hab das Problem finden können. Klick mal den Text an im div. Dann funktionietr es.
Mal ein paar grundsätzliche Sachen
So weit ich weiß nutzt man im script Element nicht mehr das language-Attribut. Dafür aber das type-Attribut (type="text/javascript"). Desweiteren nimmt der IE nur den click war, wenn dieser genau auf den Text ist. Wie man das verhindert weiß ich leider nicht. Und wieso würdest du ungern den IE6 updaten? Wennn du testen willst, dann teste schon in allen gängigsten Browsern auf die Javascript Funktionen (IE 6,7,8 , Firefox, Chrome/Safari).
Ansonsten ist die Auszeichnung als Div Falsch. In einem Div müssen mindest 2 Unterelemente sein. Bei dir ist garkeins sondenr nur Text. Denke da würde sich p anbieten

Edit: Bearbeite das eben. Ist aber wichtig also bitte lesen! :D

Grade erst gecheckt was hier abgeht :D Du willst ein element img als hintergerund verwenden? Dafür benutzt man css. Images werden benutzt um ein Bild auszuzeichnen das zum Inhalt (und nicht zum Design) beiträgt.
Nehme mal das Bild weg und du wirst sehen, dass der Code funktioniert ;)
Das Design absolute zu machen ist übrigens keine gute Idee. Denn somit optimierst du dein Design auf deinen Viewport. Nehmen wir mal an, du hast an Position 800 x 400 ein Element liegen. Dann wünsch ich mir mal Spaß, wenn ich die Seite mit 'nem Iphone besuche, mit ner wesentlich gringeren Auflösung und einem viel kleineren Viewport.
 
Zuletzt bearbeitet:
Danke.

Das wenn ich kein Bild im Hintergrund habe funktioniert.
Problem ist aber ich habe ein Bild im Hintergrund.

Hat einer noch eine Idee wie es gehen könnte.

BYE
Thomas
 
Status
Für weitere Antworten geschlossen.
Zurück
Oben