IFrames und Bild ändern @ tutorials.de: Tutorials, Forum & Hilfe

tester33 · 09.07.10 09:24

Hallo zusammen!

Ich arbeite gerade an einer Homepage, in der ich mit IFrames arbeite. Ich habe ein Menü eingefügt, welches ein Bild ist und werde es mit onmouseover ausstatten. So werde ich für jede Textseite ein neues Bild einfügen müssen. Nun ein Beispiel:
man klickt auf Home, dann soll erscheinen:

- das entsprechende "Home Bild" in welchem Home mit einem Rahmen verstärkt wurde.
- der IFrame Text, blabla...
- wenn man dann über das Menü fährt (onmouseover) soll der Punkt Menü angewählt bleiben, aber ein Rahmen um den Menüpunkt erscheinen, "über" welchem die Maus gerade ist.

Hier mal mein bisheriger Code:

<html>
<body>

<img src="menue_ohne benutzerdefinierung.jpg" align="center" border="0" name="home">

<div style="text-align:center;">
<iframe src="startseite.htm" name="Anzeige" width="70%" height="50%" frameborder="0" marginheight="10" marginwidth="10">
</div>
<p>Ihr Browser kann leider keine IFrames anzeigen</p>
</iframe>

</body>
</html>

MfG
Simon

Maik · 09.07.10 09:48

Moin,

geht es dir darum, das aktuell geöffnete Dokument des iFrames im Navigationsmenü hervorzuheben, wie ich es in meinem Webmaster-FAQ-Beitrag [CSS] Wie kann ich die aktuell geöffnete Seite im Navigationsmenü hervorheben? vorstelle?

Wenn dem so sein sollte, benötigst du aufgrund des iFrames JavaScript, da hier die CSS-Technik nicht funktioniert.

mfg Maik

tester33 · 09.07.10 10:14

Danke für die schnelle Antwort!
Das Problem ist folgendes:

Die Textseite auf der man nun im Moment gerade ist, z.B. Home wird oben markiert. Dann will man aber z.B. auf Kontakt, wenn man mit der Maus darüber ist bleibt das "Home" markiert, aber "Kontakt" wird umrandet. Dies wäre kein Problem aber ich mache es mit einem Bild,. Ich kann den Iframe Inhalt ändern, die Bilder?

MfG
Simon

Maik · 09.07.10 10:25

Vielleicht entspricht ja dies hier deinen Vorstellungen?

Bildwechsel bei linkwechsel

mfg Maik

tester33 · 09.07.10 10:40

Ja, das wäre wohl so was ähnliches. Danke!
ich werde nun daran arbeiten, wenn ich keine Fragen mehr habe schliesse ich den Thread.

MfG
Simon

Nun sieht es so aus, aber irgendwie funktioniert das nicht...

HTML-Code:

<!-- Grafiken vorladen -->
<script type="text/javascript">
<!--
image1 = new Image();
image1.src = "menue_ohne benutzerdefinierung.jpg";
image2 = new Image();
image2.src = "menue_markierung home.jpg";
image3 = new Image();
image3.src = "link3.jpg";
//-->
</script>

<body>

<img src="menue_ohne benutzerdefinierung.jpg" align="center" border="0" name="home">
<p>
  <a href="startseite.htm" target="Anzeige" onclick="start.src='menue_ohne benutzerdefinierung.jpg'"><b>home</b></a><br>
  <a href="hobbys.htm" target="Anzeige" onclick="start.src='menue_markierung home'"><b>Hobbys</b></a>
</p>


<div style="text-align:center;">
<iframe src="startseite.htm" name="Anzeige" width="70%" height="50%" frameborder="0"  marginheight="10" marginwidth="10">
</div>
  <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen</p>
</iframe>

</body>
</html>

Maik · 09.07.10 11:00

Deine vergebenen Namen für das Bildobjekt stimmen auch nicht überein (home vs. start).

mfg Maik

tester33 · 09.07.10 11:26

Ist das nicht korrekt?

HTML-Code:

<!-- Grafiken vorladen -->
<script type="text/javascript">
<!--
image1 = new Image();
image1.src = "menue_ohne benutzerdefinierung.jpg";
image2 = new Image();
image2.src = "menue_markierung home.jpg";
image3 = new Image();
image3.src = "link3.jpg";
//-->
</script>

<body>

<img src="menue_ohne benutzerdefinierung.jpg" align="center" border="0" name="start">
<p>
  <a href="startseite.htm" target="Anzeige" onclick="start.src='menue_ohne benutzerdefinierung.jpg'"><b>home</b></a><br>
  <a href="hobbys.htm" target="Anzeige" onclick="start.src='menue_markierung home'"><b>Hobbys</b></a>
</p>


<div style="text-align:center;">
<iframe src="startseite.htm" name="Anzeige" width="70%" height="50%" frameborder="0"  marginheight="10" marginwidth="10">
</div>
  <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen</p>
</iframe>

</body>

Maik · 09.07.10 11:29

Bis auf den fehlenden Dateityp .jpg bei "menue_markierung home" schon

Leerzeichen sollten zudem in Dateinamen vermieden werden.

mfg Maik

tester33 · 09.07.10 11:32

Danke vielmal!
Endlich funktioniert es!
Ich werde den Thread aber noch ein bisschen offen lassen, ich werde wohl noch einige Fragen später haben.
Ist es eigentlich so, wenn der Browser etwas nicht lesen kann dass er es einfach ignoriert?
So zeigt er einfach z.B. Iframes nicht an?

Maik · 09.07.10 11:35

Könnte eventuell daran liegen, weil du den schliessenden </div>-Tag nicht im Anschluß an den </iframe>-Tag notiert hast.

mfg Maik

Maik · 09.07.10 12:47

Die zweite mögliche Ursache könnte in deinem deklarierten Dokumenttyp zu finden sein, der das (X)HTML-Dokument den Browsern im standardkonformen Modus übergibt, und daher die relative Höhenangabe für den iFrame nicht wie gewünscht interpretiert wird, da entgegen dem "Quirks Mode" im "Standards Mode" der Dokumentkörper (<body>) nur die Höhe erhält, die der Inhalt von ihm abverlangt.

Für diesen Fall wird zusätzlich ein Stylesheet benötigt, in dem, deinem gezeigten Markup zufolge, die drei HTML-Elemente <html>, <body> und <div> mit height:100% formatiert werden.

Der Zusatz margin:0 setzt hier den voreingestellten Außenabstand des Dokumentkörpers zurück, da dieser ansonsten gemäß dem Box-Modell zur height-Eigenschaft hinzuaddiert werden, und die Summe größer ausfällt, wie der Viewport selbst an Höhe besitzt (= 100%), womit die vertikale Scrollaufleiste erscheint.

Code xhtml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="author" content="Maik" />
    <meta name="date" content="2010-07-09" />
    <title>tutorials.de | IFrames und Bild ändern</title>
 
    <style type="text/css">
      /* <![CDATA[ */
        html,body,div { height:100%; margin:0; }
      /* ]]> */
    </style>
 
  </head>
  <body>
    <div style="text-align:center;">
      <iframe src="startseite.htm" name="Anzeige" width="70%" height="50%" frameborder="0"  marginheight="10" marginwidth="10">
        <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen</p>
      </iframe>
    </div>
  </body>
</html>

mfg Maik

tester33 · 12.07.10 11:48

Hallo zusammen, ich habe nun wieder eine Frage, wie kann ich denn machen dass das IFrame nicht das Hintergrundbild übernimmt, also eine eigene Farbe hat?
Es übernimmt mir eben jetzt das Hintergrundbild, muss man das mit CSS machen?
Ich denke mal schon, oder? Aber wie?

Maik · 12.07.10 12:35

Sollten die Seiten, die im iFrame geladen werden, das gleiche Hintergrundbild besitzen, änderst du dies eben in ihnen entsprechend ab.

Lektüre zum eigenständigen Studieren und Umsetzen: Hintergrundfarben und -bilder

mfg Maik

tester33 · 12.07.10 12:55

Danke, das erste Problem hab ich immer noch nicht ganz gelöst...
wenn man am Anfang auf Home ist, habe ich so einige Bilder mit onmouseover, funktioniert wohl... Aber bei Impressum muss ja der onmouseover Effekt ausgewechselt werden, oder einfach die Bilder. Wie geht das?

Maik · 12.07.10 12:59

Wenn ich deine Ausführung richtig interpretiere:

Code :

1	<img src="bild1.jpg" [B]onmouseover="this.src='bild2.jpg'" onmouseout="this.src='bild1.jpg'"[/B]>

mfg Maik

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Größe des Mutter-IFrames ändern

Link aussehen ändern wenn iframes geöffnet werden

2 iFrames durch einen Link ändern ?

Doppelverlinkung = 2 iframes ändern

zwei iframes mit einem klick ändern

Stichworte

E-Mail:

Abonnieren Abbestellen