HTML Bild in Div "leiten"

Cool Master

Fleet Admiral
Dabei seit
Dez. 2005
Beiträge
26.953
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:

Code:
<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?
 

Cool Master

Fleet Admiral
Ersteller dieses Themas
Dabei seit
Dez. 2005
Beiträge
26.953
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?
 

Picola

Ensign
Dabei seit
Mai 2008
Beiträge
187
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

Lt. Commander
Dabei seit
Aug. 2011
Beiträge
1.927
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

Cadet 4th Year
Dabei seit
Dez. 2011
Beiträge
68
@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"
 

SaxnPaule

Commodore
Dabei seit
Okt. 2010
Beiträge
4.125
Evtl. probierst du es mit einer simplen Greybox.
Javascript einbinden, Bildlinks einfuegen, fertig.

Code:
<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>
 

mercsen

Lt. Commander
Dabei seit
Apr. 2010
Beiträge
1.514
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

Fleet Admiral
Ersteller dieses Themas
Dabei seit
Dez. 2005
Beiträge
26.953
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.
 
Top