Div Inhalte ändern mit JavaScript
0 0 
Marc
0 0 Marc
0 0 0 0 Marc
0 
Patrick Andrieu
Div Inhalte ändern mit JavaScript
Hallo liebe Foristen!
Kurz vorweg:
Mir ist bewusst, dass dieses Thema kein neues ist und dass es unzählige Posts dazu im Netz gibt - ich habe viele selber gelesen.
ABER in den meisten Fällen erweisen sich die Lösungsansätze als individuelle Lösung, Blaupausen gibt es beim Programmieren eher selten. Daher hoffe ich, dass ihr trotzdem etwas Geduld aufbringt und Euch mein Problem anhört - vielen Dank!
Die Situation:
Meine Seite ist ein optisch schlicht gehaltenes Portfolio meiner Arbeit. Dies soll sich auch im Quelltext fortsetzen, d.h. ich möchte möglichst vielen Browsern erlauben meine Seite darzustellen und das zügig.
Im Vordergrund steht ein großer Div-Container (1000*500px), welcher sich in der Fenstermitte zentriert und 2 Bilder enthält: 1 Bild (5000*500px), welches den Container durch seine Breite zum "Scroll-Fenster" macht (horizontal) und ein zweites Bild, welches am Ende hinter dem ersten Bild steht und als Link fungieren soll.
Das Problem:
Jetzt soll beim Klicken auf den Link sich der Inhalt des Div-Containers ändern, d.h. entweder beide Bilder durch neue ersetzt werden oder ein neuer Container an die Stelle des alten rücken. Wichtig wäre mir, dass die Inhalte auch nur geladen werden, wenn sie benötigt werden (Stichwort "visible/hide").
Am liebsten würde ich auch OHNE
- AJAX
- PHP
- iframe
- z-index
auskommen, wegen nicht vorhandenen Kenntnissen, Kapazitäten oder der Kompabilität mit gewissen Browsern. Unter JavaScript habe ich Lösungsansätze gefunden die meinen Vorstellungen nahe kamen, sie aber nicht verstanden für mein Problem umzuschreiben.
Der Quelltext soweit (der o.g. Div-Container heißt s5):
<html>
<head><title>CSS versuche EINSTIEG</title></head>
<body>
<style type="text/css">
body { margin:0; padding:0; height:0px; background-image:url(schatten4.jpg);background-repeat:no-repeat;}
#f0 { position:absolute; top:10px; left:10px; width:150px; height:60px; border:0px solid #840; bbackground-color:#000000; }
#s0 { position:absolute; top:35px; left:260px; width:100px; height:100px; overflow:hide; border:0px solid #840;}
#s1 { position:absolute; top:35px; left:420px; width:100px; height:100px; overflow:hide; border:0px solid #840;}
#s2 { position:absolute; top:35px; left:530px; width:100px; height:100px; overflow:hide; border:0px solid #840;}
#s3 { position:absolute; top:35px; left:670px; width:100px; height:100px; overflow:hide; border:0px solid #840;}
#s4 { position:absolute; top:35px; left:790px; width:100px; height:100px; overflow:hide; border:0px solid #840;}
#s5 { position:relative; top:160px; margin-left:auto; margin-right:auto; width:1010px; height:550px; overflow:auto; border:0px solid #840;}
</style>
<div id="f0">
<img src="logo3.jpg" alt="link0">
</div>
<div id="s0">
<img src="e_m.jpg" alt="link1">
</div>
<div id="s1">
<img src="p_o.jpg" alt="link2">
</div>
<div id="s2">
<img src="v_o.jpg" alt="link3">
</div>
<div id="s3">
<img src="k_o.jpg" alt="link4">
</div>
<div id="s4">
<img src="i_o.jpg" alt="link5">
</div>
<div id="s5">
<div style="width:9000px">
<img src="portfolio.jpg" style="float:left; width:auto" alt="work">
<img src="link.jpg" style="float:none; width:auto" alt="work">
</div>
</div>
</body>
</html>
Für jede Hilfe & Anregung wäre ich sehr sehr dankbar!
mfG 0-9a-z
-
Hi there,
Hallo liebe Foristen!
sind das die, die Bumengestecke machen?
Der Quelltext soweit (der o.g. Div-Container heißt s5):
vorneweg: das absolute Positionieren der Links ist Geschmackssache, besser wäre wahrscheinlich eine Liste, aber warum packst Du die Bilder, die zu Deinen Links führen, wieder in divs? Das funktioniert auch, wenn Du die ID einfach dem entsprechenden Bild gibst, und nicht dem einschliessenden div.
<div id="s5">
soweit, so gut...
<div style="width:9000px">
was hast Du vor? Die meisten Anwender empfinden horizontales Scrollen als ziemlich lästig, aber sei's drum, wenn's zu Deinem Konzept gehört...
Für jede Hilfe & Anregung wäre ich sehr sehr dankbar!
Von vielen anderen Möglichkeiten abgesehen denke ich wäre es am einfachsten, wenn Du den Inhalt des s5-Divs einfach mit innerHTML (genauso geschrieben) veränderst. Das könnte so aussehen, daß der Aufruf einer Javascriptfunktion folgendes enthält:
function aendereDivInhalt() { document.getElementById('s5').innerHTML=der_Inhalt_Deiner_Anweisungen; }wobei Du bei Inhalt Deiner Anweisungen darauf achten solltest, keine Zeilenumbrüche einzufügen.
-
Hallo,
Der Quelltext soweit (der o.g. Div-Container heißt s5):
<div style="width:9000px">was hast Du vor? Die meisten Anwender empfinden horizontales Scrollen als ziemlich lästig, aber sei's drum, wenn's zu Deinem Konzept gehört...
Da ich so ein Konzept noch nie umgesetzt habe (ein nettes Beispiel dafür gibt es auf csszengarden - sah jedenfalls nett aus, als die Monitore noch nicht so viele Pixel hatten wie heute und schon nicht mehr so wenige wie mein Handy), kann ich keine Praxis-Erfahrung beisteuern. Aber eines sollte klar sein: so ein Design wird gerade nicht von möglichst vielen Leuten gesehen, wird unverhältnismäßig lange laden und widerspricht jedweder Nutzererfahrung und allen Quasi-Standards, die sich so in den letzten Jahren etabliert haben.
Wenn man es also nicht wegen höchstmöglicher Zugänglichkeit und Benutzerfreundlichkeit einsetzen will, sondern obwohl es diesen Ansprüchen gerade nicht genügt, sollte es doch auch ganz ohne JavaScript funktionieren. Seiteninterne Links und ids sollten hierfür genügen?!? - Oder habe ich die Aufgabe nicht verstanden?
Viele Grüße,
Marc.-
Hey, vielen Dank schonmal!
An Klawischnigg:
"document.getElementById('s5').innerHTML=der_Inhalt_Deiner_Anweisungen;"
Wie könnte denn so eine innerHTML-Funktion lauten, also das eigentliche tauschen? Würde ich den Inhalt des Divs ansprechen, die Bilder, oder den ganzen Container ersetzen?
An Marc:
"so ein Design wird gerade nicht von möglichst vielen Leuten gesehen, wird unverhältnismäßig lange laden und widerspricht jedweder Nutzererfahrung und allen Quasi-Standards, die sich so in den letzten Jahren etabliert haben."
Ja unkonventionell darf es gerne sein, nur nicht umständlich - schließt JavaScript denn wirklich viele Leute von der Betrachtung aus? Mit CSS fahre ich bisher ja ziemlich sicher. Da das Bild der einzige Inhalt der Seite in dem Sinne ist, kann ich mit dem Ladevorgang leben.
-
Hallo,
An Marc:
"so ein Design wird gerade nicht von möglichst vielen Leuten gesehen, wird unverhältnismäßig lange laden und widerspricht jedweder Nutzererfahrung und allen Quasi-Standards, die sich so in den letzten Jahren etabliert haben."
Ja unkonventionell darf es gerne sein, nur nicht umständlich - schließt JavaScript denn wirklich viele Leute von der Betrachtung aus?
Wie viele genau, weiß ich nicht - das hängt davon ab, wie sich die Besucher Deiner Seite zusammensetzen - in einem mp3-Portal, das vor allem von Jugendlichen besucht wird, schaltet sicher so gut wie niemand JavaScript ab und fast alle werden sich auch Plugins für Flash, Shockwave und sogar Silverlight installieren - bietest du dort nur klassische Musik an, wirst Du ein ganz anderes Clientel haben, die vielleicht schon durch die Sicherheitswarnungen der Browser davon abgehalten wird, solche Erweiterungen zu installieren. Firefox-Erweiterungen wie NoScript (was ich selber benutze) machen es auch ziemlich komfortabel mit standardmäßig abgeschalteten Scripten zu surfen und es nur zu aktivieren, wenn man der Meinung ist, dass die Inhalte so wichtig sind oder eine Site so vertrauenswürdig ist, dass man Scripte (temporär) erlaubt. Wenn Du selbstbewusst genug bist, zu glauben, dass sehr viele Menschen Deine Inhalte unbedingt sehen wollen und dafür bereit sind, das Sicherheitsrisiko zu tragen, dann nutze ruhig JavaScript.
Wie auch immer: Deinen eigenen Anspruch möglichst vielen Leute Zugang zu Deiner Seite zu verschaffen, genügst du damit nicht.
Und unkonventiell benötigt immer eine Einarbeitung in die Handhabung Deiner Seite. Das dient auch nicht gerade einer besonders einfachen Bedienung. Nicht umsonst heißt ein Buch zur Benutzerfreundlichkeit "Don't make me think"...
Mit CSS fahre ich bisher ja ziemlich sicher. Da das Bild der einzige Inhalt der Seite in dem Sinne ist, kann ich mit dem Ladevorgang leben.
Das mag ja sein. Du musst ja auch keine Seite erstellen, die von möglichst vielen Menschen möglichst einfach und schnell genutzt werden kann - aber wenn dies Dein Anliegen ist, solltest du nicht vergessen, dass Du durch den Verzicht auf Konventionen eben dieses Konzept verwässerst.
Umn was für ein Bild handelt es sich denn? Eine 1px-Grafik von 1kb Größe? Denke auch daran, dass Bilder von Handy-Nutzern gerne abgeschaltet werden, weil sie in der Regel viele kbyte oder sogar Mbyte groß sind - was sehr schnell sehr teuer werden kann. Funktioniert Deine seite dann noch?
Möglichst vielen Ansprüchen zu genügen bedeutet auch, Nutzer zu berücksichtigen, die (zeitweise) keine 800x600 Pixel zur Verfügung haben - vielleicht sogar gar keinen Bildschirm.
Aber das ist alles freiwillig für Dich.
Viele Grüße,
Marc.-
Hey Marc, vielleicht hätte ich noch genauer auf die Inhalte eingehen sollen:
Das Bild ist auf Web-konforme Maße heruntergerechnet und beinhaltet neben vielen einzelnen Grafiken (mein Portfolio) auch Text. Sie ist so aufgebaut (angeschnitten), dass sie zum Scrollen "einläd", also durchaus den Nutzer etwas "fordert". Ich bin mir schon im Klaren, dass Herr oder Frau Mustermann gerne ihr Menü links oder oben ausgerichtet vorfinden und mittig ihre Informationen abgreifen wollen. Den Besuchern meiner Seite unterstelle ich jetzt einfach mal etwas Mut & Entdeckergeist.
gruß 09az
-
Hallo, ich habe jetzt mal eine kleine Test-Datei angelegt in welcher 2 Div-Container mit Bild dargestellt werden. Der zweite Container (s0) kann sogar sein Bild tauschen, sowie ich mir das vorstelle. Was ich nicht schaffe ist den Code so umzustellen, dass in einem Div 2 Bilder liegen und sich mit Klick auf das zweite von beiden das erste ändert. Mein Versuch:
<div id="s5">
<div style="width:9000px">
<img src="zu_tauschendes_bild.jpg" style="float:left; width:auto" alt="work">
<a href="javascript:neuesBild()"><img id="Bild" src="linkbild.jpg" alt="Bild 1" title="Bild 1"></a>
</div>
</div>wurde leider nicht von Erfolg gekrönt. Hier die funktionierende Test-Datei:
<html><head><title>Test</title>
<script type="text/javascript">
function neuesBild () {
if (document.getElementById("Bild").src.indexOf("k_o.jpg") > -1) {
document.getElementById("Bild").src = "bildzwei.jpg";
document.getElementById("Bild").title = "Bild 2";
return;
}
if (document.getElementById("Bild").src.indexOf("k_m.jpg") > -1) {
document.getElementById("Bild").src = "bildeins.jpg";
document.getElementById("Bild").title = "Bild 3";
return;
}}
</script></head><body>
<style type="text/css">
body { margin:0; padding:0; height:0px; background-image:url(schatten4.jpg);background-repeat:no-repeat;}
#f0 { position:absolute; top:35px; left:400px; width:150px; height:60px; border:0px solid #840; bbackground-color:#000000; }
#s0 { position:absolute; top:35px; left:260px; width:100px; height:100px; overflow:hide; border:0px solid #840;}
</style><div id="f0">
<a href="javascript:neuesBild()"><img id="Bild" src="bildeins.jpg" alt="Bild 1" title="Bild 1"></a></div>
<div id="s0">
<img src="uninteressantesbild.jpg" alt="link">
</div>
</body></html>-
EDIT: Der ERSTE Container kann seinen Inhalt ändern *tztz*
-
Hallo 09az,
EDIT: Der ERSTE Container kann seinen Inhalt ändern *tztz*
Es tut mir wirklich leid - aber ich kann mir einfach nicht vorstellen, was Du möchtest. Du willst doch nicht allen ernstes Text als Grafik umsetzen? Also einfach ein riesiges Bild an Stelle von HTML verwenden?
Viele Grüße,
Marc.-
Also einmal sorry wegen unsinnigen Code-Passagen - hätte ich rausnehmen sollen. Außerdem habe ich wohl auf Grund der Verständlichkeit Bildnamen verändert, was aber zum Gegenteil beigetragen hat. Hier also noch einmal "bereinigt":
<html>
<head>
<title>Test</title><script type="text/javascript">
function neuesBild () {
if (document.getElementById("Bild").src.indexOf("bildeins.jpg") > -1) {
document.getElementById("Bild").src = "bildzwei.jpg";
document.getElementById("Bild").title = "Bild 2";
return;
}
if (document.getElementById("Bild").src.indexOf("bildzwei.jpg") > -1) {
document.getElementById("Bild").src = "bildeins.jpg";
document.getElementById("Bild").title = "Bild 3";
return;
}}
</script>
<style type="text/css">
body { margin:0; padding:0; height:0px; background-image:url(schatten4.jpg);background-repeat:no-repeat;}
#f0 { position:absolute; top:35px; left:400px; width:150px; height:60px; border:0px solid #840; bbackground-color:#000000; }
#belanglos { position:absolute; top:35px; left:260px; width:100px; height:100px; overflow:hide; border:0px solid #840;}
</style></head><body>
<div id="f0">
<a href="javascript:neuesBild()"><img id="Bild" src="bildeins.jpg" alt="Bild 1" title="Bild 1"></a></div>
<div id="belanglos">
<img src="uninteressantesbild.jpg" alt="link">
</div></body>
</html>Zur Seite:
Die Seite an sich ist statisch, auch Links oder Logo und das besagte Div. Dieses macht sich mittig auf dem Schirm breit und Bildet ein "Fenster". Läd man nun ein Bild in Überlänge hinein, kann/muss der Nutzer den Scrollbalken am unteren Rand des Divs benutzen, um sich die Inhalte, welche auf dem Bild dargestellt werden anzusehen. Das ist auch so gewollt.
Alles was ich nach der Zeile "Hier die funktionierende Test-Datei:" gepostet habe, funktioniert auch einwandfrei. Dort gibt es den Container Namens "f0", welcher ein Bild mit einem Link enthält:
<div id="f0">
<a href="javascript:neuesBild()"><img id="Bild" src="bildeins.jpg" alt="Bild 1" title="Bild 1"></a>
</div>Im Browser kann man nun auf dieses Bild Klicken und es startet die Funktion "neuesBild":
function neuesBild () {
if (document.getElementById("Bild").src.indexOf("bildeins.jpg") > -1) {
document.getElementById("Bild").src = "bildzwei.jpg";
document.getElementById("Bild").title = "Bild 2";
return;
}
if (document.getElementById("Bild").src.indexOf("bildzwei.jpg") > -1) {
document.getElementById("Bild").src = "bildeins.jpg";
document.getElementById("Bild").title = "Bild 3";
return;
}}
Hier wird einfach das zuerst abgebildete Bild "bildeins.jpg" durch "bildzwei.jpg" getauscht. Was ich nicht hinbekommen habe ist, das in dem Container "f0" 2 Bilder geladen werden, wobei das erste (überlange) Bild "bildeins.jpg" nicht verlinkt ist, sondern nur das zweite, nennen wir es "bilddrei.jpg". Bei Klick auf dieses Bild soll sich "bildeins.jpg" in "bildzwei.jpg" verwandeln - fertig.
Ich hoffe jetzt genug Licht in die Angelegenheit gebracht zu haben - vile Dank für Eure Mühe soweit!
09az
-
Hallo 09az!
Was ich nicht hinbekommen habe ist, das in dem Container "f0" 2 Bilder geladen werden, wobei das erste (überlange) Bild "bildeins.jpg" nicht verlinkt ist, sondern nur das zweite, nennen wir es "bilddrei.jpg". Bei Klick auf dieses Bild soll sich "bildeins.jpg" in "bildzwei.jpg" verwandeln - fertig.
In dem von Dir neu geposteten Code ist kein bilddrei.jpg und auch kein bildzwei.jpg referenziert.
Ich hoffe jetzt genug Licht in die Angelegenheit gebracht zu haben - vile Dank für Eure Mühe soweit!
Wir werden uns sicher keine mehr machen, wenn Du Dir nicht die machst, zu lesen, was man Dir schreibt!
bbackground gibt es nicht!
hide als Wert von overflow gibt es nicht (sondern hidden, visible, scroll, auto).Viele Grüße aus Frankfurt/Main,
Patrick--
_ - jenseits vom delirium - _
[link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
Nichts ist unmöglich? Doch!
Heute schon gegökt?
All'alba vincerò!-
Lieber Patrick,
mir ist Bewusst das der name "bilddrei.jpg" nicht im Script auftaucht. Wie ich vorher schon geschrieben habe, funktioniert diese "Erweiterung" des Scriptes (bei mir) nicht und ich weiß auch nicht, wie man das lösen könnte. Das es "bbackground" oder "hide" nicht gibt, ist mir auch bewusst. Sehe es als temporäre "Abschaltung" dieser Attribute - sie sind ja auch für das vorliegende Problem nicht relevant, oder?
Referenzieren brauchte ich bildzwei.jpg im geposteten Script (noch) nicht. Es braucht (bisher) keine besonderen Eigenschaften.
Hier also nochmal mein Ansatz eines erweiterten Div-Containers mit 2 Bildern, wobei sich eines anklicken lässt (bilddrei) und sich daraufhin das zweite Bild ändert (bildeins in bildzwei):
Script:
<script type="text/javascript">
function neuesBild () {
if (document.getElementById("Bild").src.indexOf("bildeins.jpg") > -1) {
document.getElementById("Bild").src = "bildzwei.jpg";
document.getElementById("Bild").title = "Bild 2";
return;
}
if (document.getElementById("Bild").src.indexOf("bildzwei.jpg") > -1) {
document.getElementById("Bild").src = "bildeins.jpg";
document.getElementById("Bild").title = "Bild 3";
return;
}}
Container:
<div id="f0">
<div style="width:9000px">
<img src="bildeins.jpg" style="float:left; width:auto" alt="work">
<a href="javascript:neuesBild()"><img id="Bild" src="bilddrei.jpg" alt="Bild 3" title="Bild 3"></a>
</div>
</div>-
Hallo 09az!
Das es "bbackground" oder "hide" nicht gibt, ist mir auch bewusst. Sehe es als temporäre "Abschaltung" dieser Attribute - sie sind ja auch für das vorliegende Problem nicht relevant, oder?
Das mag sein, aber wenn Du Dich nicht jetzt dran gewöhnst, sauber zu arbeiten, willst Du es nie lernen. Später werden deine Seiten schwer zu warten oder zu debuggen sein - glaub mir ;)
Hier also nochmal mein Ansatz eines erweiterten Div-Containers mit 2 Bildern, wobei sich eines anklicken lässt (bilddrei) und sich daraufhin das zweite Bild ändert (bildeins in bildzwei):
<div id="f0">
<div style="width:9000px">
<img src="bildeins.jpg" style="float:left; width:auto" alt="work">
<a href="javascript:neuesBild()"><img id="Bild" src="bilddrei.jpg" alt="Bild 3" title="Bild 3"></a>
</div>
</div>Hier sind zwei DIVs überflüssig. Du kannst dem DIV "f0" ebenso die Breite geben, die es nehmen soll (9000px). Die Breite des Bildes "bildeins" würde ich nicht mit width: auto definieren, sondern gar nicht mit CSS auf konventionelle Weise width="Maße" - height="hoehe" auch nicht vergessen!
Warum arbeitest Du nicht mit IDs:
HTML:
<div id="f0"> <img id="to_change" src="bildeins.jpg" width="..." height="..." alt="work" title=""> <img id="Bild" src="bilddrei.jpg" alt="Bild 3" title="Bild 3"> </div>CSS:
div#f0 { width:9000px; } img#Bild { cursor: pointer; } /* damit man erkennt, dass man klicken soll */JavaScript:
function pic_change { document.getElementById('Bild').onclick = function () { document.getElementById('to_change').src = "bildzwei.jpg"; document.getElementById('to_change').title = "was auch immer"; } } window.onload = pic_change;Bei dem Beispiel sparst Du Dir ein a-Element mit einem Link zu nix und dem unschönen Pseudo-Protokoll »javascript:«. Beim Hovern des Bilds »Bild« ändert sich der Cursor zur Hand (cursor:pointer <- ist irritierend, aber pointer ist tatsächlich die Hand) und der User erkennt, dass er klicken kann.
Viele Grüße aus Frankfurt/Main,
Patrick--
_ - jenseits vom delirium - _
[link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
Nichts ist unmöglich? Doch!
Heute schon gegökt?
All'alba vincerò!-
Hey Patrick,
vielen Dank für die prompte Antwort! Du hast ja Recht wenn du für ein sauberes Script wirbst - für die Finalversion ist das auf jeden Fall angedacht.
Das Script ist bestechend simpel und erspart ne Menge Umwege - Danke! Ich denke jetzt komme ich fürs Erste schon ganz gut zurrecht.
Gruß 09az
-
Hallo 09az!
Das Script ist bestechend simpel und erspart ne Menge Umwege - Danke! Ich denke jetzt komme ich fürs Erste schon ganz gut zurrecht.
Das kann ich aber anhand der erneuten Fragestellung in Deinem Doppelposting weiter oben nicht nachvollziehen. Ich habe den Eindruck, Du legst wenig Wert darauf, was man Dir an Tipps gibt.
Ich habe Dir gezeigt, dass Deine DIV-Verschachtelung überflüssig ist. Dennoch postest Du erneut ein Beispiel mit zwei DIV-Elementen.
Ich habe Dir gezeigt, wie man einen unnützen Link mit dem Pseudo-Protokoll »javascript:« vermeidet, dennoch baust Du wieder so etwas ein:
> <div id="s5"> > <div style="width:9000px"> > <img id="to_change" src="portfolio_1_1 Kopie.jpg" alt="work" title="bildeins"> > <a href="javascript:NachLinks()"><img id="Bild" src="portfolio_1_0 Link.jpg" alt="Bild 3" title="Bild 3"></a> > </div> > </div>Dabei hat dieses img bereits eine ID namens »Bild«. Damit wird bereits ein onclick-Event-Handler verknüpft:
document.getElementById('Bild').onclick = function () {...};Warum baust Du dann wieder so ein hässliches Link um das Bild herum, anstatt die Funktion pic_change um Deinen neuen Wünschen zu erweitern?
Viele Grüße aus Frankfurt/Main,
Patrick--
_ - jenseits vom delirium - _
[link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
Nichts ist unmöglich? Doch!
Heute schon gegökt?
All'alba vincerò!-
Hallo,
ich habe die pic_change funktion übernommen, bin zwischendurch aber nochmal probeweise zum alten weg zurück um scripts zu testen - sorry. Wie kann ich denn jetzt die funktion scrollLeft bzw scrollTo in mein script einbauen?
JavaScript:
<script type="text/javascript">
function pic_change() {
document.getElementById('Bild').onclick = function () {
document.getElementById('to_change').src = "portfolio_1_2 Kopie.jpg";
document.getElementById('to_change').title = "none";
document.getElementById('to_change').scrollTo(0,0);
}
}
window.onload = pic_change;</script>
CSS:
<style type="text/css">
#s5 { position:relative; top:160px; margin-left:auto; margin-right:auto; width:1010px; height:550px; overflow:auto;}
img#Bild { cursor: pointer;}
</style>HTML:
<div id="s5">
<div style="width:9000px">
<img id="to_change" src="portfolio_1_1 Kopie.jpg" alt="bildeins" title="bildeins">
<img id="Bild" src="portfolio_1_0 Link.jpg" alt="Link" title="Bild 3">
</div>
</div>Für jede Hilfe danke ich im Vorraus!
mfG 09az
-
Hallo 09az!
document.getElementById('to_change').scrollTo(0,0);
Mit welchem Browser testest Du? Die Fehlerkonsole jedes vernünftigen Browsers hätte hier schon gemeckert:
Fehler: document.getElementById("to_change"). scrollTo is not a function
In der Tat sind scrollTo() und scrollBy() Methoden des Objects »window« und nicht einfach auf andere Objekte übertragbar!
Für jede Hilfe danke ich im Vorraus!
Und wir wären Dir dankbar, wenn Du auch etwas mehr Eigeninitiative zeigst ;)
Mit den Stichwörtern »autoscroll« und »div« erhälst Du bei Google jede Menge Treffer. Schon der erste bietet eine für Dein Problem adäquate Lösung: http://www.daniweb.com/forums/thread30994.html.
<script type="text/javascript">
function pic_change() { document.getElementById('Bild').onclick = function () { var ptc = document.getElementById('to_change'); // ptc steht für »pic to change« ptc.src = "a.gif"; ptc.title = "none"; var dts = document.getElementById('s5'); // dts steht für »div to scroll« h = dts.scrollWidth; div.scrollLeft = -h; } } window.onload = pic_change;;</script>
Die Variablen mit Abkürzungen dienen dazu, den unschönen »document.getElementById«-Salat zu vermeiden.
Nochmal zur Fehlerkonsole: Beim Firefox rufst Du sie unter »Extras/Fehlerkonsole«. Eventuell bereits vermerkte Fehler von früheren Surfsessions erstmal löschen. Auf die Fehlermeldungen des Internet Explorers kannst Du Dich nicht verlassen, da die Zeilenangaben meistens falsch sind.
Viele Grüße aus Frankfurt/Main,
Patrick--
_ - jenseits vom delirium - _
[link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
Nichts ist unmöglich? Doch!
Heute schon gegökt?
All'alba vincerò!-
Re!
div.scrollLeft = -h;
Lesen: dts.srollLeft ...
Viele Grüße aus Frankfurt/Main,
Patrick--
_ - jenseits vom delirium - _
[link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
Nichts ist unmöglich? Doch!
Heute schon gegökt?
All'alba vincerò!-
Woa super Danke!
Ich habe mir wirklich schon eine Menge angesehen, wusste nur nie den Auslöser für die Funktion richtig zu setzen. Wenn die HP fertig ist, bekommt sie einen Bereich "making of" mit special thanks ;)
mfG 09az
-
-
-
-
-
-
-
-
-
-
-
-
Hallo 09az!
Hier die funktionierende Test-Datei:
Bei dem Code, den Du hier gepostet hast, »funktioniert« nichts!
</script></head><body>
<style type="text/css">
^^^ Styleblöcke haben außerhalb des head-Bereichs nichts zu suchen!
bbackground-color:#000000; }
^^^ Es gibt keine Eigenschaft bbackground!
overflow:hide
^^^ Es gibt keinen Wert »hide« für die Eigenschaft overflow!
<div id="f0">
<a href="javascript:neuesBild()"><img id="Bild" src="bildeins.jpg" alt="Bild 1" title="Bild 1"></a></div>
<div id="s0"><img src="uninteressantesbild.jpg" alt="link">
</div>In welchem obiger zwei Container befinden sich zwei Bilder, dessen erstes beim Klick auf das zweite getauscht werden soll? So nämlich verstehe ich Deine Worte: »Was ich nicht schaffe ist den Code so umzustellen, dass in einem Div 2 Bilder liegen und sich mit Klick auf das zweite von beiden das erste ändert.« ... Erst wenn klar ist, wie es aussehen soll, können wir uns ums entsprechende JavaScript-Code kümmern.
Viele Grüße aus Frankfurt/Main,
Patrick--
_ - jenseits vom delirium - _
[link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
Nichts ist unmöglich? Doch!
Heute schon gegökt?
All'alba vincerò!
-
-
-
-
-
-