Problem mit iframe und IE

[doitscha]

Hallo,
kurz über mich,
ich bin 19 Jahre alt und neu in der Materie und im Forum.
Ich bin durch google auf dieses Forum gekommen und hoffe ihr könnt mir bei meinem Problem weiter helfen.

Also, ich brauch ein Menü welches wenn man mit der Maus über einen Punkt geht einen Iframe anzeigt.

Nach langem googeln und experimentieren kam ich auf folgende Lösung:

<div id="menu"><a href="#">Button1<span><iframe src="gewuenschteseite.html"  name="iframe" frameborder="0" scrolling="no"  title="iframe" width="900px" height="900px" background="white" style="position: absolute">Mein Iframe</iframe></span></a></div>

dazu braucht man in der CSS folgende Punkte:

div#menu {
  position: relative; 
  top: 10px; 
  left: 0px; 
  width: 170px; 
  height: 180px; 
  font: 18px Verdana, sans-serif; 
  z-index: 100;
  }
  
div#menu a {
  display: block; 
  text-align: center; 
  font: bold 1em sans-serif; 
  padding: 3px 10px; 
  margin: 0 0 1px; 
  text-decoration: none; 
  color: black; 
  background: #99FF99;
  border: 1px solid black;
  }
  
div#menu a:hover {
  color: #441111; 
  background: #FFFF66;
  border: 1px dotted blue;
  }

div#menu a span {display: none;}
div#menu a:hover span {
   display: block;
   position: absolute; 
   top: 10px; 
   left: 200px; 
   width: 158px;
   z-index: 100;
   color: #000000; 
   }

Je nach gewünschter Formatierung abweichend...

Als ich die Datei im Firefox (;heart;heart;heart) öffnete sah es so gut aus das ich mich nach getaner Arbeit zurücklehnen wollte, doch dann probierte ich es auch im "Bösen >E<" also im IE aus, und siehe da nichts zu sehen, der Scrollbalken des IE´s verlängert sich dem Atribut "heigh" entsprechend, aber weder Hintergrundfarbe noch sonnst irgendwas zu sehen.

Ich hab erst stundenlang experimentiert, ohne Sinnvolles Ergebnis, dann gegooglelt. In der Datenflut von google war kein ähnliches Problem zu finden, es gibt zwar viele Iframe Probleme, aber wirklich irgendwie keine vergleichbaren. Ich hoffe das es nur ein dummer Fehler ist der jemand erfahren sofort ins Auge spring, aber ich bin wirklich Ratlos,

bitte helft mir =)
mfg. Frank

 

[Flemli200]

Was möchtest du denn genau damit erreichen??

 

[doitscha]

hmm

Also Ich will im Menü eine kurze aber voll Formatierte übersicht des Inhaltes zeigen. Und wenn ich das hinter jedem Link ohne iframe mache wird der quelltext schwer anpassbar.

Ich hoffe diese Information hilft weiter, mfg Frank

 

[Flemli200]

Macchs doch einfach das du die Formatierte Übersicht auf eine Bilddatei schreibst, die beim mouseovereffekt angezeigt wird!
Bild 1: Link
Bild 2: Übersicht
Bild 3: Der Link Button wird durch eine Fettgedrucktes BIld der Version ersetzt

(das in den header)

<script language="JavaScript">
<!--
i01 = new Image();
i01.src = "BIld 1.gif"; /* normale-Grafik */
i02 = new Image();
i02.src = "BIld 3.gif"; /* Highlight-Grafik */
i03 = new Image();
i03.src = "Hintergrund.gif"; /* normale-Grafik */
i04 = new Image();
i04.src = "Bild 2.gif"; /* Highlight-Grafik */
function hiLite(imgID,imgObjName) {
// imgID - Name des auszutauschenden Bildes
// imgObjName - Name des Bildes mit dem ausgetauscht wird
document.images[imgID].src = eval(imgObjName + ".src")
}
//-->
</script>

(das im Body tag wo der Link steht)

<a OnMouseover="hiLite('foto1','i02');hiLite('foto2','i04')" OnMouseout="hiLite('foto1','i01'),hiLite('foto2','i04')">
<img name="foto1" src="Bild 1.gif"  border="0" alt="name f&uuml;r dieses Bild = foto1"></a>

(der tag hier steht dort wo die voll formatierte inhaltsübersicht angezeigt wird)--> Du musst beachten, das Hintergrund, dem Hintergrund angepasst ist, sodass nicht auffällt, das dort ein Bild ist. Du kannst das Bild ja so schmal machen, dass es keiner sieht!

<img name="foto2" src="Hintergrund.gif"  border="0" alt="name f&uuml;r dieses Bild = foto2">

Beim Mouseover wird Bild 1 durch Bild 3 ersetzt und Hintergrund mit Bild 2!!

Hoffe das hilft dir weiter!

 

[doitscha]

Danke

Ich wollte diesen Lösungsweg zwar vermeiden, aber du hast recht, das ist einfacher =)

 

[Efchen]

Warum muss das eigentlich JavaScript sein? Das geht doch auch mit CSS (Pseudoklasse :hover) und noch viel einfacher.

 

[doitscha]

Hmm

Ich wollte ja eben kein Java ...
Darum die iFrames.
Aber naja eh ich mich tod mach nehm ich lieber Bilder, weil die gehn einfach per CSS und hover.

danke nochmal an alle helfer =)

 

[Efchen]

Wieso Java? Von Java war keine Rede.

Und bei Bildern musst Du aufpassen, dass Dein Menü trotzdem noch nutzbar ist, wenn jemand keine Bilder darstellen kann.

 

[doitscha]

Hmm

Sry mein Fehler,

Warum muss das eigentlich JavaScript sein? Das geht doch auch mit CSS (Pseudoklasse :hover) und noch viel einfacher.

klang so vie "warum muss das JavaScript sein?"

muss es ja eben nicht ^^
Aber jo ich hoffe ja mal das jeder Bilder darstellen lassen kann,
aber notfalls wird eben eine einzeilige Beschreibung als Alternativtext gemacht =)

 

[Efchen]

Aber jo ich hoffe ja mal das jeder Bilder darstellen lassen kann,
aber notfalls wird eben eine einzeilige Beschreibung als Alternativtext gemacht =)

Nein, kann es natürlich nicht!
Deswegen sind Alternativtexte nicht nur "notfalls", sondern zwingend nötig! Und es muss klar sein, dass Hintergrundgrafiken keine Alternativtexte erlauben.

 

[doitscha]

hmm

Naja kay danke,
in meinem ersten Post ist ein Tooltip beschrieben, solange man kein iFrame sondern Text einbaut funktioniert er einwandfrei,
auch auf allen getestetet Browsern (IE 6-8, Firefox, Opera, Chrome).

:-o:-o:-o