HTML Bild in Div "leiten"

[Cool Master]

Moin,

ich habe mal eine kleine Frage. Ich möchte eine einfache Galerie erstellen die aus 3 Divs aufgebaut ist. EIn Div für Text/Info, ein Div für ein großes Bild und eins für Thumbnails.

Was ich aktuell habe ist das:

<div id="container">
    <div id="Thumbnails">
        <div class="thumb">
            <img src="/link/zum/Thumbnail">
        </div>
        <div class="thumb">
            <img src="/link/zum/Thumbnail">
        </div>
        <div class="thumb">
            <img src="/link/zum/Thumbnail">
        </div>
        <div class="thumb">
            <img src="/link/zum/Thumbnail">
        </div>
        <div class="thumb">
            <img src="/link/zum/Thumbnail">
        </div>
        <div class="thumb">
            <img src="/link/zum/Thumbnail">
        </div>
    </div>
    <div id="Beschreibung">Info zu dem Bild/Projekt</div>
    <div id="Bild">Bild von Thumb</div>
</div>

Was meine Frage nun ist wie kann ich es anstellen das sobald ich über ein Thumb mit der Maus gehe das ein anderes (größeres) Bild in den Bild Div geleitet wird?

Also Thumbnail hat z.B. 100px*100px und das "Orginal" Bild hat z.B. 800px*600px Wie kann ich nun das "Orginal" in den Bild Div leiten?

 

[Seraph1980]

Da das ein dynamischer Vorgang ist, ist JavaScript das Zauberwort.

 

[Cool Master]

Hmm damit kenne ich mich noch nicht wirklich aus gäbe es dafür ein Tutorial das genau das ansprich was ich suche? jQuery sollte sowas auch können oder?

 

[Seraph1980]

jquery ist eine JavaScript-Bibliothek, also ja. Aber mit "normalem" JavaScript solltest du das auch packen.

http://www.web-toolbox.net/webtoolbox/java/links-aendern-2image/aendern-1image.htm

Schau dir das mal an, das dürfte dir helfen.

 

[Plankokan]

Jquery ist das Framework für Javascript.
Hättest du deine Gallerie anders aufgebaut, hättest du das auch mit CSS und Background-image lösen können

 

[evilbaschdi]

geht das nich auch mit css?
ich meine, wenn ich einfach der "thumb" klasse ein .hover zuweiße. oder gibts sowas bei css nich?

 

[Seraph1980]

@picola Das möchte ich sehen. Mit CSS kannst du nur das Background-Image des DIVs ändern auf dem du das Mouse-Over machst. Er möchte aber den Inhalt eines ganz anderen DIVs manipulieren. Da führt kein Weg an JavaScript vorbei.

@evilbaschdi Er möchte aber nicht "thumb" manipulieren sondern "Bild"

 

[Spike S.]

Je nach dem, wie oft sich die Bilderquellen ändern, könnte man auch einfach mit Sprites und CSS arbeiten.

Gruß
Spike S.

 

[SaxnPaule]

Evtl. probierst du es mit einer simplen Greybox.
Javascript einbinden, Bildlinks einfuegen, fertig.

<script type="text/javascript">
    var GB_ROOT_DIR = "http://localhost:8080/meinewebapp/js/other/greybox/";
</script>

<script type="text/javascript" src="/meinewebapp/js/other/greybox/AJS.js"></script>
<script type="text/javascript" src="/meinewebapp/js/other/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="/meinewebapp/js/other/greybox/gb_scripts.js"></script>
<link href="/meinewebapp/js/other/greybox/gb_styles.css" rel="stylesheet" type="text/css" />

<div>
	<a href="http://...bild3.jpg" rel="gb_imageset[nice_pics]" title="3">
	   <img src="http://...bild3.jpg" style="width:150px;"/>
	</a>
	<a href="http://...bild2.jpg" rel="gb_imageset[nice_pics]" title="2">
	   <img src="http://...bild2.jpg" style="width:150px;"/>
	</a>
	<a href="http://...bild1.jpg" rel="gb_imageset[nice_pics]" title="1">
	   <img src="http://...bild1.jpg" style="width:150px;"/>
	</a>
</div>

 

[Cool Master]

Dank dir werde ich mal versuchen. Werde mal heute mittag, spätestens Freitag Feedback geben

 

[mercsen]

In CSS gibt es das "content" attribut mit dem man den inhalt im gewissen rahmen ändern kann. Sollte aber möglichst nicht verwendet werden denn css dient mehr zum designen.

würde aber auch zu JS raten. Alternativ gehts natürlich auch mit nem Mausklick und seite neuladen lassen. Wenns unbeidngt sein muss würden sogar frames gehen

 

[Cool Master]

So erstmal @SaxnPaule

habe mir mal die greybox angeschaut leider ist das nicht so meins da die "Steuerung" nicht Optimal ist sprich ich kann nicht raus klicken die ESC taste hat keine funktion etc. Trotzdem danke für den Vorschlag.

@Mercsen

Ja ich denke ich werde mich mal ein wenig in JS einlesen bzw. in jQuery. Aber auch danke für den Tipp mit CSS.