Hallo,
ich habe eine dringende Frage.
Wie kann ich Inhalte eines AP DIVs im Iframe öffnen.
Ich habe mit Dreamweaver CS3 ein html Dokument wo ich auf der linken Seite 2 AP DIVs eingebaut habe und in die DIVs habe ich Bilder eingefügt.Die AP Divs habe ich plaziert um kleine Vorschaubilder anzuzeigen.Auf der rechten Seite habe ich einen Iframe eingebaut.Jetzt möchte ich gerne das wenn ich auf die Vorschaubilder klicke das Sie sich im Iframe öffnen.
Ich hoffe Ihr versteht was ich meine.Ich will auf der linken Seite kleine Vorschaubilder haben und Sie sollen sich per mouseclick im Iframe öffnen.
Schon mal vielen Dank im Vorraus
Im Falle, dass ich alles richtig verstanden habe, sollte dir vielleicht folgendes helfen:
- iFrame bennen - name="bilder-inhalt"
- Links auf deine Bilder legen - href="meinOrdner/beispiel.html
- Als target des Bildes nicht etwa _blank, _self oder sonstiges auswählen, sondern den iFrame ansteuern - target="bilder-inhalt"
Somit wird der Inhalt in den iFrame geladen und alles sollte klappen, wie du es dir vorstellst.
hi,danke erstmal für deine schnelle antwort wegen meiner frage zen bildern im iframe öffnen.zu meiner frage poste ich mal meinen quellcode.vllt kannst du mir daran erklären wo ich was einfügen muss weil ich leider nicht so fit mit dreamweaver bin.wäre cool wenn du mir nochmal antworten würdest.danke im vorraus
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body {
background-color: #ff0066;
margin-left: 600px;
margin-top: -200px;
}
#apDiv1 {
position:absolute;
width:1000px;
height:100px;
z-index:1;
left: 170px;
top: 30px;
background-color: #FF0066;
}
#apDiv2 {
position:absolute;
width:92px;
height:65px;
z-index:2;
left: 50px;
top: 161px;
}
#apDiv3 {
position:absolute;
width:90px;
height:70px;
z-index:3;
left: 142px;
top: 167px;
}
-->
</style></head>
<body>
<div></div>
<div id="apDiv1"><img src="bilder/willkommen-auf-leonie-ploegs-homepage.jpg" width="900" height="100" alt="bilder seite" /></div>
<div id="apDiv2"><img src="bilder/leonie telefoniert.jpg" alt="leonie_telefoniert" width="90" height="70"/></div>
<div id="apDiv3"><img src="bilder/leonie haare hoch.jpg" alt="leonie haare hoch" width="90" height="70" /"></div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><iframe name="LeoniesBilderIframe"width="500"height="500"
></iframe> </p>
</body>
</html>
Vielleicht wäre ja auch diese Lösung was für Dich: http://labs.adobe.com/technologies/spry/demos/gallery/
Hier gibt es ein Tutorial dazu: http://www.adobe.com/de/devnet/dream...oto_album.html
Gruß Torsten
Meine Bilder im Internet: See the world through my eyes
Aber Vorsicht: Meine Bilder können nicht sprechen
Ich biete keinen privaten Support an!
Fragen oder Probleme? Nur keine Scheu verfasse einen Beitrag
Naja.. ich habe dir doch schon die Stichwörter gesagt, das hat dann nichts mehr mit "sich mit Dreamweaver nicht auskennen" zu tun, sondern von generellen Basic HTML Problemen.
Schau in meinen Anhang, da findest du die Stelle, wo die Werte eingetragen werden.
Geht allerdings auch einfach per Code-Eingabe.
Die Stelle target="iFrame" wäre dann interessant und vergibt eben das Ziel des Links.HTML-Code:<img src="bilder/leonie haare hoch.jpg" alt="leonie haare hoch" width="90" height="70" target="iFrame"/">
Viel Spaß..
Danke für die Antworten.Es hat geklappt.
Ich hab ja ein Iframe, Breite und Höhe von 500px.
In die AP DIVs habe ich Bilder eingefügt in der Größe 90 x 70 px,als kleine Vorschau.
Die Original Bilder im Bilder Ordner sind auch in der Größe von 500 x 500 px.
JETZT DAS NÄCHSTE PROBLEM.
Obwohl die Original Bilder die selbe Größe haben wie der Iframe wird mir links ein vertikaler weiser streifen angezeigt.
Wie kann ich das ändern oder die Hintergrundfarbe des Iframes ändern?
Wenn ich mir das ganze nämlich im Explorer anschaue dann habe ich als Iframe einen weissen Kasten bis ich das erste Bild riengeladen habe.
Könnt ihr mir da auch helfen?
Wäre wirklich super!
Auch hier wieder eine einfache Antwort für dich..
Der Code von deinem iFrame sollte vielleicht folgenden Schnipsel noch eingebaut bekommen: scrolling="no"
Somit wird die Scrollbar nicht aktiviert, wenn der Platz für den Inhalt eigentlich nicht ausreicht, somit keine Scrollbar.
Und durchaus auch interessant, wie man derartige Probleme einfach aus der Welt schaffen kann!
Guck mal!
scrolling steht auf NOich habe ja auch keinen scrollbalken sondern einen weissen streifen links am bild.obwohl bildgröße und framegröße gleich sind.
ausserdem zeigt mir der explorer meinen i frame als weisses kästen an.dann wenn ich ein bild anklicke läd er es zwarrein aber halt mit einem weissen streifen an der linken seite
Vielleicht kann man besser helfen, wenn man einen direkten Link zu Deiner Site hat - oder Du Screenshots zeigst...
</andy>
Jetzt bauen wir´09 + ´10
hier ist mal n screenshot.ist was verzerrt aber man sieht den weissen "balken"neben dem foto
den möchte ich gerne weg haben weil foto und Iframe haben ja nun mal die gleiche größe
Vielleicht irgendwo ein Leerzeichen?
Abstände kontrolliert?
...
..
.
Wie gesagt: wenn Du es mal komplett zeigen könntest (die Site), wär wohl vielen geholfen...
</andy>
Jetzt bauen wir´09 + ´10
Was heisst die ganze Site zeigen?Ich hab doch ein Screenbild von der Seite beigefügt.Oder meinst Du den Quellcode??
Ich hab es mir eben nochmal angeschaut und das Problem ist das der die Fotos nicht genau in der Mitte von dem Iframe plaziert.
Ich hatte die Fotos ja mit Photoshop auf 500 x 500 px verkleinert.Die Proportionen hatte ich allerdings beibehalten.Um dann auf die 500 x 500 px zu kommen hatte ich bei den Fotos je nach Aufnahme einen gelben Balken rechts & links bzw. oben und unten zugefügt.
Um halt die Fotos auf 500 x 500 px zu speichern.
Und wie schon gesagt,er öffnet meine Ftos nicht genau in der Mitte vom Iframe.
Dann halt noch das Problem das ich auf der Seite erstmal den Iframe als weisse Fläche sehe bis ich das erste Vorschaubild anklicke.Kann ich die Farbe auch ändern??
Vielleicht würde es mir auch schon weiterhelfen wenn Ihr mir eine Seite sagen würdet wo die ganzen Abkürzungen erklärt sind wie z.B. "src" oder "target".Was die beiden Sachen bedeuten weiss ich zwar aber da gibt es ja noch viele andere.
Sorry für die vielen Fragen aber ich denke mal das dafür so ein Forum ja da ist.
Schon mal vielen Dank für Eure HILFE!!!!!!!
Geändert von silkk101 (27.02.2009 um 16:18 Uhr)
Naja, das kannst du dir doch jetzt via Ausschlussverfahren selber nahe bringen
Der Screenshot war es nicht.. was bleibt über?
Quellcode
Das ist sowas von richtig
Wir können nicht sagen, was du falsch machst, wenn wir keinen Quellcode sehen! So raten wir nur herum, was in deinem Quellcode stehen könnte und warum es deshalb nicht läuft.
Zu viele Variablen im Spiel, wie man so schön sagt
Also lad die Seite doch mal auf einen Server und poste den Link.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Leonie Ploegs Bilder Seite</title>
<style type="text/css">
<!--
body {
background-color: #ff0066;
margin-left: 600px;
margin-top: -200px;
}
#apDiv1 {
position:absolute;
width:1000px;
height:100px;
z-index:1;
left: 170px;
top: 30px;
background-color: #FF0066;
}
#apDiv2 {
position:absolute;
width:90px;
height:70px;
z-index:2;
left: 50px;
top: 161px;
}
#apDiv3 {
position:absolute;
width:90px;
height:70px;
z-index:3;
left: 151px;
top: 176px;
}
#apDiv4 {
position:absolute;
left:93px;
top:257px;
width:70px;
height:90px;
z-index:4;
}
#apDiv5 {
position:absolute;
width:90px;
height:70px;
z-index:5;
left: 181px;
top: 259px;
}
#apDiv6 {
position:absolute;
width:90px;
height:70px;
z-index:6;
left: 257px;
top: 157px;
}
#apDiv7 {
position:absolute;
width:90px;
height:70px;
z-index:7;
left: 63px;
top: 357px;
}
#apDiv8 {
position:absolute;
width:90px;
height:70px;
z-index:8;
left: 170px;
top: 335px;
}
#apDiv9 {
position:absolute;
width:90px;
height:70px;
z-index:9;
left: 283px;
top: 274px;
}
#apDiv10 {
position:absolute;
width:70px;
height:90px;
z-index:10;
left: 269px;
top: 350px;
}
#apDiv11 {
position:absolute;
width:70px;
height:90px;
z-index:11;
left: 196px;
top: 414px;
}
#apDiv12 {
position:absolute;
width:70px;
height:90px;
z-index:12;
left: 353px;
top: 166px;
}
#apDiv13 {
position:absolute;
width:90px;
height:70px;
z-index:13;
left: 351px;
top: 353px;
}
#apDiv14 {
position:absolute;
width:90px;
height:70px;
z-index:14;
left: 381px;
top: 262px;
}
#apDiv15 {
position:absolute;
width:70px;
height:90px;
z-index:15;
left: 480px;
top: 234px;
}
#apDiv16 {
position:absolute;
width:90px;
height:70px;
z-index:16;
left: 432px;
top: 151px;
}
#apDiv17 {
position:absolute;
width:90px;
height:70px;
z-index:17;
left: 463px;
top: 339px;
}
#apDiv18 {
position:absolute;
width:90px;
height:70px;
z-index:18;
left: 270px;
top: 445px;
}
#apDiv19 {
position:absolute;
width:70px;
height:90px;
z-index:19;
left: 364px;
top: 427px;
}
#apDiv20 {
position:absolute;
width:90px;
height:70px;
z-index:20;
left: 98px;
top: 436px;
}
#apDiv21 {
position:absolute;
width:90px;
height:70px;
z-index:21;
left: 168px;
top: 516px;
}
#apDiv22 {
position:absolute;
width:90px;
height:70px;
z-index:22;
left: 50px;
top: 509px;
}
#apDiv23 {
position:absolute;
width:90px;
height:70px;
z-index:23;
left: 453px;
top: 415px;
}
#apDiv24 {
position:absolute;
width:90px;
height:70px;
z-index:24;
left: 348px;
top: 521px;
}
#apDiv25 {
position:absolute;
width:90px;
height:70px;
z-index:25;
left: 450px;
top: 496px;
}
#apDiv27 {
position:absolute;
width:50px;
height:436px;
z-index:26;
left: 596px;
top: 130px;
}
-->
</style></head>
<body>
<div id="apDiv4"><a href="bilder/leonie_bday2.jpg" target="LeoniesBilderIframe"><img src="bilder/leonie_bday2.jpg" alt="leonie_bday2" width="70" height="90" /></a></div>
<div></div>
<div id="apDiv1"><img src="bilder/willkommen-auf-leonie-ploegs-homepage.jpg" width="900" height="100" alt="bilder seite" /></div>
<div id="apDiv2"><a href="bilder/leonie_abends_tennis.jpg" target="LeoniesBilderIframe"><img src="bilder/leonie_abends_tennis.jpg" alt="leonie_abends_tennis" width="90" height="70" /></a></div>
<div id="apDiv3"><a href="bilder/leonie_bday.jpg" target="LeoniesBilderIframe"><img src="bilder/leonie_bday.jpg" alt="leonie_bday" width="90" height="70" /></a></div>
<p> </p>
<p> </p>
<p> </p>
<div id="apDiv17"><a href="bilder/leonie_sandkasten1.jpg" target="LeoniesBilderIframe"><img src="bilder/leonie_sandkasten1.jpg" alt="leonie_sandkasten1" width="90" height="70" /></a></div>
<p> </p>
<div id="apDiv23"><a href="bilder/leonie_tennis.jpg" target="LeoniesBilderIframe"><img src="bilder/leonie_tennis.jpg" alt="leonie_tennis" width="90" height="70" /></a></div>
<p> </p>
<div id="apDiv22"><a href="bilder/leonie_techno.jpg" target="LeoniesBilderIframe"><img src="bilder/leonie_techno.jpg" alt="leonie_techno" width="90" height="70" /></a></div>
<p> </p>
<div id="apDiv5"><a href="bilder/leonie_brille.jpg" target="LeoniesBilderIframe"><img src="bilder/leonie_brille.jpg" alt="leonie_brille" width="90" height="70" /></a></div>
<div id="apDiv9"><a href="bilder/leonie_cappy_schief.jpg" target="LeoniesBilderIframe"><img src="bilder/leonie_cappy_schief.jpg" alt="leonie_cappy_schief" width="90" height="70" /></a></div>
<div id="apDiv10"><a href="bilder/leonie_enten.jpg" target="LeoniesBilderIframe"><img src="bilder/leonie_enten.jpg" alt="leonie_enten" width="70" height="90" /></a></div>
<div id="apDiv13"><a href="bilder/leonie_haare_hoch.jpg" target="LeoniesBilderIframe"><img src="bilder/leonie_haare_hoch.jpg" alt="leonie_haare_hoch" width="90" height="70" /></a></div>
<div id="apDiv14"><a href="bilder/leonie_lacht_nahaufnahme.jpg" target="LeoniesBilderIframe"><img src="bilder/leonie_lacht_nahaufnahme.jpg" alt="leonie_lacht_nahaufnahme" width="90" height="70" /></a></div>
<div id="apDiv15"><a href="bilder/leonie_milchschnitte_spielplatz.jpg" target="LeoniesBilderIframe"><img src="bilder/leonie_milchschnitte_spielplatz.jpg" alt="leonie_milchschnitte_spielplatz" width="70" height="90" /></a></div>
<div id="apDiv18"><a href="bilder/leonie_sandkasten2.jpg" target="LeoniesBilderIframe"><img src="bilder/leonie_sandkasten2.jpg" alt="leonie_sandkasten2" width="90" height="70" /></a></div>
<div id="apDiv19"><a href="bilder/leonie_sandkasten3.jpg" target="LeoniesBilderIframe"><img src="bilder/leonie_sandkasten3.jpg" alt="leonie_sandkasten3" width="70" height="90" /></a></div>
<div id="apDiv20"><a href="bilder/leonie_seifenblase.jpg" target="LeoniesBilderIframe"><img src="bilder/leonie_seifenblase.jpg" alt="leonie_seifenblase" width="90" height="70" /></a></div>
<div id="apDiv21"><a href="bilder/leonie_seifenblasen.jpg" target="LeoniesBilderIframe"><img src="bilder/leonie_seifenblasen.jpg" alt="leonie_seifenblasen" width="90" height="70" /></a></div>
<p> </p>
<p><iframe name="LeoniesBilderIframe"width="500"height="500" scrolling="no" frameborder="0"
></iframe>
</p>
<div id="apDiv27"><img src="bilder/luftballon.jpg" alt="luftballon" width="50" height="436" /></div>
<div id="apDiv26"></div>
<div id="apDiv25"><a href="bilder/leonie_windel_auf_kopf.jpg" target="LeoniesBilderIframe"><img src="bilder/leonie_windel_auf_kopf.jpg" alt="leonie_windel_auf_kopf" width="90" height="70" /></a></div>
<div id="apDiv24"><a href="bilder/leonie_tennis2.jpg" target="LeoniesBilderIframe"><img src="bilder/leonie_tennis2.jpg" alt="leonie_tennis2" width="90" height="70" /></a></div>
<div id="apDiv16"><a href="bilder/leonie_regenbogenaugen.jpg" target="LeoniesBilderIframe"><img src="bilder/leonie_regenbogenaugen.jpg" alt="leoonie_regenbogenaugen" width="90" height="70" /></a></div>
<div id="apDiv12"><a href="bilder/leonie_fuesse.jpg" target="LeoniesBilderIframe"><img src="bilder/leonie_fuesse.jpg" alt="leonie_fuesse" width="70" height="90" /></a></div>
<div id="apDiv11"><a href="bilder/leonie_fruchtzwerg.jpg" target="LeoniesBilderIframe"><img src="bilder/leonie_fruchtzwerg.jpg" alt="leonie_fruchtzwerg" width="70" height="90" / /></a></div>
<div id="apDiv8"><a href="bilder/leonie_calippo_eis.jpg" target="LeoniesBilderIframe"><img src="bilder/leonie_calippo_eis.jpg" alt="leonie_calippo_eis" width="90" height="70" /></a></div>
<div id="apDiv7"><a href="bilder/leonie_brille_handy.jpg" target="LeoniesBilderIframe"><img src="bilder/leonie_brille_handy.jpg" alt="leonie_brille_handy" width="90" height="70" /></a></div>
<div id="apDiv6"><a href="bilder/leonie_brille_auf_kopf.jpg" target="LeoniesBilderIframe"><img src="bilder/leonie_brille_auf_kopf.jpg" alt="leonie_brille_auf_kopf" width="90" height="70" /></a></div>
<p> </p>
</body>
</html>
Und ich sage noch, lade es hoch
Ganz nebenei, es gibt auch im Forum eine Möglichkeit HTML Quellcode zu zeigen, und zwar packst du den gesamten Code in diese beiden Tags < HTML > < / HTML
In der Editoransicht ist das dieses Zeichen <>
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
LinkBack URL
About LinkBacks
Zitieren
