Java Script Bilderwechsel

DeletedUser114131 · 26. Nov 2011

Hallo Community,

Ich habe bereits bei Google gesucht aber nicht so wirklich das gefunden, was ich suche. Vermutlich liegt es daran, dass ich nicht die richtigen Schlüsselbegriffe kenne ...

Naja um zum Thema zu kommen:

Ich möchte auf einer Homepage (html geschrieben) gerne auf bestimmten Seiten eine kleine JavaScript sache einbauen.
Das ganze soll also so funktionieren, dass der Grundaufbau so ist wie auf dieser Grafik:

Soweit bin ich schon, daran liegt jetzt nicht wirklich ein Problem ^^

Nun soll das ganze so funktionieren:

Bild 1 ist das erste Bild und soll immer als erstes so groß angezeigt werden wenn man auf die Seite kommt. Klickt man unten die kleine Vorschau von BILD 2 an, so soll da wo jetzt das große (rote) BILD 1 ist das Bild 2 in groß erscheinen, ohne das die Seite komplett neu lädt.
Das gleiche dann mit Bild 3. Ebenso soll möglich sein das Bild 3 per klick "größer" zu machen (also an die Stelle vom großen Roten bringen) nachdem grade Bild 1 offen war, also die Reihenfolge muss nicht eingehalten werden.
Hoffe das ist verständlich :wink:

Das wäre jetzt erstmal das, was ich unbedingt brauche.
Dann hätte ich noch die Idee, wenn nun Bild 1 offen ist steht unten ein bestimmter Text, wenn ich dann Bild 2 in die Vergrößerung klicke, wäre es dann auch möglich den Text zu ändern ? so zusagen ne verknüpfung, dass wenn Bild 2 groß angezeigt wird, dann zeige Text 2, wenn Bild 3 dann Text 3 und wenn Bild 1 dann Text 1 ?

Wäre schön wenn ihr mir da helfen könntet.
Ich bitte um etwas detailierte Lösungshilfen, da ich mich mit JavaScript jetzt nicht unbedingt gut auskenne (also eher in die Kategorie noob einzusortieren

)

Danke schonmal im Voraus für euere Hilfe

Grüße
la noob

TimLim · 26. Nov 2011

Ich gehe von einem HTML Grundverständnis aus. Wenn ich nicht detailliert genug bin Frage einfach.

Um Eigenschaften von Bildern zu ändern musst du zuersteinmal das Element auswählen.

PHP:

var img = document.getElementById('BildId'); // Per Id auswählen
var img = document.getElementsByTagName('img')[0]; // Per Tag. Gibt ein Array zurück! 
// Das Beispiel wählt das erste Bild auf der Seite aus.
var img  = document.getElementsByClassName('bigimg')[0]; // Per Class, selbiges beachten wie beim Tag

Dann kannst du recht einfach auf die Attribute zugreifen.

PHP:

img.src = 'Neue Bildadresse';
img.style.width = '10px'; // Breite
img.style.height = '20px'; // Höhe

Ähnlich geht das mit anderen HTML Elementen

PHP:

document.getElementById('Beschreibung').innerHTML = 'Neue Beschreibung';

Möglich wäre es zum Beispiel so.

PHP:

function enlargePic(obj) // Funktion erstellen. 
// obj wird das kleine Bild sein. Weiter unten mehr.
{
  document.getElementById('bigimg').src = obj.src;
  document.getElementById('description').innerHTML = obj.title;
}

HTML:

<img src="img/test.jpg" title="Beispiel Beschreibung" onclick="enlargePic(this)" />

Bei klick auf das Bild (img/test.jpg) wird ein anderes Bild, dessen Größe du zum Beispiel schon definiert hast oder es einfach volle größe des Bildes ist, verändert. Nämlich das Bild mit der ID bigimg. Außerdem wird einem Element (Div ftw) ein Inhalt gegeben bzw. dieser wird verändert. Das Element mit der ID description erhält den Inhalt, der bei dem kleinen Bild als Titel definiert wurde.

Ist natürlich nur eine Möglichkeit das zu realisieren. Und ich möchte deinen Rahmen auch nicht sprengen.

DeletedUser114131 · 26. Nov 2011

Danke erstmal für die schnelle Antwort

HTML kenntnisse, ja, aber dennoch muss ich jetzt fragen, wo kommt nun was von den Codes hin ? ^^

TimLim · 26. Nov 2011

la noob schrieb:
Danke erstmal für die schnelle Antwort

HTML kenntnisse, ja, aber dennoch muss ich jetzt fragen, wo kommt nun was von den Codes hin ? ^^

JavaScript kommt in den Script Tag à la

PHP:

<script type="text/Javascript">blaaa</script>

HTML in den Body, sollte ja klar sein.

DeletedUser24674 · 27. Nov 2011

So könnte man es machen:

HTML:

<html>
<head>
	<title>Picture Example</title>
	<script type="text/javascript">
	function largeImg(el) {
		var big = document.getElementById("big_image");
		big.src = el.src;
		big.alt = el.alt;
	}
	</script>
</head>
<body>

<img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/128x128/icontexto-inside-twitter.png" alt="" id="big_image" /> <br />
<img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/128x128/icontexto-inside-twitter.png" alt="" width="64" height="64" onclick="largeImg(this);" /> 
<img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/128x128/icontexto-inside-whosamungus.png" alt="" width="64" height="64" onclick="largeImg(this);" /> 
<img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/128x128/icontexto-inside-myspace.png" alt="" width="64" height="64" onclick="largeImg(this);" />

</body>
</html>

Ist zwar keine saubere Lösung, aber es sollte seinen Zweck erfüllen

DeletedUser88169 · 27. Nov 2011

Alexander der Große III schrieb:
So könnte man es machen:

Ich denke aber, dass ihm hier die Möglichkeit fehlt, dass der Text unter dem Bild verändert wird.
Wenn man alles zusammenbastelt, kommt dieser Schnipsel hier raus:

HTML:

<!doctype html>
<html>
<head>
    <title>Picture Example</title>
    <script type="text/javascript">
    function largeImg(el) {
        var big = document.getElementById("big_image");
        big.src = el.src;
        document.getElementById('description').innerHTML = el.title; 
    }
    </script>
</head>
<body>

<img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/128x128/icontexto-inside-twitter.png" title="" id="big_image" /> <br />
<img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/128x128/icontexto-inside-twitter.png" title="1" width="64" height="64" onclick="largeImg(this);" /> 
<img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/128x128/icontexto-inside-whosamungus.png" title="2" width="64" height="64" onclick="largeImg(this);" /> 
<img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/128x128/icontexto-inside-myspace.png" title="3" width="64" height="64" onclick="largeImg(this);" />

<div id="description">

</div>

</body>
</html>

Im title-Attribut gibst du die Beschreibung an.

EDIT:
Hab noch eine zweite Möglichkeit:

HTML:

<!doctype html>
<html>
<head>
    <title>Picture Example</title>
    <script type="text/javascript">
    function largeImg(el,desc) {
        var big = document.getElementById("big_image");
        big.src = el.src;
        document.getElementById('description').innerHTML = desc; 
    }
    </script>
</head>
<body>

<img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/128x128/icontexto-inside-twitter.png" id="big_image" /> <br />
<img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/128x128/icontexto-inside-twitter.png" width="64" height="64" onclick="largeImg(this,1);" /> 
<img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/128x128/icontexto-inside-whosamungus.png" width="64" height="64" onclick="largeImg(this,2);" /> 
<img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/128x128/icontexto-inside-myspace.png" width="64" height="64" onclick="largeImg(this,3);" />

<div id="description">

</div>

</body>
</html>

Hier gibst du die Beschreibung mit in die Funktion ein.
Also:

HTML:

<img  src="bespielfoto.png"  width="64" height="64" onclick="largeImg(this,Beschreibung);" />

DeletedUser114131 · 27. Nov 2011

Danke an alle für die vielen Vorschläge.
Ich hab'S jetzt mal mit dem script von JaRoSchm probiert und das ist schon sehr sehr gut nur eine winzige kleinigkeit fehlt mir daran noch.
Beim Aufrufen der seite werden nur die Bilder angezeigt. Da aber bereits Bild 1 groß angezeigt wird, sollte auch Text 1 zu sehen sein. Wäre das auch noch irgendwie möglich ?

ach und nochwas ist mir aufgefallen,
wenn ich die 1 hinter (this,) z.B. in Beschreibung ändere dann funktioniert es bei mir nicht mehr ... warum ?

DeletedUser88169 · 27. Nov 2011

la noob schrieb:
Beim Aufrufen der seite werden nur die Bilder angezeigt. Da aber bereits Bild 1 groß angezeigt wird, sollte auch Text 1 zu sehen sein. Wäre das auch noch irgendwie möglich ?

Zwei Möglichkeiten:
1. Du kannst die Beschreibung zu Bild 1 in den "description"-div-Container schreiben:

HTML:

<div id="description">
Beschreibung zu Bild 1
</div>

2. Du kannst bei dem großen Bild erstmal ein Platzhalter-Bild einfügen, welches getauscht wird, wenn man auf ein darunterliegendes klickt:

HTML:

<img src="platzhalter.png" id="big_image" />

la noob schrieb:
wenn ich die 1 hinter (this,) z.B. in Beschreibung ändere dann funktioniert es bei mir nicht mehr ... warum ?

Setze die Beschreibung einfach in einfache Anführungszeichen:

HTML:

<img src="beispielfoto.png" width="64" height="64" onclick="largeImg(this,'Beschreibung');" />

DeletedUser114131 · 27. Nov 2011

Beides jetzt nicht wirklich optimal,
beim ersten steht ja dann die Beschreibung von Bild 1 immer da und die von Bild 2 wird nur oben drüber ausgegeben, oder mache ich da etwa einen fehler ?
Aber hab's genauso gemacht wie du es geschrieben hattest ...

und beim 2. muss ja auch erstmal auf das erste Bild (klein) geklickt werden bevor der Text da steht. Ich will aber, dass der erste Text schon da steht, da ja auch das erste Bild bereits angezeigt wird.
Der Text 1 soll aber dann auch vom Text 2 überblendet werden wenn das 2. Bild geöffnet wird

DeletedUser88169 · 27. Nov 2011

Kein dein Problem nicht nachvollziehen. Bei mir klappt mit folgendem Code alles, wie du es willst. Es kann nur daran liegen, dass du irgendwas falsch verstanden hast.

HTML:

<!doctype html>
<html>
<head>
    <title>Picture Example</title>
    <script type="text/javascript">
    function largeImg(el,desc) {
        var big = document.getElementById("big_image");
        big.src = el.src;
        document.getElementById('description').innerHTML = desc; 
    }
    </script>
</head>
<body>

<img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/128x128/icontexto-inside-twitter.png" id="big_image" /> <br />
<img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/128x128/icontexto-inside-twitter.png" width="64" height="64" onclick="largeImg(this,'Beschreibung zu Bild 1');" /> 
<img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/128x128/icontexto-inside-whosamungus.png" width="64" height="64" onclick="largeImg(this,'Beschreibung zu Bild 2');" /> 
<img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/128x128/icontexto-inside-myspace.png" width="64" height="64" onclick="largeImg(this,'Beschreibung zu Bild 3');" />

<div id="description">
Beschreibung zu Bild 1
</div>

</body>
</html>

DeletedUser114131 · 27. Nov 2011

Keine Ahnung ich hab deinen Code exakt kopiert und es mit einer frischen HTML datei probiert.
Wenn ich die Seite dann aufrufe, so sehe ich zwar bild 1 groß aber den zugehörigen Text 1 nicht.
Erst wenn ich auf das kleine Bild 1 klicke erscheint der Text

Ist das bei dir nicht so ?

DeletedUser88169 · 27. Nov 2011

Wenn ich den Code oben in einer html-Datei öffne, sehe ich Bild 1 mit der Beschreibung zu Bild 1.
Kann dir hier leider nicht weiterhelfen. Vielleicht wissen da die Anderen mehr.

Welchen Browser (Version) und Betriebssystem benutzt du?
In meinem Fall sind es Firefox 8 und Windows XP.

DeletedUser114131 · 27. Nov 2011

ok hat sich geklärt ich hatte da wohl doch ein Zeichen vergessen :redface::redface::redface:

Jetzt noch eine letzte Frage ^^
Ist es auch möglich die Beschreibung in einer Tabelle ausgeben zu lassen, und wenn ja wie ?

DeletedUser88169 · 27. Nov 2011

Sry, hier bin ich überfordert, eine ordentliche Lösung zu finden. Bin nicht so der Javascript-Guru.
Ich denke hier haben die Anderen mehr drauf und können dir evt. helfen.
Man könnte die ganze Tabelle zwar in die Funktion quetschen, aber das ist natürlich sehr unübersichtlich.
Und die Verknüpfung von HTML mit Javascript-Variablen habe ich jetzt beim Probieren nicht hin gekriegt.

DeletedUser114131 · 27. Nov 2011

Oki kein Problem, dann warte ich mal ob mir da jemand noch helfen kann

Ich hab's auch probiert einfach alles da rein zu quetschen aber das ist erstens wie du sagst sehr unübersichtlich und zweitens funktionierts dann nicht mehr ...

Trotzdem nen riesen dank an dich, du hast mir schon sehr sehr gut geholfen

DeletedUser · 28. Nov 2011

Ihr sollte vllt mal hier schauen ob es so was schon gibt^^

http://www.dynamicdrive.com/

DeletedUser24674 · 28. Nov 2011

la noob schrieb:
ok hat sich geklärt ich hatte da wohl doch ein Zeichen vergessen :redface::redface::redface:

Jetzt noch eine letzte Frage ^^
Ist es auch möglich die Beschreibung in einer Tabelle ausgeben zu lassen, und wenn ja wie ?

Klar ist das möglich, aber was meinst du mit "in einer Tabelle ausgeben zu lassen"? Eine Tabelle mit einer Spalte und einer Zeile macht ja wenig Sinn...

DeletedUser114131 · 28. Nov 2011

ne ich meine halt, dass die Beschreibung aus mehr als einem Wort besteht.
Zum beispiel, dass die Beschreibung bei Bild 1 ist:

Beschreibung1 | Beschreibung2 | Beschreibung3
Beschreibung4 | Beschreibung5 | Beschreibung6

und so weiter halt ^^

TD-AoD schrieb:
Ihr sollte vllt mal hier schauen ob es so was schon gibt^^

http://www.dynamicdrive.com/

öhm mal abgesehen davon dass mein Englisch nicht grade das beste ist wird es wohl noch schwerer sein das zu finden was ich suche wenn ich schon auf deutsch nicht weis nach was ich genau suche

DeletedUser · 28. Nov 2011

la noob schrieb:
öhm mal abgesehen davon dass mein Englisch nicht grade das beste ist wird es wohl noch schwerer sein das zu finden was ich suche wenn ich schon auf deutsch nicht weis nach was ich genau suche

Die 1a Moeglichkeit Dein Englisch aufzufrischen...
Hier(http://www.dynamicdrive.com/dynamicindex17/) sind mehrere Skripte die genau das machen, was Du Dir da vorstellst

Java Script Bilderwechsel

DeletedUser114131

Gast

TimLim

Gast

DeletedUser114131

Gast

TimLim

Gast

DeletedUser24674

Gast

DeletedUser88169

Gast

DeletedUser114131

Gast

DeletedUser88169

Gast

DeletedUser114131

Gast

DeletedUser88169

Gast

DeletedUser114131

Gast

DeletedUser88169

Gast

DeletedUser114131

Gast

DeletedUser88169

Gast

DeletedUser114131

Gast

DeletedUser

Gast

DeletedUser24674

Gast

DeletedUser114131

Gast

DeletedUser

Gast