bild src per javascript ändern

Question

1

bild src per javascript ändern

Frage von

NicolezZ 14.12.2011 - 11:32

hallöchen,

ich habe folgendes Problem... ich komm mit Javascript irgendwie nicht klar. Ich will dass beim klick auf ein thumbnail der pfad des großen bildes oben geändert wird sodass das thumbnail das ich grade angeklickt habe oben als groß erscheint.. hier die stelle des codes:

<div id="detail">
                            <div id="bg_wrapper">
                                <img src="showcase/fruehjahrsommer-2012/sommer2012_01_big.png" width="326" height="350" onmouseover="TJPzoom(this, 'showcase/fruehjahrsommer-2012/sommer2012_01_big_z.png');" />
                            </div>
                        </div>
                        <div class="clear"></div>
                        <div id="list" class="flexcroll">
                            <div id="horizontalwrap">
                                <a href="#"><img src="showcase/fruehjahrsommer-2012/sommer2012_01.png" alt="" id="image_01" /></a>
                                <a href="#"><img src="showcase/fruehjahrsommer-2012/sommer2012_02.png" alt="" id="image_02" /></a>
                                <a href="#"><img src="showcase/fruehjahrsommer-2012/sommer2012_03.png" alt="" id="image_03" /></a>
                            <div class="clear"></div>
                                </div>

eigentlich sind es mehr thumbs aber das is nur n beispiel. Die großenbilder haben den selben namen wie die thumbs bloß mit "_big.png" am ende. Hat villeicht jemand n Tutorial welches genau zu meinem problem passt? oder könnte mir evtl. so helfen? D:

LG

Fragen zu gleichen Themen finden: html; JavaScript; Klick; pfad; Thumbnails; SRC

Answer 1

Deine Antwort

Hallo!

Bitte beachte, dass Deine Antwort ein wirklich hilfreicher Rat für den Fragesteller ist.
Einer Antwort kann nur maximal ein Link beigefügt werden.
Antworten mit mehreren Links werden als Spam interpretiert und nicht veröffentlicht.

Vielen Dank, auch im Namen des Fragestellers,
Dein gutefrage.net-Team

answer

Answer 2 · 2011-12-14T11:34:18

3

Antwort von

driver83driver83 14.12.2011 - 11:34

ich seh dan kein js ....

Kommentar von

NicolezZ 14.12.2011 - 11:45

weil ich noch nichts brauchbares an infos gefunden habe wie ich das umsetzen könnte mit js. Wie schon erwähnt hab ich mich noch nie damit befasst und deswegen war ich auch noch nicht in der lage was zu schreiben.. und in meiner Frage steht ja auch nicht das ich verlange das mir jemand den kompletten code zusammenschreibt sondern mir evtl. hilft und/oder n TuT gibt D:

Kommentar von

driver83driver83 14.12.2011 - 11:49

gib dem bild, welches immer ersetzt werden soll eine id (z.b. mainpic)
der aufruf, bzw das javascript muss aus den kleinen bildern aufgerufen werden

der austausch erfolgt so:

document.getElementById('mainpic').src = '/img/artikel/bild.jpg';

reicht des weil ? oder brauchste noch mehr hilfe ? kleiner tip... am besten den bildnamen per parameter übergeben

Kommentar von

NicolezZ 14.12.2011 - 14:34

und das kommt in den head in n Script tag? und wie/wo verweise ich das beim klick auf ein Thumb der Bildpfad ausgetauscht wird?

Kommentar von

driver83driver83 15.12.2011 - 8:51

jup, in den head kommt das script, am besten in ne function.

und aufrufen tust dann die funktion

<a href="#" onmouseover="funktion(bild_gross.jpg"><img .... bild_klein...></a>

(vielleicht auch direkt im img-tag - also ohne a href, musste mal probieren)

Kommentar von

NicolezZ 15.12.2011 - 10:38

dank dir. habs jetzt zwar anders gelöst hab mich aber an deinem vorschlag orientiert.

<div id="horizontalwrap">
                                <a href="javascript:Ausrichten('showcase/winter2011/winter2011_01_big.png')"><img src="showcase/winter2011/winter2011_01.png" alt="" id="image_01" /></a>
                                <a href="javascript:Ausrichten('showcase/winter2011/winter2011_02_big.png')"><img src="showcase/winter2011/winter2011_02.png" alt="" id="image_02" /></a>
                                <a href="javascript:Ausrichten('showcase/winter2011/winter2011_03_big.png')"><img src="showcase/winter2011/winter2011_03.png" alt="" id="image_03" /></a>

funktioniert soweit auch. Nun gibts aber ein weiteres problem ~ und zwar hab ich neben dem großen bild einen pfeil links und einen pfeil rechts und diese sollten auch das bild wechseln (ein bild weiter gehen oder eben ein bild zurück gehen)

Kommentar von

NicolezZ 15.12.2011 - 10:41

                        </div>
                        <div id="pfeil_r"><a href="#"><img src="images/pfeil_r.png" width="60" height="60" alt="" /></a></div>  <div id="pfeil"><a href="#"><img src="images/pfeil_l.png" width="60" height="60" alt="" /></a></div>
                      <div id="detail">
                        <div id="bg_wrapper">
                                <img id="mainpic" src="showcase/winter2011/winter2011_01_big.png" width="326" height="350" onmouseover="TJPzoom(this, 'showcase/fruehjahrsommer-2012/sommer2012_01_big_z.png');" />
                            </div>
                        </div>
                        <div id="pfeil_r"><a href="#"><img src="images/pfeil_r.png" width="60" height="60" alt="" /></a></div>

wie kann ich das lösen damit beim klick auf den rechten pfeil das nächste bild kommt und links das bild davor? (bilder sind ja alle numeriert 01big, 02big etc.) und wie könnt ich gleichzeitig den code vom onmouseover="TJPzoom(this, 'showcase/fruehjahrsommer-2012/sommer201201big_z.png');" ändern beim klick auf ein thumb oder bei benutzung der Pfeile? D: bin ratlos..

Answer 3 · 2011-12-14T11:34:18

3

Antwort von

driver83driver83 14.12.2011 - 11:34

ich seh dan kein js ....

Kommentar von

NicolezZ 14.12.2011 - 11:45

weil ich noch nichts brauchbares an infos gefunden habe wie ich das umsetzen könnte mit js. Wie schon erwähnt hab ich mich noch nie damit befasst und deswegen war ich auch noch nicht in der lage was zu schreiben.. und in meiner Frage steht ja auch nicht das ich verlange das mir jemand den kompletten code zusammenschreibt sondern mir evtl. hilft und/oder n TuT gibt D:

Kommentar von

driver83driver83 14.12.2011 - 11:49

gib dem bild, welches immer ersetzt werden soll eine id (z.b. mainpic)
der aufruf, bzw das javascript muss aus den kleinen bildern aufgerufen werden

der austausch erfolgt so:

document.getElementById('mainpic').src = '/img/artikel/bild.jpg';

reicht des weil ? oder brauchste noch mehr hilfe ? kleiner tip... am besten den bildnamen per parameter übergeben

Kommentar von

NicolezZ 14.12.2011 - 14:34

und das kommt in den head in n Script tag? und wie/wo verweise ich das beim klick auf ein Thumb der Bildpfad ausgetauscht wird?

Kommentar von

driver83driver83 15.12.2011 - 8:51

jup, in den head kommt das script, am besten in ne function.

und aufrufen tust dann die funktion

<a href="#" onmouseover="funktion(bild_gross.jpg"><img .... bild_klein...></a>

(vielleicht auch direkt im img-tag - also ohne a href, musste mal probieren)

Kommentar von

NicolezZ 15.12.2011 - 10:38

dank dir. habs jetzt zwar anders gelöst hab mich aber an deinem vorschlag orientiert.

<div id="horizontalwrap">
                                <a href="javascript:Ausrichten('showcase/winter2011/winter2011_01_big.png')"><img src="showcase/winter2011/winter2011_01.png" alt="" id="image_01" /></a>
                                <a href="javascript:Ausrichten('showcase/winter2011/winter2011_02_big.png')"><img src="showcase/winter2011/winter2011_02.png" alt="" id="image_02" /></a>
                                <a href="javascript:Ausrichten('showcase/winter2011/winter2011_03_big.png')"><img src="showcase/winter2011/winter2011_03.png" alt="" id="image_03" /></a>

funktioniert soweit auch. Nun gibts aber ein weiteres problem ~ und zwar hab ich neben dem großen bild einen pfeil links und einen pfeil rechts und diese sollten auch das bild wechseln (ein bild weiter gehen oder eben ein bild zurück gehen)

Kommentar von

NicolezZ 15.12.2011 - 10:41

                        </div>
                        <div id="pfeil_r"><a href="#"><img src="images/pfeil_r.png" width="60" height="60" alt="" /></a></div>  <div id="pfeil"><a href="#"><img src="images/pfeil_l.png" width="60" height="60" alt="" /></a></div>
                      <div id="detail">
                        <div id="bg_wrapper">
                                <img id="mainpic" src="showcase/winter2011/winter2011_01_big.png" width="326" height="350" onmouseover="TJPzoom(this, 'showcase/fruehjahrsommer-2012/sommer2012_01_big_z.png');" />
                            </div>
                        </div>
                        <div id="pfeil_r"><a href="#"><img src="images/pfeil_r.png" width="60" height="60" alt="" /></a></div>

wie kann ich das lösen damit beim klick auf den rechten pfeil das nächste bild kommt und links das bild davor? (bilder sind ja alle numeriert 01big, 02big etc.) und wie könnt ich gleichzeitig den code vom onmouseover="TJPzoom(this, 'showcase/fruehjahrsommer-2012/sommer201201big_z.png');" ändern beim klick auf ein thumb oder bei benutzung der Pfeile? D: bin ratlos..

bild src per javascript ändern

Antworten (1)

Verwandte Fragen

Noch nicht den richtigen Rat gefunden?

Diese Frage teilen

Ähnliche Fragen